How to add “Next Page”/ “Page Break” button in WordPress Editor

In WordPress we can separate post/pages using <!--nextpage-->. It’s hard to remember the tag, and you need to add it using “Text” editor, not visual editor. This is  how you can add “Next Page” or “Page Break” button in Visual Editor, Just like this:

wordpress-next-page-visual-editor

It’s very simple, you can add this code in your theme/child theme functions.php or add it in a functionality plugin.

Add WordPress Next Page Button in Visual Editor

Add this code in your theme functions.php or in your functionality plugin. This feature is there, but somehow WordPress hide this.

 /* Add Next Page Button in First Row */
add_filter( 'mce_buttons', 'my_add_next_page_button', 1, 2 ); // 1st row

/**
 * Add Next Page/Page Break Button
 * in WordPress Visual Editor
 * 
 * @link https://shellcreeper.com/?p=889
 */
function my_add_next_page_button( $buttons, $id ){

    /* only add this for content editor */
    if ( 'content' != $id )
        return $buttons;

    /* add next page after more tag button */
    array_splice( $buttons, 13, 0, 'wp_page' );

    return $buttons;
}

Keyboard Shortcut to Add Page Break

You can also use keyboard shortcut (Alt + Shift + P) to add Page Break.

Result Of WordPress Next Page Feature

As you can see, this post have two pages. Click “2” to view the second page.

65 Comments

  1. John

    Hi.
    Is it possible to limit the number of page breaks that could be used by a client (multi-site user?)!

    I would like to only permit 2 ‘breaks’: i.e 3 pages!

    would appreciate your help with this.

    Regards
    johnv

  2. Helen

    I have just added the code that you suggest in the function.php of my website.
    As it doesn’t work I delete it again (only this and nothing else!!!) and now….I can not even have access on my website!!!!!
    I try for admin log and a message like this appears: Warning: Cannot modify header information – headers already sent by ………
    Can you tell me what I should do now, after destroying my website????????

  3. sean

    Is the next page button only for posts/pages with a page break? Or can I use it to go between two separate pages on my site?

    Thanks!

  4. Eric

    I’d like to add text to my “next” button in WordPress. For instance:

    “Next: Starting your car”

    Not sure of what the code is to make that happen. Thanks!

  5. best cccam

    bonjour
    Nice share.
    I consider the best iptv are those from fishbone cloud
    I would like to see more posts like this
    Thanks

  6. Fatima

    Thank you for sharing this post.
    I was wondering if we can add a page break in the WordPress Elementor using the same code? And if yes, could you please let us know how to do that?
    Thanks.

  7. zobacz

    I get pleasure from, result in I discovered just what I was looking for.

    You’ve ended my 4 day long hunt! God Bless you man. Have a nice day.
    Bye

  8. vinit

    Hi
    i have create a page break Eg: (page: 1 2 3)
    but I want to change colour of 1 2 3
    its displaying black & white.
    how can i change?????

  9. Priya

    Wow, David… Nice Explanation Interesting read very helpful for me keep posting like this thanks !!

  10. Sohaib

    Hello,

    Thank You for the post, I did the same and it’s working for me,
    Help is very appreciated.
    Thank You,

  11. Rayan

    That’s so simple solution, I just try out, and it’s working fine. Will solution work on WordPress new editor?

  12. Andy Globe

    I’m utilising the most recent post (1 post) on the homepage to display the title of the following day and nothing else.

    Currently, clicking on the “Older Posts” link on the homepage, e.g. homepage.com, takes you to: homepage.com/page/2/ rather than homepage.com/url for next post.

    The issue is that I have various backgrounds for each article and would want to see them instead of the post shown over the homepage backdrop.

    Any suggestions on how to accomplish this?

Comments are closed.