blog

life, design, divi tutorials

How To Style Jetpack Related Posts When You Use Divi

Divi, The Archives

The other day I really wanted a way to keep my readers flowing through my blog posts when they landed on my website. I have been using Divi for almost a year now and I would never go back but there are some things that are new to me because Divi is set up slightly different than the other themes I’ve used in the past.

I went ahead and installed the Jetpack plugin for WordPress so that I could use the related posts function that it offers. However, it didn’t look so pretty out of the box so let’s dive in and I will show exactly what I did…

Step 1: Install + Activate Jetpack

The very first step is to install Jetpack and then activate the “Related Posts” feature within the plugin.

Step 2: Edit the Funtions.php File

The first thing I noticed I wanted to do was to change how many “related posts” were showing up under each post as well change the image size that was below each of my posts. To do this you will need to edit your functions.php file. This was extremely easy for me since I am using a custom Divi child theme for my website and I highly recommend everyone doing but we will chat more about child themes later. Head over to Appearance > Editor > and then select functions.php

You will want to add these two lines of code to this file.

Step 3: Style The Jetpack Images

Now that you’ve added these two lines of code it’s time to make it look pretty. The standard out of the box styling wasn’t suiting me so I went ahead and made a few minor changes which can be done using the code below. This removed the border made it a little prettier and made the images align in the center of the screen and not span the full width of the screen.

Now you should have much better looking Jetpack Related posts in your Divi Theme feel free to let me know if you have any questions down in the comments.

Call Now