There's a lot of talk these days in the SEO community about keeping your readers above the fold. The term “above the fold" means the visible portion of the screen when a user accesses your page in a browser. “Below the fold" means a user has to scroll the page to read the content. It's good to keep in mind, however, that keeping your readers above the fold may also have as much to do with a user's personal choices for their browser settings as it does with how much content you write. If a user has their browser fonts set to a large size for accessibility purposes, there will be much less content above the fold then for users with a smaller font selected. So I wouldn't worry too much about this. I think it's more important to focus on writing for your audience's needs.
Nevertheless, since most of us are capable of writing lengthy articles, having a way to paginate a piece without breaking it up into separate posts might be useful functionality for a lot of authors. Did you know that WordPress has built-in page or post pagination capabilities to address just such an issue? In most cases, if your theme supports it, all you have to do is add the next page tag <!-- nextpage --> at the points(s) at which you want to split your post or page. It's important to note that when you paste the tag into your document, you must do it from the post editor's text tab.
What If It Doesn't Work?
So what happens if the next page tag doesn't work in your theme? Well, there are several things we can do to fix the problem. First, we can edit the theme. Add the following line to your theme's single.php loop and the pagination will display.
If modifying a theme is a little advanced for you, then you can try a plugin like this one available from WordPress.org: http://wordpress.org/plugins/automatically-paginate-posts/
Styling the Pagination
The typical styling for pagination is:
It's not very pretty and may not correspond to your theme's styling. The good thing is that since the pagination is comprised of a few HTML elements, it's fairly easy to change the pagination through CSS to make it look much prettier.
The first step is to change the pagination div wrapper so you can use custom CSS. Add the following block of code to your functions.php file:
function my_custom_pagination($defaults) {
$args = array(
'before' => '' . __('Post Sections —'),
'after' => '
',
);
$r = wp_parse_args($args, $defaults);
return $r;
}
add_filter('wp_link_pages_args','my_custom_pagination');
Then add the following CSS to style.css:
.my-paginated-posts {
font-size: 1em;
font-weight: normal;
font-family: arial;
}
.my-paginated-posts p {
font-size: 1.4em;
}
.my-paginated-posts p a {
background: #E8E8E8;
color: #000;
margin-left: 0.1em;
margin-right: 0.1em;
padding: 0.5em 0.7em;
text-decoration: none;
}
.my-paginated-posts a:hover {
color: #fff;
background: black;
}
Using the code above your pagination looks like this:
This is a very simple example. Hover over any of the page exemplars and the color changes. Nice, huh?
