Support » Themes and Templates » Edit output of wp_link_pages for independently styled Previous and Next links

  • Resolved chrisjb

    (@chrisjb)


    I’m using wp_link_pages to paginate my posts and I’ve got Previous and next links working fine using the standard implementation:

    <?php
    					wp_link_pages(array(
    					    'before' => '<p>',
    					    'after' => '</p>',
    					    'next_or_number' => 'next',
    					    'nextpagelink' => __('Continue Reading'),
    					    'previouspagelink' => __('Previous page'),
    					    'pagelink' => '%',
    					    'echo' => 1 )
    					);
    					?>

    This outputs two links, which I can style independently using nth-child — however that’s not ideal.

    I’d like to position the Next link on the right and the Previous link on the left. Ideally I’d like to output the HTML with separate classes on each link (like the standard WP category navigation links).

    However I can’t do it with this standard functionality. Does anyone know a way of doing this?

    Thank you in advance for your help.

    P.s. I have already read this thread: http://wordpress.org/support/topic/wp_link_pages-nextprev-links-in-separate-divs — that solution isn’t quite right though because it outputs the html inside the a elements.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Bump

    Someone please help!

    I know this is quite a rarely used function but I hope someone out there has used it before.

    I think for future development of this feature, the default ability to add classes to these links would be very useful. Since it is extremely common to position a next link to the right and a previous link to the left it is extremely useful to be able to add classes to each of them.

    Can anyone help?

    Thank you

    I really think this should be default functionality of the wp_link_pages (or easier to modify the default output to wrap html around each link rather than having them as lonely floating anchor elements in the abyss).

    In the meantime you can use this to solve this problem. There is also a different class for the link on the first page of the paginated post so you can style that differently:

    <?php
                $links = wp_link_pages(array(
                    'before' => '',
                    'after' => '',
                    'next_or_number' => 'next',
                    'link_before' => '',
                    'link_after' => '',
                    'nextpagelink' => __('next'),
                    'previouspagelink' => __('pre'),
                    'pagelink' => '%',
                    'echo' => 0)
                );
                $nextLink = "";
                $previousLink = "";
                $linksArray = explode("pre", $links);
                if (count($linksArray) == 2) {
                    $previousLink = '<li class = "previous-page">' . $linksArray[0] . 'Previous Page</a></li>';
                    $links = explode("</a>", $linksArray[1]);
                    $links = $linksArray[1];
                }
                $linksArray = explode("next", $links);
                if (count($linksArray) == 2) {
                    $nextLink = '<li class = "next-page">' . $linksArray[0] . 'Next Page</a></li>';
                    $continueReading = '<li class = "next-page">' . $linksArray[0] . 'Continue reading</a></li>';
                }
                // show top navigation only if any one of links are present
                if (!(($nextLink == "") && ($previousLink == ""))) {
                    ?>
                    <div class="post-navigation-top clearfix">
                        <small class="page-number"><?php
                global $page, $numpages;
                echo "<strong>$page</strong> of $numpages";
                    ?></small>
    
                        <ul>
                            <?= $previousLink ?>
                            <?= $nextLink ?>
                        </ul>
                    </div>
                    <?php
                }
                $firstPageClass = "";
                //see if its first page
                if ($previousLink == "") {
                    $firstPage = true;
                    $nextLink = $continueReading;
                    //add class to nav bottom
                    $firstPageClass = " first-page";
                }
                ?>
                <div class="entry-content">
    
                    <?php the_content(); ?>
                    <?php if (!(($nextLink == "") && ($previousLink == ""))) { ?>
                        <div class="post-navigation-bottom<?= $firstPageClass ?>">
                            <ul>
                                <?= $previousLink ?>
                                <?= $nextLink ?>
                            </ul>
                        </div>
                    <?php } ?>
                </div>
                <!-- /.entry-content -->

    ….resolved.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Edit output of wp_link_pages for independently styled Previous and Next links’ is closed to new replies.