Create Custom Post Navigation using GeneratePress & GenerateBlocks

It never ceases to amaze me how much you can continually learn in the field of web design. Recently, I was working on a project for a white-label client that required some custom previous and next post navigation buttons. Today, I want to show you exactly how you can do this using GenerateBlocks and GeneratePress Elements.

Step 1: Creating the Navigation Block Element

1. Go to Appearance > Elements and add a new block element.
2. Title it “Blog Post Navigation”.
3. Set the Element Type to Post Navigation.
4. Enable “Disable Default Post Navigation” to prevent duplicate navigation.
5. Save the element.

Step 2: Creating the Layout

We’re going to set up a 50/50 layout with two columns—one for the next post and one for the previous post.

1. Insert a Container block (this is the outer wrapper).
2. Inside this container, add an Inner Container.
3. Within the Inner Container, add two more containers (these will hold the previous and next buttons).
4. Set the parent container to display: flex with justify-content: space-between.
5. Rename the containers:
   • Left Container → Next Post
   • Right Container → Previous Post
6. Set each container’s width to 50%.
7. Add a 16px column gap between them.

Step 3: Adding the Next Post Button

Inside the left container, we’ll add the Next Post button:

1. Insert a new container inside the Next Post Container.
2. Inside this new container, add two more containers (one for the featured image and one for text).
3. Set the parent container to display: flex and justify-content: space-between.
4. For the featured image:
   • Instead of using an Image block, use a container with a dynamic background image.
   • Set a fallback image.
   • Go to Background Settings, enable Dynamic Data, and select Next Post Featured Image.
   • Set a fixed size (e.g., 120x80px).
5. For the text:
   • Insert a headline block and type "Next" (set to uppercase, bold, size 12px, letter spacing 2).
   • Add another headline block and enable Dynamic Data to pull in the Next Post Title.
   • Set this headline to an H3, adjust font size to 20px, and apply bottom margin 6px.
6. Adjust the parent container:
   • Set it to display: flex with column direction.
   • Justify content to center.

Step 4: Adding the Previous Post Button

The right container follows the same steps as the next post button but with opposite alignment:

1. Duplicate the Next Post Container and rename it Previous Post Container.
2. Move the featured image to the right and align the text to the right.
3. Update dynamic data:
   • Change Next Post Featured Image → Previous Post Featured Image.
   • Change Next Post Title → Previous Post Title.
   • Update "Next" text to "Previous".

Step 5: Display Rules & Testing the Navigation

1. Set the display location to Posts > All Posts.
2. Publish the element and check the front end.
3. Verify that previous and next buttons are working.

Now, as you navigate through blog posts, the Next & Previous buttons should appear at the bottom, linking to the correct posts.

Step 6: Hiding Empty Navigation Buttons

When reaching the first or last post, we don’t want an empty Next/Previous button appearing.

1. Select the container that holds the Next button.
2. Go to Block Settings → Visibility.
3. Enable “Remove Container if There is No Next Post”.
4. Repeat the same process for the Previous button.
5. Save changes and test.

Now, if there’s no previous or next post, that button will not be displayed.

Step 7: Optimizing for Mobile & Tablet

By default, the desktop layout doesn’t look great on mobile. Here’s how to fix it:

1. Open the Customizer → Mobile View.
2. Hide the featured images for mobile:
   • Select the container holding the image.
   • Go to Advanced > Hide on Mobile.
   • Repeat for the Previous Post image.
3. Adjust padding for text containers:
   • Set padding: 4px 8px 4px 8px.
   • Decrease title size to 15px and "Next/Previous" text to 10px.
4. Fix text alignment issues:
   • Ensure that text is aligned right on Previous Post and left on Next Post.
5. Test on different breakpoints:
   • Tablet layout looks good with featured images, so no need to hide them.

Final Thoughts

That’s how you can set up custom post navigation using GeneratePress & GenerateBlocks. The key points to remember:

• Proper container nesting is crucial to ensure visibility conditions work.
• Use dynamic background images instead of standard Image blocks for post thumbnails.
• Leverage built-in visibility settings to hide empty navigation buttons.
• Optimize for mobile by hiding images and adjusting text spacing.