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 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.

insert inline related posts in WordPress

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

  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 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.
Linking Inline Related Posts in WordPress
  • 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.
Inline Related Posts in WordPress

The result looks like this

Result for related post

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.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

8 thoughts on “How to Insert Inline Related Posts in WordPress?”

  1. 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?

    Reply
    • 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

      Reply
  2. 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?

    Reply

Leave a Comment