How to add pagination for categories in wordpress

Pagination is one of the useful process when it comes in create big websites. According to wikipedia the definition of pagination is "Pagination is the process of dividing a document into discrete pages either electronic pages or printed pages." In order to give you better understanding of pagination I will give you daily routine example of humans.

Every morning we wake up and we see all the useful stuff like our clothes that we wore last night, blankets that we took last night, dirty floor and last night dishes utensils and many more stuff that are not organized in the morning. So, first thing we do is to clean up the mess and put them in order. Let us say this morning routine work process as page1. Sorry, If your morning routine is bit different I used my routine to explain.After cleaning all this, we then switch to clean ourselves like brushing our teeths, taking a bath and getting dressed up for the work, eat breakfast and start heading towards the work. This is the second step we do every morning. Let us say this second routine work process as page2.  This division of work process into page1 and page2 is known as pagination. 

Lets Get to the Point: How to add pagination on categories page

After surfing all over the internet I was not able to find a single solution related to pagination on categories on home.php page. I hope this blog helps you all. There are lots of ways we can do this pagination for posts but for categories I find this as the most reliable, simple and easy way without using plugin:

Step1:  Use get_categories() funtion to get the details of the page.

$st_page = array(
            'orderby' => 'name',
            'order' => 'ASC',
            'hierarchical' => true,
            'hide_empty' => 0,
            'exclude' => $st_hp_category_exclude,
            'pad_counts'  => 1
          );

          $st_categories = get_categories($st_page); 

$st_categories-> Here is variable that stores all the information

$st_page-> Here is the page I want my pagination for

get_categories()->Gets a list of category objects

Step2: Now we have all the information for the page ... Most importantly ->  how many categories we have. We will split these categories into number of categories we want to display on one page.  I have taken 6.

 $chunk = array_chunk($st_categories, 6);

array_chunk()->Splits the array into smaller chunks

($st_categories, 6)-> $st_categories is the name of category i want to split 

6 is the number of categories I want on one page.
 

Step3: Add an ACTIVE class using foreach loop

   foreach ($chunk as $value) {      
            $count++;
            if ($st_cat_counter ==0) {
            echo '<span class="section active '.$count .'">';
            }
            else{
                  echo '<span class="section '.$count .'">';
            }

Foreach loop -> For each loop is used between the chunk we have of 6 categories each and the values.

Section Active class-> We have divided the class into sections and created first class as active and rest Inactive.

Step 4 : Write your code in foreach loop

foreach($value as $st_category) { 

    echo '<div class="row">';

    ....write your code here

}

We have divided the further sections into into row and used foreach loop for 6 categories to display on 1 page. Each category in one row.

Step 5: Adding buttons to the bottom.

<button type="button" id="prev">Previous</button>

<div style="text-align: center;"> <?php echo " Showing page $count of  $num_of_page"; ?></div>
<button type="button" id="next" style="float: right;">Next</button>

We have added Next and Previous buttons and page number.

Step 6: Styling the buttons

<style type="text/css">
  .section:not(.active){
  display:none;
}
</style>

This does not displays the non active sections.

Step7: Final and last Step: Add Javascript.

script type="text/javascript">
  $('#next').click(function(){        // onclick function of javascript
    var $current = $('.section.active');     // The active section is stored in a variable $current. Here .active and .section are class we defined in step3.

    if ($current.next().length == 0) {.      
      $next_selected = $current.siblings().first();     // select the sibling of current using the siblings() and first() function of jquery and stored in a variable $next_selected
    } else {                                         
      $next_selected = $current.next();      // else select the next sibling of current using the next() function of jquery
    }

    $current.removeClass('active');       // Remove the active class
    $next_selected.addClass('active');    // and add the active class to next page
});

   $('#prev').click(function(){                    // onclick function of javascript
    var $current = $('.section.active');        // The active section is stored in a variable $current. Here .active and .section are class we defined in step3.

    if ($current.prev().length == 0) {
      $prev_selected = $current.siblings().last();    //select the sibling of current using the siblings() and last() function of jquery and stored in a variable $prev_selected
    } else {
      $prev_selected = $current.prev();                 // else select the prev sibling of current using the prev() function of jquery
    }
    $current.removeClass('active');                    // Remove the active class from current page
    $prev_selected.addClass('active');               // and add the active class to next page
  
});
</script>