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
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. 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
– WordPress latest post query_posts
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
Mas biar langsung otomatis muncul tanpa masukin shotcode gmna ?
biasanyakan harus pakai kode php yg dimasukin ke bagian single.php mas
tolong bantuannya mas
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.
Very Good information sir Thank you, sir it is possible in blogger platform please guide me how to implement in blogger..
ASAP 🙂
Sir Please Guide me how to add this code in blogger plot form
How to do this for blogspot blogger. Please make a tutorial on this also.
here we go How To Insert Ads In The Middle Post Blogspot Blogger