Changing pagination style

[Gandam]

Hi,
I have been searching for similar topic for changing post pagination style, but I couldn’t find much. I tried couple of plugins, but they don’t work so well with theme, not sure whether the plugins aren’t compatible with the theme or there is css coding modification required. Are you guys able to assist with any good suggestion for such request?

Regards,

[Radu]

Hello,

I can help you to customize your pagination buttons, but it is necessary to provide a sketch in which to show me how do you want to style pagination.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Gandam]

@Radu – I will really appreciate if you can help me with it. I have searched for couple of pagination style with coding, not sure that will ease to resolve this. I have attached two styles image for your reference, not sure which will fit better, one is grey button and the other one is blue. I am not sure which will fit better with theme and page style, but I prefer to use blue colour same as theme default (#00b9f7) if we are going for blue button, the css coding is available at http://www.dreamtemplate.com/dreamcodes/documentation/pagination.html, thank you again.

Regards,

[Radu]

Hello,

Try this css

Pagination Style 1

COPY CODE

.pagination>li>a, .pagination>li>span {
color:#474747;
border:solid 1px #B6B6B6;
padding:0 9px 6px 9px;
background:#E6E6E6;
background:-moz-linear-gradient(top, #FFFFFF 1px, #F3F3F3 1px, #E6E6E6);
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #FFFFFF), color-stop(0.02, #F3F3F3), color-stop(1, #E6E6E6)); 
border-radius:3px;
color:#777!important;
}

ul.pagination li a:hover,
ul.pagination li a.current,
ul.pagination>li span:hover,
ul.pagination li span a:hover { background:#FFFFFF !important; }

.pagination > li > span.current {
border-radius:3px;
background:#FFFFFF;
}

.pagination>li>a.page-numbers {
border-radius:3px;
}

Add this css to Theme Options -> General settings -> Quick CSS or in your child theme ( kleo-child/style.css )

I think it’s ok

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Gandam]

@Radu – Thank you again, I’ve pated the code onto quick css and it works nicely. However, I would really appreciate if you could help me to make a slightly change, which can you replace the forward and backward arrows to wording of “Prev” and “Next” instead, same as the attachment. 🙂

[Radu]

Hi again,

Please insert this function to your kleo-child/functions.php

COPY CODE

function kleo_pagination( $pages = '', $echo = true ) {

    $output = '';
    if( $pages == '' )
    {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if( ! $pages )
        {
            $pages = 1;
        }
    }

    // Don't print empty markup if there's only one page.
    if ( $pages < 2 ) {
        return;
    }

    $paged        = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;
    $pagenum_link = html_entity_decode( get_pagenum_link() );
    $query_args   = array();
    $url_parts    = explode( '?', $pagenum_link );

    if ( isset( $url_parts[1] ) ) {
        wp_parse_str( $url_parts[1], $query_args );
    }

    $pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
    $pagenum_link = trailingslashit( $pagenum_link ) . '%_%';

    $format  = $GLOBALS['wp_rewrite']->using_index_permalinks() && ! strpos( $pagenum_link, 'index.php' ) ? 'index.php/' : '';
    $format .= $GLOBALS['wp_rewrite']->using_permalinks() ? user_trailingslashit( 'page/%#%', 'paged' ) : '?paged=%#%';

    // Set up paginated links.
    $links = paginate_links( array(
        'base'     => $pagenum_link,
        'format'   => $format,
        'total'    => $pages,
        'current'  => $paged,
        'mid_size' => 2,
        'add_args' => array_map( 'urlencode', $query_args ),
        'prev_text' => __( 'Previous', 'kleo_framework' ),
        'next_text' => __( 'Next', 'kleo_framework' ),
        'type' => 'array'
    ) );

    if ( $links ) {
        $output .= '<nav class="pagination-nav clear" role="navigation">'
            . '<ul class="pagination">';

        foreach ($links as $link) {
            $output .= '<li>' . $link . '</li>';
        }

        $output .= '</ul>'
            . '</nav><!-- .navigation -->';
    }

    if ($echo ) {
        echo $output;
    }
    else {
        return $output;
    }
}

And replace the css with this

COPY CODE

.pagination>li>a, .pagination>li>span {
color:#474747;
border:solid 1px #B6B6B6;
padding:0 9px 6px 9px;
background:#E6E6E6;
background:-moz-linear-gradient(top, #FFFFFF 1px, #F3F3F3 1px, #E6E6E6);
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #FFFFFF), color-stop(0.02, #F3F3F3), color-stop(1, #E6E6E6)); 
border-radius:3px;
color:#777!important;
}
 
ul.pagination li a:hover,
ul.pagination li a.current,
ul.pagination>li span:hover,
ul.pagination li span a:hover { background:#FFFFFF !important; }
 
.pagination > li > span.current {
border-radius:3px;
background:#FFFFFF;
}
 
.pagination>li>a.page-numbers {
border-radius:3px;
}

.pagination>li>a.prev {width:auto;}
.pagination>li>a.next {width:auto;}

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts