If you have long post on your WordPress blog, then present i to reader on one long page is not comfortable for reading and it also consumes more server resources to render this long page. The solution for this is to split post to several smallest pages.

WordPress has support for this functionality, but on many themes it is not enabled. In this post I’ll show to you how to enable this feature if your theme doesn’t  support this by default and how to beautify Pages navigation bar.

Enabling pages links

If your theme doesn’t support splitting post to pages (as mine by default), you have to enable this functionality first. The WordPress supports this functionality by function wp_link_pages. The function documentation can be found here.

To enable pages support, we have to modify the active theme post template, exactly the single.php file which handle the post page rendering.This file is placed in root folder of the theme directory, so you can find it in on this path related to your wordpress root directory: /wp-content/themes/themename, where themename must be replaced by your current theme, in my case Inove.

Open the file for edit and search for the

1

<?php the_content(); ?>

pattern. Usually this pattern is enclosed in <div> section which handles how the post content will be render.

Here is snippet of my theme single.php file:

1
2
3
4
5
6
7
8

<div class="content">
    <?php the_content(); ?>
    <div class="fixed"></div>
</div>
<!-- BEGIN of PAGES related part -->
<?php wp_link_pages(); ?> 
<!-- END of PAGES related part -->
<div class="under">

On the line 2 you can see the the_content() function call and this call is enclosed in <div> section beginning on line 1 and finished on line 4.  Next three lines are added to the template to correctly handle posts which we can split to several pages.

Now save your modified single.php file and try to access any post on your blog. If you didn’t make any mistake, you will see your post as usual, without any significant change. It is correct, because to show pages navigation inside the post, you have to instrument the WordPress where you can split the post to pages.

To do that, insert to the post special mark:

1

<!--nextpage-->

TinyMCE visual editor has special button “Insert Page Break” with shortcut Alt+Shift+P to do that or you can add it directly to your post by WordPress editor HTML view.

I can recommend to create new testing post draft with this content:

1
2
3
4
5
6
7
8
9

My first page content
<!--nextpage-->
My second page content
<!--nextpage-->
My Third page content
<!--nextpage-->
......................
<!--nextpage-->
My 14th page content

Now try to preview this testing post. If everything is correct, you can see on the end of your page before the comments section something like this:

By clicking the page numbers, you will jump to related page of your post. Then, task looks to be finished…

But, as you can see, this default Pages bar doesn’t look well and is very small and is hardly noticeable. Due this a visitor of your blog can easily missed this Pages bar and he can read the first post page only. In worst case, he can think that the post is incomplete and leave the blog disappointed.

It is not very good situation and modification of the Pages bar to something more visible and harmonized with the blog theme is really good idea. In next section of the post I’ll try to show how to beautify the Pages bar and how to make it more noticeable.

Beautify Pages Bar

If you will take look on real HTML code generated by wp_link_pages function call, then you will find that page numbers are generated as classical HTML links. Due this we can modify how to render those links by Cascade Style Sheets functionality, the key technology for beautiful web content rendering on the Internet at present.

By this technology, we can modify look of any HTML page element on web page. I cannot describe here whole CSS functionality, it is really complex technology and you can find many tutorials related to this topic on the Internet. For example one of many CSS tutorials can be found here.

I’ll describe only necessary steps to beautify the Pages bar on your WordPress site. If you are using the Inove theme, you can use these steps without change, otherwise you will have to modify the CSS parts to reach your theme colors and other design rules.

At first, we have to modify the single.php file again and instrument the page to use special CSS style for our Page links. We have to enclosed the

1

<?php wp_link_pages(); ?>

code to own special div tag and specify special CSS class for rendering this section. Additionally, we can modify the wp_link_pages call by parameters to generate several HTML tags to final page result.

Here is final snippet from my single.php file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="content"> 
    <?php the_content(); ?>  
    <div class="fixed"></div>
</div>
<!-- BEGIN of PAGES related part -->
<div class="postpages">
   <?php wp_link_pages('before=<p><span class="pagestitle">Pages: </span>&after=</p>'); ?> 
</div>
<!-- END of PAGES related part -->
<div class="under">

As you can see, the wp_link_pages call is enclosed by own div section with class postpages. Additionally by definition of the before and after parameters in the wp_link_pages call the final HTML code for whole Pages link section is modified. The Pages bar is generated as paragraph inside <p> </p> section and the title of the line “Pages:” is enclosed to special <span> tag. All parameters description of the wp_link_pages function is described in the documentation.

By those modifications we prepared ground to change Pages bar look. Finally, we have to define new CSS class postpages. To do that we have to add some definitions to style.css file in the theme folder. The file can be found on same path as single.php file: /wp-content/themes/themename. I recommend to add this new definition to end of the style.css file.

Here is my definition:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.postpages{
    margin-top:15px;
    font-weight: bold;
    margin-bottom: 25px;
}

.postpages a, .postpages a:link {
    padding: 4px 6px 4px 6px;
    margin: 2px;
    font-weight: normal;
    text-decoration: none;
    border: 1px solid #d7d7d7;
    color: #2970A6;
    background-color: #FFFFFF;
}
.postpages a:visited {
    padding: 4px 6px 4px 6px;
    margin: 2px;
    text-decoration: none;
    font-weight: normal;
    border: 1px solid #d7d7d7;
    color: ##2970A6;
    background-color: #FFFFFF;
}
.postpages a:hover {
    border 1px solid #CCC;
    text-decoration: none;
    font-weight: strong;
    background:#e7e7e7;
}

.postpages a:active {
    padding: 4px 6px 4px 6px;
    margin: 2px;
    text-decoration: none;
    border: 1px solid #e7e7e7;
    color: #e56100;
 background:#F7F7F7;
}
.postpages span.pagestitle {
    padding:1px 7px 1px 22px !important;
    font-weight: normal;
    padding:2px 7px 2px 22px;
    background:url(img/icons.gif) 0 -272px no-repeat;
    height:16px;
    line-height:16px;
}

First definition .postpages define global look of the section, enclosed in <div> tag. Here is important the spacing definition, which grants that Pages bar will be separated from other post page elements by well look empty space. Modify margin-top and margin-bottom values to fit your needs.

Next three definitions:

• .postpages a
• .postpages a:link
• .postpages a:visited

are related to HTML link look and is same in all three definitions. It defines how the link to each page will be render. My definition specified solid box around the link with 1px border, with white background and normal text.

To grant functionality that link on page where cursor is placed will be highlighted, we define special section .postpages a:hover. It will highlight the link by change background of the box around the number of page. It is granted by special browsers functionality that entity where mouse cursor is crossing over is tagged by special hover tag.

Last important definition here is  .postpages span.pagestitle. It defines new CSS subclass  pagestitle for postpages class and this subclass is used to render the <span> enclosed content with title of the Pages bar. In the definition of the subclass you can see that icon on index -272px is used as graphics before text. If you don’t want to render an icon here, remove this line from definition.

Now save both changed files and try to access your testing post with pages again.

Final result of the Pages bar will be something like this:

Of course, by modifications of the CSS definition for postpages class you can change color or other look of your Pages bar. It is only on your imagination and CSS ability how the bar will finally look.

I believe that you will find this post useful and by described steps above you improve the WordPress blog behavior easily.

If you have additional tips how to improve this functionality, let me know in comments section.