How to style current page number (wp_link_pages)?

4 Views

When a post is split on more pages TwentyTen theme use the native function wp_link_pages to display a navigation page bar at the end of post.

I am trying to style those elements for my theme, but unfortunately it seems that the current page number cannot be styled.

Read More

I imagine that I should override the wp_link_pages function but I am still learning the basic of WP programming.

Can you help me identifing the steps to follow to solve this problem?

Post Views: 4

Related posts

Leave a Reply

6 comments

  1. 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;
}

  2. A simple way I’m using now, is to use ‘link_before’ and ‘link_after’ as part of the wp_link_pages args. You can then wrap each number, including the active one, in a tag, then style appropriately.

  3. I agree with seb; the way to do it is to use link_before and link_after. To expand on that, use, for example, 'link_before' => '<span class="page-link-number">', 'link_after' => '</span>'

    Then you will have output: 

    <p class="page-links"><span class="before">Pages:</span> 
<a href="http://myurl.com/page-blah/1/"><span class="page-link-number">1</span></a> 
<span class="page-link-number">2</span> 
<a href="http://myurl.com/page-blah/3/"><span class="page-link-number">3</span></a>
</p>

    where we are currently on page two.

    THEN you can style on whether the class “page-link-number” is the child of a link or not.

    .page-links a {
    color: #004c98;
    text-decoration: none;
}

.page-links .page-link-number { /* this is the default "current" state */
    background: #e5e5e5;
    display: inline-block;
    margin: 4px;
    padding: 4px 6px;
}

.page-links a .page-link-number { /* if it's inside a link, change the background color */
    background: #fff;
}

.page-links a .page-link-number:hover { /* add a hover state */
   background: #e0f0ff;
}

  4. First, you need to provide a CSS class to target, which you can do using the arguments of wp_link_pages() itself:

    wp_link_pages( 'before=<p class="link-pages">Page: ' );

    Now, just style the .link-pages class. Here’s what I use:

    .link-pages {
    clear:both;
    font-size:10pt;
    text-align:center;
}
.link-pages a {
    margin: 0px 3px 0px 3px;
    padding: 0px 3px 0px 3px;
}

    Style according to your needs, of course.

  5. @toscho thanks for the post, it helped a lot! I went a little further and added list item tags to both outputs, so I could style it with more ease.

    I’m pasting this hack to your code as it could help someone.

    $output .= _wp_link_page( $i ) . "<li>{$link_before}{$j}{$link_after}</a></li>"

$output .= "<li><$highlight>{$link_before}{$j}{$link_after}</$highlight></li>"

    Camilo

  6. It is possible to mark the current page using a WP filter. The filter wp_link_pages_link used in wp_link_pages() receives the link item, which is a single number for the current page, and an anchor for other pages. So we can check if the item is a number and wrap it in a span:

    /**
 * Filter wp_link_pages to wrap current page in span.
 *
 * @param $link
 * @return string
 */
function elliot_link_pages( $link ) {
    if ( ctype_digit( $link ) ) {
        return '<span class="current">' . $link . '</span>';
    }
    return $link;
}
add_filter( 'wp_link_pages_link', 'elliot_link_pages' );

    Of course, assuming you’re not already filtering the links in a way that the current page is no longer a single number. You can then stylize it using the current class.