How to style current page number (wp_link_pages)?

by

Unfortunately, there is no way to do this just with native functions: WP is … request agnostic and produces always links to the current page (nav manus, list pages …).

Also, you cannot use a filter, because wp_link_pages() has no appropriate filter.

In my themes, I use an own function, based on this code. It is probably too long to post it here, so I put it as a plugin on GitHub: Logical Page Links.
You may use the plugin as is or copy the code into your theme.

The resulting markup will look like this:

<p class="pager"> 
  <b title="You are here.">1</b>  
  <a class=number href="http://example.com/page/2/">2</a> 
</p>

The <b> marks the current page, you can style it via:

.pager b
{
    color:      #fff;
    background: #111;
}

More features are listed in the readme of the plugin.

Update

I misunderstood the question. I thought you needed such a function for archives. Sorry.

Here is a rewritten version of wp_link_pages() as a plugin. I guess you’ll put it into your theme.

<?php # -*- coding: utf-8 -*-
/*
Plugin Name: Numbered In-Page Links
Description: Replacement for wp_link_pages with numbers. Use do_action( 'numbered_in_page_links' );
Version:     1.0
Required:    3.1
Author:      Thomas Scholz
Author URI:  http://toscho.de
License:     GPL v2
*/
! defined( 'ABSPATH' ) and exit;

add_action( 'numbered_in_page_links', 'numbered_in_page_links', 10, 1 );

/**
 * Modification of wp_link_pages() with an extra element to highlight the current page.
 *
 * @param  array $args
 * @return void
 */
function numbered_in_page_links( $args = array () )
{
    $defaults = array(
        'before'      => '<p>' . __('Pages:')
    ,   'after'       => '</p>'
    ,   'link_before' => ''
    ,   'link_after'  => ''
    ,   'pagelink'    => '%'
    ,   'echo'        => 1
        // element for the current page
    ,   'highlight'   => 'b'
    );

    $r = wp_parse_args( $args, $defaults );
    $r = apply_filters( 'wp_link_pages_args', $r );
    extract( $r, EXTR_SKIP );

    global $page, $numpages, $multipage, $more, $pagenow;

    if ( ! $multipage )
    {
        return;
    }

    $output = $before;

    for ( $i = 1; $i < ( $numpages + 1 ); $i++ )
    {
        $j       = str_replace( '%', $i, $pagelink );
        $output .= ' ';

        if ( $i != $page || ( ! $more && 1 == $page ) )
        {
            $output .= _wp_link_page( $i ) . "{$link_before}{$j}{$link_after}</a>";
        }
        else
        {   // highlight the current page
            // not sure if we need $link_before and $link_after
            $output .= "<$highlight>{$link_before}{$j}{$link_after}</$highlight>";
        }
    }

    print $output . $after;
}

Leave a Comment