FacebookTwitter

Show Latest Post In Each Category & Reduce Bounce Rate of your WP site

By on Oct 29, 2015 in WordPress

Share On GoogleShare On FacebookShare On Twitter

WordPress is certainly one of the most ingenious CMS platforms and it also helps to feature all the recent posts. But for those bloggers who need to move a step ahead  as your news website comprises of several categories such as business , politics, entertainment, editorial, sports and any other such and you wish to give your users recent post of each category not in the order of descending date.

In this blog we will discuss how to categorize your blog , enumerate recent post according to the categories, depict a featured image of the post, ensuring that one post does not get featured in more than one category and styling feature to add aesthetic value to it.

In order to practice this you first need to install your WordPress. Then you need to have some write ups and they need to divide into categories. Then a theme and also a code editor.

banner222

Set Up your WP Theme

We will commence with setting up our WordPress theme by creating a child theme for Foxy theme.

Firstly, you need to create a new folder for your child theme and you can name it as foxy-child1. Now you need to create a file named as styles inside this theme folder and fill in the following information such as Name, Description,  Author and URI is totally dependent on you.

Here’s my stylesheet:

/*

/*

Theme Name:     Foxy Child Theme

Theme URI:      http://www.elegantthemes.com/gallery/foxy/

Description:    Foxy Child Theme

Author:         Elegant Themes

Author URI:     http://www.elegantthemes.com

Template:       Foxy

Version:        1.0.0

*/

@import url(“../Foxy/style.css”);

/* =Theme customization starts here

*/

You need to pay special attention to  “Template:” as they are important ones and @import sections, which has the parent theme form the original CSS.  The next step is to make sure that the path which leads to the CSS file of your parent theme is correct, and that the “Template” parameter must identify the name of your parent theme appositely. You need to adjust the name according to the theme you are using. You need to make sure that everything must case sensitive. The name of the folder of our parent theme is “Foxy” which comprises of a F, and this is reflected in the @import URL.

Create your Index File

We need to create an index.php file within the child theme, in order to display all the latest blog post on the main page of the blog.

Making a vacant index.php File

The first step is to copy an index.php file for your theme , here we will copy it from Foxy theme and then edit the content and loop and will look like this:

<?php

/**

* The main template file.

*

?>

<?php get_header(); ?>

<div id=”main-content” class=”main-content”>

    <?php

            get_template_part( ‘featured-post’ );

    ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Identifying the Categories

In this step you need to categorize the articles in your blogs. You need to open up <div id=”content”> tag, and write the code snippet mentioned below:

<?php

    $categories = get_categories();

    foreach ( $categories as $category ) {

    }

?>

In the above code i have used  get_categories() function in order to make a list of categories in your blog. This function will by default fetch the list of categories in an alphabetical order and those in which there is not blog post won’t be displayed. This is it and you do not need any other line of code if you wish this much functionality.

Here i have used foreach ( $categories as $category ) {}, in order to make WordPress go through each of the categories one by one and run the code written inside the braces. The next step is to write a query that can run for each and every category of your WP blog.

Defining Query Arguments

The next step is to state the conditions for the query you have written. For this you need to add the following code snippet:

$args = array(

    ‘cat’ => $category->term_id,

    ‘post_type’ => ‘post’,

    ‘posts_per_page’ => ‘1’,

);

The code written above will get you one post from the current category.

Running the Query

Now you need to place your query in the code via WP_Query class:

$query = new WP_Query( $args );

<div class=”recent-post-list”>

if ( $query->have_posts() ) { ?>

        <h2>Recent Post in <?php echo $category->name; ?>:</h2>

        <?php while ( $query->have_posts() ) {

            $query->the_post();

            ?>

                <h3>

                    <a href=”<?php the_permalink(); ?>”>

                        <?php the_title(); ?>

                    </a>

                </h3>

                <?php the_excerpt( __( ‘Read More &rarr;, ‘twentyfourteen’ ) ); ?>

           <hr>

        <?php } // end while ?>

    </div>

<?php } // end if

wp_reset_postdata();

This code snippet will get your featured title, excerpt,  and image for all your recent post to be displayed in the list all in a link.

2015-10-29_0923

Avoiding Duplication of Posts

The very first step in avoiding duplication of post is to add the line of code where  get_categories() function was added.

$do_not_duplicate = array();

This is used to create an array named as $do_not_duplicate which is empty. This is created to store the ID of each of the post as the output and it is also used to check whether the ID of a post is searched in this array.

After this you need to add another line of code just below the opting query, which will make the first two lines appear like this:

<?php while ( $query->have_posts() ) {

    $query->the_post();

    $do_not_duplicate[] = $post->ID;

    ?>

The above code will add the ID of your recent blog entries to an array called  $do_not_duplicate.

Now you need to write down a new argument in the query arguments so as to make sure that no post is there in this array.

You need to use the following code snippet:

$args = array(

    ‘cat’ => $category->term_id,

    ‘post_type’ => ‘post’,

    ‘posts_per_page’ => ‘1’,

    ‘post__not_in’ => $do_not_duplicate

);

The code makes the  post__not_in’ argument which appears to be an array list of post IDs.

After this save this file and take then see how your web page looks like.

Adding Styling

Now that we have achieved what we needed, so now is the time to add some styling to add some aesthetic value to it. You can add some styling functions to make the images display on left or right as per your need.

for this you can take of the following code snippet which you need to write in your  style.css file.

. recent-post-list h2 {

    font-size: 30px;

  border-bottom: 1px solid #CCC;

}

.recent-post-list  h3{

    font-size: 20px;

}

.recent-post-list  hr{

    border-color: #222;

}

No worries if you are using different content types

This is a very supple technique and you can easily adopt it in any other taxonomy or content type.

WordPress being one of the most oldest CMS platform offers a great deal of combustibility. Therefore, you can count on it to build any sort of blogging website with any sort of requirements.

Sophia Phillips

Sophia Phillips

Sophia Phillips has been working as a professional in WordPress template customization company and loves sharing information about leveraging multiple benefits of WordPress in the best possible manner. Currently, she has an impressive count of WordPress-related articles under her name.
Sophia Phillips

Latest posts by Sophia Phillips (see all)