I have a particular look and feel that I want on my blog. Every time there is a new theme, I try to recreate the same look and feel in the new theme. I suppose I believe that the new theme will be faster and better than the previous. However, my customizations are not always easy. Twenty Twenty Four was especially difficult.
Grid Layout
I prefer the grid layout on the homepage rather than the list style. For some reason, this is not that popular and has some issues, especially on mobile.
I modified the out-of-the-box structure to be the following:
The most important thing is that I made the Stack element have an additional class of .home-block.
CSS to make card hover effect
My favorite thing is the little hover effect on the homepage cards. The little tilt and shadow make me very happy. To achieve that, I used “Additional CSS” in the theme.
.home-block, img
{
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
transition: all .3s ease-in-out;
height: 100%;
border-color: #dddddd;
}
.home-block:hover,img:hover
{
box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
transform: rotate(-1deg);
cursor:pointer;
}Script to make card clickable
The way these cards work in WordPress (as of 2/18/2024) is that the H2 is clickable and you can add a “more…” link if you want, but the excerpt is not clickable. I was having trouble figuring out how to fix this.
I ended up asking ChatGPT to write JavaScript for me. I added it to the page using the TC Custom JS Plugin. With about 15 minutes of trial and error, this is the code ChatGPT gave me.
// Define an async function to iterate over elements
async function iterateElements() {
// Select all elements with the class 'wp-block-post-title'
const postTitles = document.querySelectorAll('.wp-block-post-title');
// Iterate over each element with the class 'wp-block-post-title'
for (let postTitle of postTitles) {
// Find the anchor link within the current post title element
const anchor = postTitle.querySelector('a');
// Check if an anchor link is found
if (anchor) {
// Get the URL from the anchor link
const url = anchor.href;
// Find the nearest ancestor element with the class 'home-block'
const homeBlock = postTitle.closest('.home-block');
// Check if a 'home-block' ancestor is found
if (homeBlock) {
// Add a click event listener to the 'home-block' element
homeBlock.addEventListener('click', () => {
// Redirect to the URL when the 'home-block' is clicked
window.location.href = url;
});
}
}
}
}
// Call the function to start iterating over elements
iterateElements();I have not written non-Jquery JavaScript of this complexity in my life. I think this is a perfect use for ChatGPT.
Other modifications
- Custom background image. Why don’t they have this built in? No idea.
- Custom Font (Gabriela) for links (WordPress is adding font support in the next version)
- Improved calendar CSS at the bottom
- Some other minor tweaks for various needs
@font-face {
font-family: "Gabriela";
src: url("/Gabriela.woff2")
format("woff2");
font-display: swap;
}
.comment-reply-title,
h1,h2,h3,h4,h5,h6,a
{font-family: 'Gabriela', serif}
.comment-reply-title,
h1,h2,h3,h4,h5,h6,a
{font-family: 'Gabriela', serif}
/* Background image *
div.wp-site-blocks{
background: url("/wp-content/uploads/2022/06/wallpaper-min.webp") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* I made a wierd table of good/bad columns *
.good-bad td:nth-child(3) {
background-color: rgba(255, 0, 0, 0.33) !important;
}
.good-bad td:nth-child(2) {
background-color: rgba(0, 255, 102, 0.33) !important;
}
/* whenever I use a background color,
I prefer to round the corners */
p.has-background {
border-radius: 12px;
}
/* Calendar changes */
.wp-calendar-table * {
border: 0px;
}
.wp-calendar-table thead th {
font-size: 90%;
font-weight: bold;
padding: 0.25rem;
background: rgba(192,205,205,0.5);
text-transform: uppercase;
text-align: center;
}
.wp-calendar-table tbody td {
position: relative;
padding: 0.55rem;
text-align: center;
background: #ffffff;
}
.wp-calendar-table tbody td.pad {
opacity: 0.7;
}
.wp-calendar-table tbody td#today {
font-weight: bold;
}
.wp-calendar-table tbody td#today:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 10px solid #999;
border-left: 10px solid transparent;
}
.wp-calendar-table tbody td a {
display: block;
background: #fec971;
border-radius: 20px;
padding: 0px 8px
}
.wp-calendar-table tbody td a:hover {
background: #3299bb;
color: #fff;
}
.wp-calendar-table a{
background-color: #d50139;
color:white;
width: 100%;
position: relative;
float:left;
border-radius: 8px;
text-decoration:none
}
.wp-calendar-table a:hover{
filter: brightness(120%);
transition: filter 0.15s linear;
}
.wp-calendar-table caption,
.wp-calendar-nav a{
color:#333;
font-weight:bold
}
.wp-block-embed-spotify iframe {max-height:350px}
.powerPointEmbed iframe {width: 600px}
/* Disable duotone filter on images */
.wp-block-image img,
.wp-block-post-featured-image img {
filter:none !important;
}
Summary
WordPress continues to get better and better as a CMS each year. It’s fast and usable. I have been a fan for years and love the direction they are going. One day, I hope I can do the customization without having to write any JS or CSS. Let me know if you have any questions.
Whatya think?