Insert Related Post In The Middle Of Article With Shortcode

Programming tutorial – seegatesite will share about how to insert related post in the middle of article with shortcode. Plugin related post in middle article will created as wordpress shortcode, and then we itcan put the related post widget according to our will, either above post, below post or in the middle of post. The related post in the middle of article widget as shown below

how to insert related post in the middle of article wordpress — Related Post In The Middle Of Article

The advantages put related post plugin in the middle of article are

– Lowering bounce rate
– Further increase visitor’s interest to open another page of our site
– add the internal link
– Create more interesting blog design.

Table of Contents

1 Here are the steps to create plugin related post in the middle of article
- 1.1 Thus my article on how to insert related post in the middle of article with shortcode, may be useful 🙂

Here are the steps to create plugin related post in the middle of article

1. Add code on the function.php in the theme

– Please add the code below

Function sgt_middle_related_post_shortcode($atts){

Extract( shortcode_atts( 
	array("title"=>"Related Posts","count"=>"5","float"=>"left"),$atts))	;

$tags = wp_get_post_tags(get_the_ID());
	if ($tags) {
    $first_tag = $tags[0]->term_taxonomy_id;
	query_posts( array(
    	'tag__in' => array($first_tag),
    	'post__not_in' => array(get_the_ID()),
            'showposts' => 4, 
            'ignore_sticky_posts' => 1 
            ));
		if (have_posts()) : 
			global $post;
			$html  = '


<div id="container-related-post-middle" style="float:'.$float.'">';
				$html .= '


<h3>'.$title.'</h3>



';
				$html .= '


<div id="content-related-post-inner">';
					$html .= '


<ul>';
					while (have_posts()) : 
						the_post(); 
						$html .= '


<li>';	
							$html .= '<a href="'; $html .= get_permalink($post->ID);
							$html .= '">';
							$html .= get_the_title($post->ID); 
							$html .= '</a></li>



';
					endwhile; 
					$html .= '</ul>



';
				$html .= '</div>



';
			$html .= '</div>



';
		else :
			$html='';
		endif;
	}else
	{
		 $html='';
	}
		return $html;
};
add_shortcode("middle_related_post", "sgt_middle_related_post_shortcode");

Function sgt_middle_related_post_shortcode($atts){

Extract( shortcode_atts(

array("title"=>"Related Posts","count"=>"5","float"=>"left"),$atts)) ;

$tags = wp_get_post_tags(get_the_ID());

if ($tags) {

$first_tag = $tags[0]->term_taxonomy_id;

query_posts( array(

'tag__in' => array($first_tag),

'post__not_in' => array(get_the_ID()),

'showposts' => 4,

'ignore_sticky_posts' => 1

));

if (have_posts()) :

global $post;

$html = '

<div id="container-related-post-middle" style="float:'.$float.'">';

$html .= '

<h3>'.$title.'</h3>

$html .= '

<div id="content-related-post-inner">';

$html .= '

<ul>';

while (have_posts()) :

the_post();

$html .= '

<li>';

$html .= '<a href="'; $html .= get_permalink($post->ID);

$html .= '">';

$html .= get_the_title($post->ID);

$html .= '</a></li>

endwhile;

$html .= '</ul>

$html .= '</div>

else :

$html='';

endif;

}else

{

$html='';

}

return $html;

};

add_shortcode("middle_related_post", "sgt_middle_related_post_shortcode");

2. Then, add code at the style.css on your theme as below

#container-related-post-middle{
	max-width:200px;
	border:1px solid #DDD;
	font-size:12px;
	margin:5px 15px 5px 5px;
}
#container-related-post-middle h3{
	margin-top:0px;
	padding:5px;
	text-align:center;
	font-size:16px;
	color:#ffffff;
	background-color:#000;
}
#container-related-post-middle #content-related-post-inner{
padding:5px;	
}
#container-related-post-middle ul{
	padding-left:10px;
}
#container-related-post-middle  ul li{
	white-space: wrap;
}

#container-related-post-middle{

max-width:200px;

border:1px solid #DDD;

font-size:12px;

margin:5px 15px 5px 5px;

}

#container-related-post-middle h3{

margin-top:0px;

padding:5px;

text-align:center;

font-size:16px;

color:#ffffff;

background-color:#000;

}

#container-related-post-middle #content-related-post-inner{

padding:5px;

}

#container-related-post-middle ul{

padding-left:10px;

}

#container-related-post-middle ul li{

white-space: wrap;

}

Explanation :

You can change related post query_posts with another query like example below

– WordPress popular post query_posts

query_posts( array( 'posts_per_page' => 5, 'orderby' => 'comment_count' ) );
1
query_posts( array( 'posts_per_page' => 5, 'orderby' => 'comment_count' ) );

– WordPress latest post query_posts

query_posts( array( 'posts_per_page' => 5, 'orderby' => 'meta_value_num', 'order' => 'DESC' ) );
1
query_posts( array( 'posts_per_page' => 5, 'orderby' => 'meta_value_num', 'order' => 'DESC' ) );

We’ve finished creating a shortcode to display related post in wordpress article , for use that, please follow the instruction below

[middle_related_post title="Post title" count="6"]

1	[middle_related_post title="Post title" count="6"]

Put that code on your article. If you don’t want to edit the function.php and style.css code on your theme, you can use or download my plugin below :).

Thus my article on how to insert related post in the middle of article with shortcode, may be useful 🙂

Comments

dimas says
January 6, 2017 at 1:43 am
Mas biar langsung otomatis muncul tanpa masukin shotcode gmna ?
biasanyakan harus pakai kode php yg dimasukin ke bagian single.php mas
tolong bantuannya mas
- Sigit Prasetya Nugroho says
  January 6, 2017 at 2:29 pm
  Bisa dikombinasikan dengan artikel ini mas https://seegatesite.com/how-to-create-a-wordpress-plugin-for-placing-ad-code-on-the-post/
  Maaf belum sempet mencoba.
Ali says
March 9, 2017 at 4:54 am
Very Good information sir Thank you, sir it is possible in blogger platform please guide me how to implement in blogger..
- Sigit Prasetya Nugroho says
  March 23, 2017 at 7:28 am
  ASAP 🙂
ALI says
April 11, 2017 at 6:23 am
Sir Please Guide me how to add this code in blogger plot form
Sumit Kumar Gogawat says
January 23, 2019 at 5:40 am
How to do this for blogspot blogger. Please make a tutorial on this also.
- Sigit Prasetya Nugroho says
  January 26, 2019 at 3:28 pm
  here we go How To Insert Ads In The Middle Post Blogspot Blogger

About Sigit Prasetya Nugroho

Comments

Leave a Reply Cancel reply

Here are the steps to create plugin related post in the middle of article

Thus my article on how to insert related post in the middle of article with shortcode, may be useful 🙂

About Sigit Prasetya Nugroho

Reader Interactions

Comments

Leave a Reply Cancel reply