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.
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?
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.
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;
}
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.
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;
}
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.
@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
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.
