How to Insert Inline Related Posts in WordPress?

In this article, we are going to guide you to insert inline related posts in WordPress without any plugins.

Moreover, we are not going to install any inline-related post plugins. The method here is using only CSS and the block section available in Gutenberg.

You can also use this method if you are using Classic Editor which is almost similar to the block editor.

What are Inline Related Posts?

Inline-related posts are those blog posts that can be linked with internal posts of your blog anywhere between the content. It is basically used to increase user engagement on your website.

Advantages of Inline Related Post

An advantage of adding inline-related posts within your content can boost user engagement. That is, the helps to keep a reader from having to click off your website. It also allows your visitors to have more time on your site reading your content.

If your visitors stay longer on your website then it helps to increase the dwell time, and also helps to increase sales.

So the ultimate purpose of adding inline-related posts into your posts is that you are helping yourself in increasing traffic that directly helps in converting your site goal.

Ways to Insert Inline Related Posts in WordPress

1. Using inline-related posts plugin.
2. Using custom code in functions.php in Child Theme.
3. Without using any plugin (CSS Techniques).

In this guide we are not using any inline-related posts plugin rather we’ll try to build using custom CSS Code.

Insert Inline Related Posts in WordPress without plugin

If you are looking for a guide to insert inline-related posts without a plugin in WordPress then it’s a very simple and easy task. Once you set the CSS code, you simply have to use the CSS Class to get the look and feel.

I am personally using this method in my blog since within a few seconds I can add inline similar posts within my content. Most of my regular visitors are asking me to create a tutorial on it. so here it is…

Step 1: Adding CSS

• Go to Appearance > Customize > Additional CSS.
• Copy and Paste the following CSS code.
• Now, Hit Publish button.
• Here remember the CSS Class name related, we are going to use this class later.

.related {
    font-weight: 900;
    box-shadow: 0 4px 15px rgba(0,0,0,.1);
    color: #16a085;
    padding: 15px;
    background-color: #FDC68A;
    border-left: .75rem solid #F26C4F;;
    font-size: 20px;
}

Note: Change the CSS code according to your blog requirements.

Step 2: Adding inline related post

• Go to your post where you can add inline-related posts.
• Now Add related posts like in the image below.

• Now, this part is very important, Just select the related post block then go to the block menu > Advanced, and in the Additional CSS class(es) section just enter your class id related.

The result looks like this

Display Related Posts After Content

If you are a GeneratePress Premium user then I have shared a cool blog post to display related posts in GeneratePress Theme. You can check that guide too if you are using other themes too.

It is easier to add related posts in those WordPress Theme that supports hook elements i.e. in popular themes like GeneratePress, AstraWP, Kadence, OceanWP, etc. you can try the above tutorial.

At the End

Besides this, you can use the plugin method but I feel that it is one of the easiest methods to insert inline-related posts in WordPress. so, why not give it a try and avoid using one less plugin and make your site bloat-free?

If you have any queries regarding this post then feel free to drop a comment. I will try to reply ASAP.