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.

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


				$html .= '

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

					while (have_posts()) : 
						$html .= '

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

					$html .= '</ul>

				$html .= '</div>

			$html .= '</div>

		else :
		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

	border:1px solid #DDD;
	margin:5px 15px 5px 5px;
#container-related-post-middle h3{
#container-related-post-middle #content-related-post-inner{
#container-related-post-middle ul{
#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' ) );

– WordPress latest post query_posts

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"]

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

Related post in the middle of article download plugin

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

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. Mas biar langsung otomatis muncul tanpa masukin shotcode gmna ?
    biasanyakan harus pakai kode php yg dimasukin ke bagian single.php mas
    tolong bantuannya mas

  2. Very Good information sir Thank you, sir it is possible in blogger platform please guide me how to implement in blogger..

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: