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

What support service includes ? What not ?

[Gandam]

This reply has been set as private.

[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

What support service includes ? What not ?

[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. 🙂

Attachments:

You must be logged in to view attached files.

[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

What support service includes ? What not ?

[Author]

Posts