0

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?

3

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.

  • The link to your repository is now broken. :-( – Simon East Sep 15 '14 at 8:48
  • @Simon rewrote answer, it was outdated overall anyway :) – Rarst Sep 15 '14 at 9:08
0

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>
0

try this:

wp_link_pages( array(
    'before'      => '<div class="row"><div class="col-md-12">
    <div>Pages</div><ul class="pagination"><li>',
    'after'       => '</li></ul></div></div>',
    'separator'  => '</li><li>',
    'link_before'  => '<span class="page-numbers">',
    'link_after'  => '</span>',
) );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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