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.

Below there's the Wordpress code found in post-template.php for the wp_link_pages() function - this function generates a page navigation for posts or pages having the content split into multiple pages.

function wp_link_pages($args = '') {
    $defaults = array(
        'before' => '<p>' . __('Pages:'), 'after' => '</p>',
        'link_before' => '', 'link_after' => '',
        'next_or_number' => 'number', 'nextpagelink' => __('Next page'),
        'previouspagelink' => __('Previous page'), 'pagelink' => '%',
        'echo' => 1
    );

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

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

    $output = '';
    if ( $multipage ) {
        if ( 'number' == $next_or_number ) {
            $output .= $before;
            for ( $i = 1; $i < ($numpages+1); $i = $i + 1 ) {
                $j = str_replace('%',$i,$pagelink);
                $output .= ' ';
                if ( ($i != $page) || ((!$more) && ($page==1)) ) {
                    $output .= _wp_link_page($i);
                }
                $output .= $link_before . $j . $link_after;
                if ( ($i != $page) || ((!$more) && ($page==1)) )
                    $output .= '</a>';
            }
            $output .= $after;
        } else {
            if ( $more ) {
                $output .= $before;
                $i = $page - 1;
                if ( $i && $more ) {
                    $output .= _wp_link_page($i);
                    $output .= $link_before. $previouspagelink . $link_after . '</a>';
                }
                $i = $page + 1;
                if ( $i <= $numpages && $more ) {
                    $output .= _wp_link_page($i);
                    $output .= $link_before. $nextpagelink . $link_after . '</a>';
                }
                $output .= $after;
            }
        }
    }

    if ( $echo )
        echo $output;

    return $output;
}

The problem here is that the generated markup, even through arguments, can't be used with Twitter Bootstrap Page navigation classes because the markup should be something like this:

 <div class="pagination">
    <ul>
         <li class="disabled"><span>Pages:</span></li>
         <li class="active"><span><a href="#current-page">1</a></span></li>
         <li><span><a href="#next-page">2</a></span></li>
     </ul>
</div>

then I tried using the following arguments:

'before' => '<div class="pagination"><ul><li class="disabled"><span>' . __( 'Pages:', 'mytextdomain' ) . '</span></li>',
'after' => '</ul></div>',
'link_before' => '<li><span>',
'link_after' => '</span></li>',

But the output is:

<div class="pagination">
    <ul>
         <li class="disabled"><span>Pages:</span></li>
         <li><span>1</span></li>
         <a href="#somelink">
              <li><span>2</span></li>
         </a>
     </ul>
</div>

As you can see the <li> elements for the page numbers get erroneously nested into <a> elements. By looking at the function I can see why. However I'm not sure how should I proceed to fix the markup. How would you filter or edit this function to correct the markup? Should I rewrite an entirely new one?

share|improve this question
1  
This blog post, A Better wp_link_pages() for WordPress might point you in the right direction. –  akTed Jan 20 '13 at 14:10

2 Answers 2

up vote 3 down vote accepted

There was a trac ticket requesting improvements to the function since it was inflexible, yet required for themes hosted in official repository. It had been resolved, adding much needed wp_link_pages and wp_link_pages_link filters, so now output can be cleanly modified without need to use custom function.

I went through quite a few takes on this over years and what I have at the moment is Rarst\Hybrid_Wing\Post_Pagination class, which does use new filters but is a little dusty, so might not be comprehensive implementation of Bootstrap markup.

share|improve this answer
    
thanks, that explained it all –  nekojira Jan 20 '13 at 16:25
    
The link to your repository is now broken. :-( –  Simon Sep 15 at 8:48
    
@Simon rewrote answer, it was outdated overall anyway :) –  Rarst Sep 15 at 9:08
    
Thanks @Rarst I'll check out your class. :-) –  Simon Sep 15 at 9:18

Why not simply use Less to recompile the Bootstrap CSS after adding:

paginationDiv ul{

.pagination

}

Then this markup can succesfully be used with Bootstrap:

<div class="paginationDiv">
<ul class='navigation'>
    <li>...</li>
    <li>...</li>
     <li>...</li>
 </ul>
</div>
share|improve this answer

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.