Customizing WordPress Twenty Twenty Four

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;

    box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
    transform: translate3d(0px, -1px, 0px);
    transform: rotate(-1deg);

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

I have not written non-Jquery JavaScript of this complexity in my life. I think this is a perfect use for ChatGPT.

Other modifications

  1. Custom background image. Why don’t they have this built in? No idea.
  2. Custom Font (Gabriela) for links (WordPress is adding font support in the next version)
  3. Improved calendar CSS at the bottom
  4. Some other minor tweaks for various needs
@font-face {
    font-family: "Gabriela";
    src: url("/Gabriela.woff2")
    font-display: swap;

  {font-family: 'Gabriela', serif}

  {font-family: 'Gabriela', serif}

  /* Background image *
    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;
      width: 100%;
      position: relative;
      border-radius: 8px;
  .wp-calendar-table a:hover{
      filter: brightness(120%);
      transition: filter 0.15s linear;
  .wp-calendar-table caption,
  .wp-calendar-nav a{
  .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;


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?