Make wp_link_pages() suitable for Twitter Bootstrap markup

Question

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?

Answer 1

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.

Answer 2

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>

Answer 3

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>',
) );