4.5 879

Increase Pageview With Using Inline Related Posts

Posted by zerochan on May 19, 2018

Loading the translation ...

In the previous tutorial I discussed a simple way to make a back to top simple, this time I will discuss how to increase the number of pageview per visitor by using Inline Related Posts without plugin.

Inline Related Posts is a relevant article link located in the middle of a blog post that is proven to increase the number of pageviews on the website, buddy may often or have seen Inline Related Posts when buddy visited a particular website, usually found on news websites or tutorials. both domestic and abroad, for example the website Jalantikus, Liputan6, BBC, The Wall Street Journal and other websites.
Pictures taken from jalantikus website

Why Must Install Inline Related Posts In Your WordPress?

Actually Inline Related Posts is no different with related post in general which is usually often installed at the end of the blog post. but sometimes there are some visitors do not have time to read the contents of the article until it runs out which causing related post that is at the end of the post is not seen or clicked by visitors.

Then Inline Related Posts is the right choice. by displaying related posts amid certain articles can allow your readers to see more good content on your site that may be relevant to them.

And that’s the conclusion why you should put inline related post into your wordpress theme.

Need to know this tutorial can only be used on the website platform wordpress, for buddy who use blogger do not worry because the next tutorial I will discuss inline related post cool for blogger.

How to Install Inline Related Posts without Plugin on WordPress

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Editor
3. Add the css below right in the last line style.css

/* Inline Related Posts @yuukithemes */
.inline-relatedpost{padding:0 0 10px}
.inline-relatedpost p{display:inline-block;margin:0 auto;font-weight:700;text-transform:uppercase;font-size:15px}
.inline-relatedpost ul{margin:0;padding:5px 20px 0}
.inline-relatedpost li{border-bottom:1px dashed #ddd;padding:0 0 5px;margin:0 0 5px}
.inline-relatedpost a:hover{text-decoration:underline}
4. Click Update File
5. Then Select function.php
6. Add the code below right at the end of the line function.php

/* Inline Related Posts */
add_filter('the_content', 'wpse_inline_relatedpost');
function wpse_inline_relatedpost($content){
if (!is_single()) return $content;
$paragraphAfter = 3; /* Enter number of paragraphs to display inline related post. */
$content = explode("</p>", $content);
$new_content = '';
for ($i = 0; $i < count($content); $i++) {
if ($i == $paragraphAfter) {
$new_content.= '<div class="inline-relatedpost"><p>Read Also :</p><ul>';
$ykmr = new WP_Query(
'post_type' => array('post',),
'orderby' => 'rand',
'posts_per_page' => 3,
if($ykmr->have_posts()) {
while($ykmr->have_posts()) : $ykmr->the_post();
$new_content.= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
$new_content.= '</ul></div>';
$new_content.= $content[$i] . "</p>";
return $new_content;
Name Explanation
$paragraphAfter Determining the position of inline related posts that will appear in the paragraph
post_type Post type that will appear
posts_per_page Number of articles that will appear

7. Click Update File

Please try, then see the results on one of the posts that are on your website.
I also provide some interesting design options below.

Another Best Designs For Inline Related Posts


/* Inline Related Post @yuukithemes */
.inline-relatedpost{position:relative;padding:15px 0;margin:15px auto;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.inline-relatedpost p{background:#fff;padding:0 10px;margin:-10px auto 0;font-size:15px;font-weight:700;text-transform:uppercase;position:absolute;left:0;right:0;top:0;width:110px;text-align:center;white-space:nowrap}
.inline-relatedpost ul{margin:0;padding:10px 0 0 40px}
.inline-relatedpost li{line-height:26px;padding-bottom:3px;font-size:14px;}
.inline-relatedpost a {color: #068bf1;}
.inline-relatedpost a:hover{text-decoration:underline}


/* Inline Related Post @yuukithemes */
.inline-relatedpost{padding:0;margin:15px auto}
.inline-relatedpost p{color:#131516;text-transform:uppercase;font-weight:700;margin-bottom:10px;font-size:14px}
.inline-relatedpost ul{padding:0 0 0 20px;margin:0;list-style-type:square}
.inline-relatedpost li{line-height:26px}
.inline-relatedpost a{font-weight:700;font-size:14px;color:#394A51}
.inline-relatedpost a:hover{color:#448EF6}

Simple with Border

/* Inline Related Post @yuukithemes */
.inline-relatedpost{padding:20px;margin:15px auto;}
.inline-relatedpost p{color:#131516;text-transform:uppercase;font-weight:700;margin-bottom:10px;font-size:14px}
.inline-relatedpost ul{padding:0;margin:0;list-style-type:none}
.inline-relatedpost li{line-height:26px;border-bottom:1px solid #d8d8d8;padding-bottom:5px;margin-bottom:5px}
.inline-relatedpost li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.inline-relatedpost a{font-weight:700;font-size:14px;color:#394A51}
.inline-relatedpost a:hover{color:#448EF6}

Simple Background

/* Inline Related Post @yuukithemes */
.inline-relatedpost{padding:20px;margin:15px auto;background:#F2F2F0}
.inline-relatedpost p{font-size:14px;color:#131516;text-transform:uppercase;font-weight:700;margin:5px 0 10px;}
.inline-relatedpost ul{margin:0;padding:0 0 0 20px;list-style-type:square}
.inline-relatedpost li{line-height:26px;}
.inline-relatedpost a{font-weight:700;font-size:14px;color:#0371dc}
.inline-relatedpost a:hover{color:#448EF6}

Simple Background with Border

/* Inline Related Post @yuukithemes */
.inline-relatedpost{padding:20px;margin:15px auto;background:#F6F6F6}
.inline-relatedpost p{color:#0074E4;text-transform:uppercase;font-weight:700;margin-bottom:10px;font-size:15px}
.inline-relatedpost ul{padding:0 0 0 20px;margin:0;list-style-type:square}
.inline-relatedpost li{line-height:26px;border-bottom:1px dashed #ccc7c7;padding-bottom:5px;margin-bottom:5px}
.inline-relatedpost li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.inline-relatedpost a{font-weight:700;font-size:14px;color:#394A51}
.inline-relatedpost a:hover{color:#448EF6}

Boxed Border

/* Inline Related Post @yuukithemes */
.inline-relatedpost{padding:20px;margin:15px auto;border: 1px solid #ddd;position: relative;}
.inline-relatedpost p{position:absolute;font-size:14px;color:#131516;text-transform:uppercase;font-weight:700;margin-top:-40px;margin-bottom:5px;background:#fff;display:inline-block;padding:5px 10px;border:1px solid #ddd;letter-spacing:.3px;line-height:22px}
.inline-relatedpost ul{padding:10px 0 0 20px;margin:0;list-style-type: square;}
.inline-relatedpost li{line-height: 26px;}
.inline-relatedpost a{font-weight:700;font-size:14px;color:#0371dc}
.inline-relatedpost a:hover{color:#448EF6}

Single Text

/* Inline Related Post @yuukithemes */
.inline-relatedpost{padding:10px;background:#f4f9ff;border-left:4px solid #448EF6;font-size:14px}
.inline-relatedpost p{margin:0 7px 0 0;float:left;color:#2C3E50;font-weight:700;text-transform:uppercase}
.inline-relatedpost ul{padding:0;margin:0;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inline-relatedpost li{display:inline-block}
.inline-relatedpost li:nth-child(2):before,.inline-relatedpost li:nth-child(2):after{content:",";padding-right:5px;font-weight:700;color:#2980B9;margin-left:-3px}
.inline-relatedpost a{font-weight:700;color:#2980B9}
.inline-relatedpost a:hover{color:#3b90e6;text-decoration:underline}

Then i apologize if there are any less obvious words in this tutorial, please ask. I will reply as soon as possible. thanks.

I made this article not alone, I also glanced at some references to add my insight in making this article.
– https://translate.google.com
– https://wordpress.stackexchange.com/questions/58605/insert-ad-code-in-the-middle-of-a-post

Related Post


Waiting Load Disqus Comments ...