How to add Next & Previous Blog Post Links to a Single Post View, if your WP Theme does not Include Them!

What this Tutorial/Video is all about

In this tutorial I will show you how to investigate your site structure, to discover where you will need to place the code that will populate and create your ‘next post’ and ‘previous post’ links. To create these links, you will write some PHP and HTML and inject it into your theme’s PHP file as well as then style these links using your custom-made CSS classes. Finally, we then talk about how you can maintain your site (from a developer perspective) when your theme needs to run updates, which will overwrite your files and remove your code!

Firefox Debugger Tool

On a PC click on the F12 button on your toolbar as a shortcut to launch the browsers Debugger tool. The larger pain on the left-hand side is where the code that builds your sites page and infrastructure will live. On the righthand side is the properties of any objects that your page incorporates.

An object will be things like buttons, headers, HTML DIV tags and so on. All these things and more can have unique properties, such as their size, shape, interactivity and you can investigate what the settings are by selecting areas of your page the right-hand pane will then display the properties of the selected object.

WordPress 2019/Theme’s Structure and the Editor

To save developers re-inventing the wheel, they write code in different files, when these files are included into a template PHP page, each included file will populate the page with its own content.

If you visit your WordPress Admin panel, click on Appearance > Editor from the left menu, you will find all of your sites front-end files. (These are the files we unzipped and installed on our hosting in Tutorial #2.

Inside of the editor you can “tweak” such files code.

BE WARNED.… you are playing with the site’s infrastructure. If you mess something up in the editor, your site could be damaged. Always take a copy of your site/back up before editing ANYTHING.

WordPress Codex

Think of the Codex as the bible for all thing WordPress. You will find documentation, code examples explained on various functions, features, variables and all else that makes WordPress what it is.

To view the functions that WordPress 2019 already provides for working with the next post and previous post links, visit the link above.

Commenting Your Own Code

If at any time you need to make comments in the code to remind yourself what you have edited, before the code and afterwards insert comments.

I always start these with my name so that if ever I come back to this page in the future, I can search the page for the text that matches my name.

WordPress sites are built using PHP but browsers read in HTML first. So you will find that all WordPress files are a combination of both languages. You therefore need to look carefully where you are placing the comment code and see if the browser will interpret that code as HTML or PHP. Adding comments in either is similar in principle, but the syntax is different.

Parent and Child Theme Hierarchy

Remember, any code added to your theme’s files may well be lost when the theme designers roll-out an update. Such updates often overwrite existing files with newer versions of that same file. (For example, when the newer file include more functionality of bug fixes). Any custom code you write may well be lost as the new file replaces the current one.

Therefore, it’s handy to create a Website Management and Maintenance document for yourself. Somewhere, where you can leave detailed notes to yourself about what you did and why with clear instructions for you or another developer to then follow should the need arise to re-insert any code lost in an update.

Ideally, if you end up making lots of custom tweaks to your code, it is better to practice to make a child version of the website file and theme. When a browser loads, it reads the original (parent file) first and then overrides that with any settings listed in the child file.

Although we do not cover how to create child files/themes in this tutorial, it is handy to know how they operate, so that you are aware of them. And so that you understand that should the theme developers roll-out an update, these updates only affect the (parent) files, leaving your child file untouched and freely available for the browser to use and overwrite the parent instructions.

In this tutorial I inserted the HTML and PHP code in the (parent) file as no child theme exists. However, as it’s very common for designers to tweak stylesheets, most themes these day’s provide a “Additional CSS” tool within their theme customizer pages. If you place your CSS code here. It won’t be overwritten when the theme creators roll-out an update that effects your stylesheet.css file.

Leave a Reply