• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

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

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Wordpress » Insert Related Post In The Middle Of Article With Shortcode

Insert Related Post In The Middle Of Article With Shortcode

By Sigit Prasetya Nugroho ∙ September 10, 2015 ∙ Wordpress ∙ 6 Comments

Share : TwitterFacebookTelegramWhatsapp

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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");

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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

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

– WordPress latest post query_posts

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

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

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 🙂

Another WordPress Related Post :

  • How To Create The Fastest Social Share Button WordPress Without Plugin
  • Create WordPress Slider Without Javascript
  • The Point Responsive WordPress Theme For Blogging
  • The Doctors Free WordPress Responsive Theme For Medical
  • Develop Your Site With Start Blogging The Responsive WordPress Theme
  • Zerius Theme The Free WordPress Responsive Theme

Avatar for Sigit Prasetya Nugroho

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

Reader Interactions

Comments

  1. Avatar for dimasdimas 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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit 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.

      Reply
  2. Avatar for AliAli 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..

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      March 23, 2017 at 7:28 am

      ASAP 🙂

      Reply
  3. Avatar for ALIALI says

    April 11, 2017 at 6:23 am

    Sir Please Guide me how to add this code in blogger plot form

    Reply
  4. Avatar for Sumit Kumar GogawatSumit Kumar Gogawat says

    January 23, 2019 at 5:40 am

    How to do this for blogspot blogger. Please make a tutorial on this also.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      January 26, 2019 at 3:28 pm

      here we go How To Insert Ads In The Middle Post Blogspot Blogger

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

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



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com