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


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

Bio
Latest Posts

Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Latest posts by Sigit Prasetya Nugroho (see all)

Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
Create WordPress Slider Without Javascript - August 30, 2018
Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018

5 Comments

Add your comment

dimas 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 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 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 March 23, 2017 at 7:28 am
  ASAP 🙂
ALI April 11, 2017 at 6:23 am
Sir Please Guide me how to add this code in blogger plot form

seegatesite

Seegatesite.com – Programming Tutorial , Sharing , How and Learn Together

Sigit Prasetya Nugroho

Latest posts by Sigit Prasetya Nugroho (see all)

5 Comments

Leave a Comment Cancel reply