I am trying to achieve a similar look to the image below, a working example can be found here: http://www.menshealth.com/celebrity-fitness/mark-wahlberg-fighter-workout


The needed code must do the following (some of my questions have been answered, but these remain):

Turn the non-linked active/current page number into a link to the top of the page.

Assign a unique style class to the previous and next links

My current code is in use on this site.

The code below is what I have so far.

Calling it

    'before' => '<p>' . __(''),
    'after' => '</p>',
    'next_or_number' => 'next_and_number', # activate parameter overloading
    'nextpagelink' => __('Next'),
    'previouspagelink' => __('Previous'),
    'pagelink' => '%',
    'echo' => 1 )

Custom function

// Custom Next/Previous Page
add_filter('wp_link_pages_args', 'wp_link_pages_args_prevnext_add');
 * Add prev and next links to a numbered link list
function wp_link_pages_args_prevnext_add($args)
    global $page, $numpages, $more, $pagenow;

    if (!$args['next_or_number'] == 'next_and_number') 
        return $args; # exit early

    $args['next_or_number'] = 'number'; # keep numbering for the main part
    if (!$more)
        return $args; # exit early

    if($page-1) # there is a previous page
        $args['before'] .= _wp_link_page($page-1)
            . $args['link_before']. $args['previouspagelink'] . $args['link_after'] . '</a>'

    if ($page<$numpages) # there is a next page
        $args['after'] = _wp_link_page($page+1)
            . $args['link_before'] . $args['nextpagelink'] . $args['link_after'] . '</a>'
            . $args['after']

    return $args;
  • What, specifically, are you having a hard time with? I don't really see a question in there? Is it the CSS?
    – mor7ifer
    Commented Jan 18, 2012 at 20:46
  • All 3 solutions in the list, I'll bold them in the question. Commented Jan 18, 2012 at 21:07
  • Take a look at my Easy Pagination Deamon. I don't maintain it anymore, but it's originally meant to be used as an example for learning purposes. Just read in the comments and you'll find some nice core functions that didn't know about so far. It's commented pretty intense for that purpose.
    – kaiser
    Commented Jan 19, 2012 at 4:29
  • I don't know PHP nearly well enough to use this for my purposes :-( Commented Jan 19, 2012 at 18:52

3 Answers 3


Your pagination links are wrapped in with this tag <p class="pagelinks"> so giving them all the same spacing is easy using CSS like so:

.pagelinks a { margin: 0 5px !important; } /* override other defined margins */

maybe you want them all centered on the page too:

.pagelinks { display:block; text-align:center; }

making the current page number a link to the top of the page - try this in before/after your previous page & next page if statements:

if($page == $pagenow) { // check if current link is current page
    $args['pagelink'] = '<a href="#header">%</a>'; // assuming top div has ID "header"
    } else {
    $args['pagelink'] = '%';
  • This didn't make the current page into a link, I believe I pasted the code into the right place. If you have a second, please take a look at the code I now have in my functions: pastebin.com/U5yfD7RX Commented Jan 19, 2012 at 23:33
'nextpagelink' => __('<span class="next">&gt;</span>'),
'previouspagelink' => __('<span class="prev">&lt;</span>'),

adding a span with class name into link text means you can target them with css


Change this line:

'before' => '<p>' . __(''),


'before' => '<p class="pageLinks">' . __(''),

And then use css selectors to target the first <a> within p.pageLinks, this will get you the Previous link, do the same thing to target the last <a> tag for the Next link.

All the other anchor tags within the paragraph can be assumed to be numbered links.

Hint, nth-child will help you out here.

  • Thanks for the help, but selecting the first does not get me the previous link on every page, only on the second page in. The solution provided would be usable if users only viewed the second page. Commented Jan 18, 2012 at 22:06
  • Hm, that's a good point I didn't recognize. Commented Jan 18, 2012 at 22:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.