Advertisement
Articles

Quick Tip: How to Implement Multiple Pages for your Wordpress Posts and Pages

by

There's nothing worse than scrolling through a long post or page when it's obvious that it should have been broken into a series of more easily-digested chunks. It's very easy to accomplish in WordPress and more people should do it. Here's how you can.


Quicktag your post

Simply write your post or page as normal and whenever you need to start a new page, use the <!--nextpage--> quicktag.

Below is a screenshot of a demo post divided into three pages with <!--nextpage--> quicktags.

That's all you have to do to your posts or pages.


Edit your template

In your WordPress theme directory you'll find single.php. This is the template responsible for displaying individual posts or pages. And it's here that we need to tell WordPress to display paging links for our <!--nextpage--> quicktags.

In single.php (or perhaps loop-single.php, which is often called from single.php) you'll find the WordPress loop which displays your post or page. Here's a cutdown version of that loop

if (have_posts()) while (have_posts()) : the_post();

  the_title();
  
  the_content();
  
  wp_link_pages();

endif;
endwhile;

This loop displays the post or page title and the content, but notice the wp_link_pages function. This function displays
a set of page links as per the <!--nextpage--> quicktags you put in your post.

Here's what our post looks like when displayed. We're seeing page one with links to pages two and three.

It's that simple.


Styling the page links

The default output of wp_link_pages is functional but pretty boring. But wp_link_pages also let's us add before and after text to the default output so that we can target the paging links with CSS. Here's the loop again with some default arguments as used by the Twenty-Ten WordPress theme.

if (have_posts()) while (have_posts()) : the_post();

  the_title();
  
  the_content();
  
  wp_link_pages(array(
    'before' => '<div class="page-link">' . 'Pages:',
    'after' => '</div>'
    ));

endif;
endwhile;

And here's what that looks like once we've applied some CSS to the page-link class:

Of course, you can go wild with styling in terms of color and size. Also, make sure to check out the arguments for wp_link_pages as they allow you to customize the paging output even further.

Related Posts
  • Code
    Creative Coding
    Using a Custom Post Type to Create a Home Page BannerUsing a custom post type to create a home page banner
    Sometimes it's useful to have a nice obvious banner on your site's home page—for announcements, snippets that aren't long enough to merit a blog post, or links to new content within the site. But you don't want to be editing your homepage content every time you add a new piece of content, nor do you want to be delving into the code to add content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Plugins
    An Introduction to Theming WooCommerce for WordPressWoocommerce
    WooCommerce is a popular eCommerce platform for WordPress that is being rapidly developed by WooThemes. In this article, I'm going to guide you through the fundamentals of theming for WooCommerce.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating an Image-Based Archive Page: Getting StartedCreating an image based archive page
    Using images when displaying an archive listing in WordPress can be very powerful. It can increase the visual appeal of your archive pages and your site overall and it can help to illustrate what your site is all about.Read More…