[Gabriel TParticipant]

Hi there,

I need your help in my attempt to apply some styling which is consistent with the rest of my website to the standard “Pages: 1,2,3” WP pagination that is used by the TOC shortcode.

1. Is it possible to modify the TOC shortcode in order to include the beautiful pagination styling that is currently in use for the blog/index page?

http://exalex.co/wp-content/uploads/2014/10/pagination.png

2. One other way would be to use one of the most popular plugins WP PageNavi. However, it’s installation requires to identify calls to next_posts_link(), previous_posts_link() and wp_link_pages( … ) within X, and replace them with WP-PageNavi specific calls. Can you help me identify these calls?

Best regards,

Gabriel

[Nabeel AModerator]

Hey Gabriel,

Yes you can modify the TOC pagination style via custom CSS. Please provide us the URL of your website so can inspect it more closely.

[Gabriel TParticipant]

This reply has been marked as private.

[RadModerator]

Hi Gabriel,

Hmm, are you referring to TOC shortcode or the number paging below the content? TOC shortcode is not directly related to wordpress paging feature ( <!--nextpage--> ), but the purpose of TOC is to take advantage of builtin’s paging. http://en.support.wordpress.com/splitting-content/nextpage/. The generated html is only limited to something like this :

<div class="page-links">Pages: 1 <a href="http://localhost/x/testing-2/2/">2</a></div>

Where the active page has no selector or link, and we can’t apply styling to element with no proper selector or class name.

Though, that can be achieve by customization, add this code at your child theme’s functions.php

add_filter('wp_link_pages_args', function( $args ) { 

$args['link_before'] = '<span class="page-link-wrap">';
$args['link_after'] = '</span>';

return $args;

});

Then add this css at your customizer’s custom css.

.page-links {
display: inline-block;
margin: 0;
padding: 6px;
background-color: #f2f2f2;
border-radius: 100em;
}
.page-links span.page-link-wrap, .page-links a:hover span.page-link-wrap{
display: inline-block;
margin: 0 3px;
width: 26px;
height: 26px;
font-size: 11px;
font-size: 1.1rem;
font-weight: 400;
line-height: 26px;
text-decoration: none;
color: #ddd;
background-color: #0099ad;
border-radius: 100em;
}
.page-links a span.page-link-wrap{
background-color: #fff;
}

Cheers!

[Gabriel TParticipant]

Thanks for helping, it works. The only problem is that the page numbers are not centered within the borders.

Can you help me fix that, please?

Regards,

Gabriel

[CousettMember]

Add one more style under Appearance -> Customize -> Custom -> CSS

.page-links span.page-link-wrap, .page-links a:hover span.page-link-wrap {
padding-left: 9px;
}

It looks like you already have a section for .page-links span.page-link-wrap, .page-links a:hover span.page-link-wrap if you do just add padding-left: 9px; to the list of styles.

[Gabriel TParticipant]

Thank you, it worked perfectly!

Best regards,

Gabriel

[ChristopherModerator]

You are welcome.

[Author]

Posts