add-related-blog-posts-to-page

Add related blog posts to page template with category selector.

Customize your page templates to include related blog posts that can be adjusted by specific categories.

Having related blog posts at the bottom of a single blog post is pretty common practice. You can set the related blog posts up by having them relate to to either tags or categories, so if your blog post is about dogs the related blog posts will all be either tagged or categorized as dogs.

A client of mine wanted to have related blog posts on the bottom of every ‘page’. Well the issue is pages are not categorized by default in WordPress. Since the pages are not categorized in WordPress, I decided to use Advanced Custom Fields and create a way to select whatever category you want when you edit a page.

So here’s how it’s done:

Step 1: Setup the field groups in Advanced Custom Fields.

First thing is first, make sure you have the Advanced Custom Fields plugin.

Here are the settings I created in Advanced Custom Fields:

Image of new field group settings in advanced custom fields to add related blog posts
  1. Add the field label, I chose the ‘Category’ but feel free to name it whatever you want.
  2. Add the field name, this is what you will use within your page template.
  3. For field type you want to select Taxonomy.
  4. I chose to set this to required because if nothing is selected it will show random blog posts from random categories.
  5. I chose Radio Buttons for field type which restricts the user to select only one category. You could select one of the options under ‘Multiple Values’, if you want the user to select multiple categories. Image of multiple options in advanced custom fields
  6. Lastly, I chose to only allow this to work on my specific page template ‘Inner Pages With Blog Posts’. This will be up to you on what pages you want to display your field group. I chose to create a new inner page template that displays related blog posts because it needed to only be on the service pages.
  7. Save your settings and then we will move onto setting up your template.

Here’s what we created will look like on the edit page when you have the correct template selected.

Image of the advanced custom fields widget box on the page editor

Step 2: Setup your template:

I already had a inner page template setup that was used on nearly all of my pages but only the services pages required the related blog posts, therefore I created a new template. I simply duplicated my inner page template and gave it a new name. I went from page-inner.php to page-inner-wblog.php. My naming convention is usually pretty straight forward but I tend to always second guess myself. Feel free to name your new template whatever you want.

Below is the code you will want to add to the bottom of your new page template. Your already existing template probably looks different than mine and uses a different framework. That’s okay you will just need to figure out where to put the code. I put mine right before the closing container div for my left column.

The code is pretty common and straight forward code to get related blog posts. The difference in the code is the field we created in Advanced Custom Fields. As you can see, I defined the field as a variable ‘$term’ and within the $args array, instead of manually putting what category I want ’13’, ‘2’, etc.. I put the field we created. The variable $term will output the number associated with the category you chose.

Here’s the final outcome:

Image of the final outcome of our page template setup to add related blog posts

As you can see it grabbed 4 related blog posts to the category I chose when editing this specific page.

I did not include the CSS in this tutorial simply because you most likely have a different design but feel free to ask me for it in the comments if you would like it.