Styling Current Page in WordPress wp_link_pages

I think that lot of you have found problems with styling the current page link in the WordPress function wp_link_pages. I think that WordPress have to add this functionality by default by adding an attribute that let the developer to add a specific class for the current page.

wp_link_pages() make possible to show the pagination to the post or pages that have more than one page. Its also useful if  your WordPress  post or page  have the tag <!–nextpage–>.

The function have possibility to add an array as argument that let the developer to customize it.

<?php
 	$defaults = array(
    'before'           => '<p>' . __( 'Pages:', 'twentyfourteen' ),
    'after'            => '</p>',
    'link_before'      => '',
    'link_after'       => '',
    'next_or_number'   => 'number',
    'separator'        => ' ',
    'nextpagelink'     => __( 'Next page', 'twentyfourteen'),
    'previouspagelink' => __( 'Previous page', 'twentyfourteen' ),
    'pagelink'         => '%',
    'echo'             => 1
  );
 
        wp_link_pages( $defaults );

?>

Now if you use it without the arguments you will have a simple pagination  that use only <p> tag and that make impossible to style the pagination.

So let check another configuration with new arguments added:

 echo '<div class="page_with_pagination">'; 
    wp_link_pages( array(
     'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'averon' ) . '</span>',
     'after'       => '</div>',
     'link_before' => '<span class="no">',
     'link_after'  => '</span>',
   ) );
		echo '</div>';
 		echo '</div>';

You can see that i have added a div tag in the start so i can style the pagination better and don't mess it with another classes. Anyway i recommend you to add only one class because it better for website performance. For example it will better if you reach the span like “.page-links-title” instead of “.page_with_pagination .page-links-title”. Anyway  i will use the traditional method in this example.

The html after adding these arguments will be the one below:

<div class="page_with_pagination">
   <div class="page-links">
     <span class="page-links-title">Pages:</span> 
     <span class="no">1</span> 
<a href="http://localhost/example/about/clearing-floats/2/"><span class="no">2</span></a>
</div>
</div>

Normally you will see in your WordPress post or page this pagination without any styling:

Pages: 1 2

So i want this pagination styled and make the current page highlighted. The simple way  to do that without adding code and to filter the functions itself is to use this simple css trick.

.page_with_pagination{width:100%; float:left; margin-top:20px;}
.page-links-title{border:1px solid #ddd; padding:4px;}
.page-links .no{padding:4px 10px; border:1px solid #ddd; color:#fff; background:#f57f20;}
.page-links a .no{background: transparent; color:#000;}

Practically the trick is to give the background color to the span tag that doesn't have <a> link tag (hyperlinked). Also you have to add a transparent background to the linked span tag and give the  font color to be visible from the white span background.

The result is the image below:

As you can see the current page is colored with green background. You can style the pagination as you want by adding additional css attributes. In this example i have only add some padding and a border.

Keep in mind to use wp_page_links() function within the loop.

Let us know in the comments below your alternative method to style current page in wp_page_links().

Ludjon Roshi

Ludjon, who co-founded Codeless, possesses a deep passion for technology and the web. With over a decade of experience in constructing websites and developing widely-used WordPress themes, Ludjon has established himself as an accomplished expert in the field.