Wednesday, 27 September 2017

HOW TO MAKE RELATED POST WORDPRESS WITHOUT PLUGIN

By using WordPress a lot of advantages with the plugin. With the plugin you can create websites that you want, from plugins to improve SEO and plugins to build an online store (E-commerce).

But using too many plugins that can lead to your website wordpress to be slow and there may be some plugins that do not support the theme that you use so that your website does not work. And there are some popular plugins and of course often used by many bloggers, the plugin to bring up related post or related post under the post.
related post
related post
related post wordpress without plugin In this article I will give you a tutorial on how to add related post / post related thumbnails to your blog without plugin.

FOLLOWING TUTORIAL RELATED POST WITHOUT PLUGIN:

1. Thumbnails
Enable the thumbnail feature and enter the thumbnail size to your liking in wordpress by entering the following code in your theme function.php.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 100, true );
2. Add the following code in single.php file
 <div class="relatedposts">
<h3>Related posts</h3>
<?php
    $orig_post = $post;
    global $post;
    $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),
    'posts_per_page'=>4, // Jumlah related yang ditampilkan.
    'caller_get_posts'=>1
    );
   
    $my_query = new wp_query( $args );

    while( $my_query->have_posts() ) {
    $my_query->the_post();
    ?>
   
    <div class="relatedthumb">
        <a rel="external" href="<?php the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
        <?php the_title(); ?>
        </a>
    </div>
   
    <?php }
    }
    $post = $orig_post;
    wp_reset_query();
    ?>
</div>
* note: put the above code under the_content () and you can set the thumbnail size in the_post_thumbnail (array (150,100))


3. Add the following css code in your theme.css theme
/*thumbnail related */ .relatedposts {width: 100%; margin: 0 0 20px 0; float: left; font-size: 12px;} .relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; } .relatedthumb {margin: 0 1px 0 1px; float: left; } .relatedthumb img {margin: 0 0 3px 0; padding: 0;} .relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;} .relatedthumb a:hover {background-color: #ddd; color: #000;}

1 komentar

best artikel,, i need this artikel