Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

example

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

<?php
wp_link_pages(array(
    '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;
}
share|improve this question
    
What, specifically, are you having a hard time with? I don't really see a question in there? Is it the CSS? –  m0r7if3r Jan 18 '12 at 20:46
    
All 3 solutions in the list, I'll bold them in the question. –  AndrettiMilas Jan 18 '12 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 Jan 19 '12 at 4:29
    
I don't know PHP nearly well enough to use this for my purposes :-( –  AndrettiMilas Jan 19 '12 at 18:52
add comment

3 Answers

up vote 0 down vote accepted

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'] = '%';
    }
share|improve this answer
    
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 –  AndrettiMilas Jan 19 '12 at 23:33
add comment
'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

share|improve this answer
add comment

Change this line:

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

To:

'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.

share|improve this answer
    
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. –  AndrettiMilas Jan 18 '12 at 22:06
    
Hm, that's a good point I didn't recognize. –  Vlad Ionescu Jan 18 '12 at 22:44
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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