If you like this article, please share it with your friends and contacts on Google Plus, Facebook and Twitter using following buttons so that they canalso enjoy the article:

With simple Two steps add related post box under every post in wordpresss. With out any plugin add related for box in your own style.

Goto Appearance Editor single.php. Add this code Just before <?php comments_template(); ?> or any such codes calling comments

<div class=”relatedpost”>
<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
‘tag__in’ => $tag_ids,
‘post__not_in’ => array($post->ID),
‘showposts’=>10, // Number of related posts that will be shown.
‘caller_get_posts’=>1
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo ‘<h3 class=”title”>Related Posts</h3><p>&nbsp;</p><ul>’;
while ($my_query->have_posts()) {
$my_query->the_post();
?>
<li><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>
<?php
}
echo ‘</ul>’;
}
}
?>
</div>

Goto Appearance Editor style.css. Add this code at the bottom of the page. Upload the Tick image to media and get link and change it on the css code

Save Arrow.png and upload to you site and change that link in css code

” Note:- Want change width and colour of box in css accourding to your theme”

 width:670px;
 margin: 20px 0px 20px 0px;
 height:100%;
 color:#504945;
 font: 13px tahoma, century gothic,Arial,verdana, sans-serif;
 background:#ffffff;
 border:1px solid #ccc;
 padding: 0px 0px 10px 0px;
 }
 .relatedpost  h3{
 padding:5px 5px 5px 5px;
 margin:3px 0px 0px 3px;
 font-size:18px;
 font-weight:normal;
 color:brown;
 font-family: 'Ubuntu', arial, serif;
 overflow:hidden;
 color:#252525;
 }
 .relatedpost ul{
list-style-image: url(images/arrow.png);   /*  change image location as you upload  */
margin-top: -10px;
 padding:0px 0px;
 }
 .relatedpost ul li{
 margin-left: 30px;
 padding-bottom:7px;
 line-height:24px;
 font: 12px  Tahoma,Arial,verdana, sans-serif;
 font-weight:none;
 }
 .relatedpost ul li a:link, .related ul li a:visited{
 color:#222;
 }
 .relatedpost ul li a:hover{
 }

Post From !

CMS, WordPress

Get free daily email updates!

Follow us!

Leave a Reply