Divi – Swapping Page Navigation

Aug 14, 2020 | , , , , , | Programming | 0 comments

The Divi WordPress Theme offers a lot of great features for building high-quality professional websites. But, as you probably know, every tool comes with its quirks and one of Divi’s is the post navigation layout. In this post, we will take a look at a very simple way of swapping the post navigation to a more intuitive experience for your blog readers.

Overview

The issue that we will address in this post is very simple but also very important when it comes to the usability of your website. The issue is the order in which Divi lays out the navigation links for blog posts. In my opinion, it is reversed from what it should be. The Divi Default is to have the next oldest post linked on the left-hand side and the next newest post linked on the right-hand side. Other then the most recent and oldest blog post, the issue isn’t quite as obvious, particularly if you use the name of the post rather then something like next, previous as your navigation link names. It makes much more sense to me that if you want to progress from the more recent to less recent posts that the link on the right side would move you in that direction and the link on the left side would progress you from an older post to more recent posts.

Screenshots of the Issue

Here is a screenshot from my most recent blog post about the Decorator Design Pattern. As you can see, there is a link at the bottom on the left-hand side that says “WordPress GDPR Compliance – Data Requests“. This layout suggests to me that there is a more recent post to view but in fact, the Data Requests post is the previously published post to the Decorator Pattern post.

This next Screenshot shows the navigation for the next post in sequence, the “WordPress GDPR Compliance – Data Request” post. On the left, we see the “12 Factor Apps in Java – Introduction” navigation link and on the right, we see the “Decorator – Wrapping Functionality” navigation link. These don’t seem right to me as the Decorator post is the more recent post which we’ve just come from and the 12 Factor post is older than the WordPress GDPR post. In my opinion, these should be swapped so that the navigation for the Decorator post is on the left and the navigation for the 12-factor post is on the right.

This final screenshot shows the navigation for the oldest post in my blog. The “Quality, Time, Cost” post was the second post in my blog and so is more recent but it is on the right-hand side of the page suggesting that it is an older post. Again this does not seem right, I prefer that it be on the left side of the page to more clearly indicate that it is a newer post.

The Solution

The solution to the problem is extremely simple. All you need to do is add some CSS to the theme that will swap these so they are presented in the correct order. You can add this CSS in your style.css file in your Divi child theme or you can add it in the Custom CSS section of the Divi Theme Options page in the WordPress Admin. The CSS that you should add to make this change is as follows:

.et_pb_posts_nav .nav-previous { float: right; }
.et_pb_posts_nav .nav-next { float: left; }
.et_pb_posts_nav .meta-nav { display: none; }
.et_pb_posts_nav .nav-next a:before { content: '← '; }
.et_pb_posts_nav .nav-previous a:after { content: ' →'; }

The Result

Here we see that the post navigation for our posts has now been swapped to the desired order showing the next oldest post on the right and the next newest post on the left.

Conslusion

As you can see, the solution is quite simple and the result is a much improved user experience. If you need a website for your business or are working on making your website GDPR compliant, we’d love to help you. Please don’t hesitate to request a free quote to speak with us further about your IT needs!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *