How to Add Page Break in WordPress and Customize the Appearance?

Using the ideal length (word count) is one of the successful factors for an article to rank well in Google search. There are no rules for deciding the length and it depends upon the topic you write. However, long form articles tend to perform well as they can rank for long tail keywords in addition to focus keywords. Whatsoever is the case, showing the article with 3000 or more words in a single stretch will make the users tired and bored quickly. The solution is to use page break in WordPress so that the article is split into few pages. In this article, we will explain how to use page break in WordPress and customize the appearance.

What Happens When Using Page Break?

Page break is the feature in WordPress to split the lengthy article to desired number of pages. You can insert multiple page breaks in a single article to split into multiple pages. The published article will have a pagination so that users can click on it and go to the next page to read further content. Let’s say, you have inserted two page breaks in an article. In this case, the article will be split into three pages like below with three different URLs:

yoursite.com/test-post/	Page 1
yoursite.com/test-post/2/	Page 2
yoursite.com/test-post/3/	Page 3

Remember, each URL is a separate page in WordPress which means users can access them independently. WordPress will add a canonical URL of the same split page (like /2/ or /3/) in the source code to inform search engines these can be considered as independent pages.

However, your XML Sitemap will have a single post URL which is the page 1 of the article. This is the same case whether you use the default WordPress Sitemap or use plugins to generate Sitemap for your site.

Advantages of Page Break

Adding page break in WordPress helps to improve the visibility in the following ways:

• Limit the length of a single page without stretching too long.
• Users can navigate to next or previous pages to read the content thus increasing the engagement and time on site.
• Each single page can potentially rank in search engines thus improving your traffic.

However, make sure the content is attractive enough for your readers to retain them and break the page in appropriate position. Otherwise, it may have negative impact that users will leave the page without reading the full content.

Add Page Break in Gutenberg Editor

Page break is one of the blocks in Gutenberg editor which you can insert anywhere on the content. Create a paragraph block where you want to insert a page break, simply type /page to filter relevant blocks.

Select Page Break block to insert and it will show a divider line as shown in the picture below. This block has no additional settings, only thing you can do is to insert or delete.

Now, publish or update your article and open the page in a separate browser tab. You can see the page navigation links where you have inserted page break in the editor. The content part below the page break line in Gutenberg editor will be moved into a new page which you can access by clicking on the page 2 link. You can insert multiple page breaks to separate the content into different pages which can accessed using the pagination links. Below is how it looks on the page with twenty-twenty-two WordPress theme.

Customizing the Appearance of Page Break in WordPress

The theme you use will decide the appearance of the page break section on the published page. As you can see in the above screenshot, the pagination looks simple and users may not even notice it appears at the end of content. However, commercial themes use custom in-built styles to make the appearance of pagination appealing. For example, below is how the page break pagination will look like in Astra and Kadence themes.

If you want to customize the pagination links, WordPress offers three CSS classes which you can make use of. You can use the browser’s developer tool section to change the style on live site to find the suitable CSS that can work well for your site. We will explain here with the default twenty-twenty-two theme and the appearance may be different when you have a different theme. CSS class for the pagination wrapper is .post-nav-links, you can add some background, padding, border radius to this class using the following styles.

.post-nav-links {
    background: rgb(144 238 144);
    padding: 10px;
    border-radius: 5px;
}

This CSS code will change the pagination wrapper to look like below:

Second is .post-page-numbers class which is used for displaying the number links. You can add the following styles to this class to show boxes around the numbers.

.post-page-numbers {
    border: 1px solid rgb(0 0 0);
    padding: 5px 10px;
    border-radius: 5px;
}

The last class is .post-page-numbers.current to differentiate the active page link. You can add different background color to active page link box so that users can easily understand they are currently in that highlighted page.

.post-page-numbers.current {
    background: rgb(255 255 0);
}

We add a yellow background to active page and it will look like below:

Combining together, you can add all the above CSS styles under “Appearance > Customize > Additional CSS” section to change the appearance of the pagination.

Using Themes to Break Pages Automatically

Some themes use completely different approach of automatic page break setup. For example, the popular Newspaper theme offers to create a smart list based on the heading level you select. If you select level 2 heading, the theme will automatically break the page and add pagination whenever you use H2 heading in the content. In addition, you can choose the pagination to show as a dropdown so that uses can see the headings and choose that page to read.

Add Page Break in Classic Editor

If you are using custom post types that do not support Gutenberg or still using old classic editor then also you can insert page break. Switch to “Text” editor and paste the below code where you want to insert the page break.

<!--nextpage-->

Now, toggle back to “Visual” editor to see a page break divider similar to Gutenberg editor. Publish or update the content to see the pagination in live content.

Note: WordPress also offers a feature to break up the number of comments and add pagination when the article has larger number of comments. Though this works exactly like page break, comment break only breaks the comments without affecting the content length.