How to Reorder Previous and Next Post Navigation in WordPress GeneratePress Theme

Last Updated:

In WordPress, when using the GeneratePress theme, enabling Post Navigation in the Blog section will display Previous Post and Next Post links at the bottom of singls posts. The Previous Post literally refers to the older post, while the Next Post refers to the newer post. I find it more natural to switch the order of these Previous Post and Next Post links. For this reason, I used CSS to change the order of the Previous Post and Next Post items in the Post Navigation.

Setting Up Post Navigation in the GeneratePress Theme

In the free version of the GeneratePress theme, Post Navigation is displayed by default and there is no option to remove it. Premium version users can enable or disable the Display Post Navigation option by navigating to Appearance » Customize » Layout » Blog » Content Section » Single tab.

To hide Post Navigation in the free version of GP, add the following custom CSS code to Appearance » Customize » Additional CSS.

/* Hide Post Navigation in WordPress GeneratePress Theme */

.site-main .post-navigation {
    display: none;
}

Understanding basic CSS allows you to easily apply it to other themes as well.

Enabling Post Navigation to display Previous Post/Next Post links at the bottom of individual posts helps improve the usability and user engagement of your website. Additionally, it helps readers (visitors) easily follow multi-part posts or topic series by organizing content in a logical order. This structured navigation enhances internal linking and assists search engines in understanding the relationships between different pieces of content, which can be beneficial for SEO.

Displaying Previous Post/Next Post within the Same Category

You may want to consider limiting the Previous Post/Next Post items in Post Navigation to items within the same category. This way, similar content is presented at the bottom, increasing the likelihood of clicks.

For the GeneratePress theme, you can display items within the same category as Previous Post/Next Post by adding the code provided in the "Changing the output of nav-next & nav-previous" article to the functions file of your child theme.

add_filter( 'generate_category_post_navigation', '__return_true' );

Switch Previous and Next Post Order in GeneratePress Theme

In GeneratePress, the Post Navigation displays the Previous Post and Next Post as shown in the image above.

Personally, I find it more natural to have the Newer Post link on the left and the Older Post link on the right. This is because I am accustomed to seeing pagination at the bottom of post lists where lower numbers typically represent newer posts. As a result, the default Post Navigation in the GeneratePress theme feels counterintuitive to me.

Therefore, I changed the Post Navigation to display the Newer Post on the left and the Older Post on the right. While the GeneratePress forum post "Change the post navigation order…" provides code to switch the post navigation order, using that code only changes the HTML tags without altering the actual links.

To achieve this, I used CSS to switch the order of the Post Navigation links.

/* Reordering the Previous post and Next post in the Post Navigation of the WordPress GeneratePress theme */

.single #nav-below {
    display: flex;
    justify-content: space-between;

}

.single .nav-previous, .single .nav-next {
    display: flex;
    align-items: center;
    flex: 1;
}

.single .nav-previous {
    justify-content: flex-end;
    margin-left: 10px;
    order: 2;
}

.single .nav-next {
    justify-content: flex-start;
    margin-right: 10px;
    order: 1;
}

.single .post-navigation .gp-icon {
    display: none;
}

.single .nav-next .next::before, .single .nav-previous .prev::before {
    content: '';
		display: none;
}

.single .nav-previous::after {
    content: '》';
    margin-left: 10px;
}

.single .nav-next::before {
    content: '《';
    margin-right: 10px;
}




@media (max-width: 768px) {
    .single #nav-below {
        flex-direction: column;
        align-items: center;
    }



    .single .nav-previous {
        justify-content: flex-end;
        order: 2;
    }

    .single .nav-next {
        justify-content: flex-start;
        order: 1;
    }
}

When you add the custom code mentioned above, the order of the Post Navigation items changes as follows, and the layout style is slightly improved.

Please use CSS to appropriately modify the style.

The GeneratePress theme is simple, fast, and great for customization. A similar theme is the Astra theme. Although it is not as fast as GeneratePress, the Newspaper theme can be a good choice if you want to easily create a high-quality blog or news site.

💡More About GeneratePress

See Also...