Add related posts in WordPress without using the Plugin



    How to add related posts in WordPress without using the Plugin_In this article, we will discuss related posts in WordPress. How to display them without a plugin and why related posts are important. Many people use it, but some of them only use them because others do the same. They don't know the reason for it, why it helps and other important things.

    Why are related posts important for a website or blog?


    Related posts, showing contact related to the specific article you are viewing. And by using related posts to display similar content, visitors are likely to be interested in another article that has been displayed there. This means they stay more on your web, this reduces bounce rate. (You can use Google Analytics to check bounce rate.)

    How to add related posts in WordPress without plugins


    If you want to add functionality to your WordPress website, you need to have some coding skills. We give you instructions on how to do each step. But you need to know how to access your theme file. (The default path is: www.example.com/wp-contant/theme/mytheme).

    After you find your topic directory, search for the.php function and make a backup of it. Then open it up. This is the file containing all custom functions used by your theme. The first thing we need to do is create our function. So scroll down to the bottom of the file and add the following:

    1. function my_related_posts () {

    2. }
    This is the function that will display the content related to each post when someone views it. Later, we need to add some arguments. The arguments are used to let the function know what we want to be the same in the relevant article and in the current post. To do this, we add a variable called $ arg. In this variable, we store two things. The first is how many posts we want to display and the second is the conditions for the posts to be displayed. Add these variables in the function:

    1. $ args = array (

    2. ‘Posts_per_page’ => 5,

    3. ‘Post_in’ => get_the_tag_list ()

    4. );
    The next step is to create another variable, called $ the_query. (Refer to class / WP Query) This variable is used by WordPress to display posts. We use the following code to add our arguments to it:

    • $ the_query = new WP_Query ($ args);
    Now what we need to do is actually display the posts. To do this, we use a while loop that looks like the following:

    1. echo ‘

    2. ‘;

    3. while ($ the_query-> have_posts ()): $ the_query-> the_post ();

    4. ?>

    5. < ?php the_title(); ?>


    6. endwhile;

    7. echo ‘

    8. ‘;
    The code above will display each related post as an anchor (link). A good step is to reset the query. Add the following code to do this:

    Your final code will look like this:

    1. function my_related_posts () {

    2. $ args = array (

    3. ‘Posts_per_page’ => 5,

    4. ‘Post_in’ => the_tags ()

    5. );

    6. echo ‘

    7. ‘;

    8. while ($ the_query-> have_posts ()): $ the_query-> the_post ();

    9. ?>

    10. < ?php the_title(); ?>


    11. endwhile;

    12. echo ‘

    13. ‘;

    14. wp_reset_postdata ();

    15. }
    Use the following code to display the posts you want:

    If you are using the Genesis Framework, use the following code:

    • add_action (‘genesis_after_content’, ‘my_related_posts’);

    Add some styles to the list


    The code above will only display a simple list. But it's not very nice, is it? So why don't we add some style to it. Like a thumbnail or data when an article is written, or what category it belongs to. To do this, we need to add some additional code to our code.

    To display Related Posts before the list, add the following code to the echo ‘
      ’;


    1. echo ‘


    2. Related Posts

    3. ‘;
    So your code would look like this:

    1. while ($ the_query -> have_posts ()): $ the_query -> the_post ();

    2. ?>

    3. < ? php if ( has_post_thumbnail ( ) ) { ?>


    4. < ? php the_post_thumbnail ( ) ; ?>

    5. < ? php } ?>

    6. < ? php the_title ( ) ; ?>



    7. endwhile;

    Fashion screen


    If you want to display a thumbnail post with the title below it close together, like on the image, use the code below:

    Function code:

    • function ll_related_posts () {

    • $ args = array (

    • ‘Posts_per_page’ => 5,

    • ‘Post_in’ => get_the_tag_list (),

    • );

    • $ the_query = new WP_Query ($ args);

    • echo ‘


    • ‘;

    • echo ‘

    • Related Posts

    • ‘;

    • while ($ the_query-> have_posts ()): $ the_query-> the_post ();

    • ?>


    • < ?php if ( has_post_thumbnail() ) { ?>

    • < ?php the_post_thumbnail( ‘related-post’ ); ?>

    • < ?php } else { ?>


    • < ?php } ?>

    • < ?php the_title(); ?>



    • endwhile;

    • echo ‘


    • ‘;

    • wp_reset_postdata ();

    • }

    CSS


    • function ll_related_posts () {

    • $ args = array (

    • ‘Posts_per_page’ => 5,

    • ‘Post_in’ => get_the_tag_list (),

    • );

    • $ the_query = new WP_Query ($ args);

    • echo ‘


    • ‘;

    • echo ‘

    • Related Posts

    • ‘;

    • while ($ the_query-> have_posts ()): $ the_query-> the_post ();

    • ?>


    • < ?php if ( has_post_thumbnail() ) { ?>

    • < ?php the_post_thumbnail( ‘related-post’ ); ?>

    • < ?php } else { ?>


    • < ?php } ?>

    • < ?php the_title(); ?>



    • endwhile;

    • echo ‘


    • ‘;

    • wp_reset_postdata ();

    • }

    Conclusion


    In this article, we showed you how to display related posts in WordPress without a plugin and why it's important. If you have any questions, please ask in the comments section below.

    No comments