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

Currently it is practically impossible. Need write your own version of the function. I did just so for my theme in development.

There is a trac ticket requesting improvements to the function since it is inflexible, yet required for themes hosted in official repository.

share|improve this answer
    
thanks, that explained it all –  nekojira Jan 20 '13 at 16:25

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.