In this article, we are going to guide you to insert inline related posts in WordPress without any plugin.
Moreover, we are not going to install any inline-related post WordPress plugin. 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 is 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 in 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, 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
- Using inline related posts plugin.
- Using custom code in functions.php in Child Theme.
- 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 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 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 to add inline related post.
- Now Add related post like as 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 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 the 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.
Hi Suraj, In WordPress 5.8 how to add recent posts widget in Generatepress theme. Previously there was a Recent Post widget but I can’t find it now. Could you help me, please?
Hi Pintu,
Search for Latest Posts blog, you can use it to display recent posts.
Thanks
Hi Suraj Katwal, thank you for this wonderful tutorial. I appreciate your effort.
Welcome Mate π
Hi suraj, Why on mobile device the code ist work, but in dekstop is ok
Hi Arya,
I am using the same code in my blog too, it is working perfectly fine here.
Please check the code and settings again and try, please.
Thanks
Hi Suraj Katwal!
I hope you’re doing well. Loading google fonts is a critical site speed issue and I didn’t found any working and valuable tutorial or video on how to make Google fonts as system fonts in typography in generatepress theme I mean how to load Google fonts directly from our server.
Please make a tutorial how to host any google fonts locally and how to use two google fonts combine?
Hi John,
Please check this tutorial to host google fonts locally.
Thanks