Breaking a long post into sub-pages

[juanajaafar]

Hi. I’m working on a long post. How can I break the post into sub-pages within the post, with page number buttons at the bottom of a paragraph where I want the page to break?

[ruenel]

Hello @juanajaafar,

Thanks for writing in!

Are you using the default WP editor in creating your posts? Perhaps, this link might help:

• https://www.wpbeginner.com/wp-tutorials/how-to-split-wordpress-posts-into-multiple-pages/

Please let us know how it goes.

[juanajaafar]

Hi. It’s not working for me.

I use Cornerstone for building the post. But even when I switch to text view and add <!––nextpage––> it doesn’t work.

The guide says: “If for some reason, pagination is not showing up after you have pasted the next page tags, then you would need to add the following code in your single.php loop.”

I don’t know what this means.

[christian]

Hey @juanajaafar,

We have a Table of Contents shortcode that could break long post and it works in Cornerstone. Please see read the documentation at https://theme.co/apex/forum/t/shortcodes-toc/180

The third-party article Ruenel shared is only a guide and we actually do not provide support for it. Please use native features of our products instead.

If the feature we offer does not fit your requirements though, you would need to consult with a third-party developer to offer you or build you a suitable plugin.

Hope that helps and thank you for understanding.

[juanajaafar]

Okay, I went to the Icon shortcode and added this to the top of my post:

[toc title=“Table of Contents” type=“left”] [toc_item title=“1. Introduction” page=“1”] [toc_item title=“2. More Information” page=“2”] [toc_item title=“3. Even More Information” page=“3”] [/toc]

How do I break the post from here on? (page 1, page 2, etc) What shortcode do I need to add at the parts of the post where I want to break?

[christian]

Hey @juanajaafar,

It was mentioned in the documentation. To break the content, use the <!--nextpage--> code of WordPress in the Text Editor.

Hope that helps.

[juanajaafar]

Hi. Yes, I’ve added that but now the page numbers appear right at the end of the post below the suggested post thumbnails.

Is there a way for me to move the page numbers at the end of the last paragraph of a page, above the suggested post thumbnails?

[ruenel]

Hello @juanajaafar,

Do you want to display the page links like this?

If that is the case, please add this JS code in the X > Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
	$(".single .page-links").insertBefore('#jp-relatedposts');
})(jQuery);

And the space below the image is coming from your section padding. Please set the padding to 0.

We would love to know if this has worked for you. Thank you.

[juanajaafar]

Hi. Thanx a lot, this helps! But also new problems:

First: There a code that appears above the page numbers, and only on page 4:

[/cs_text][/cs_element_column][/cs_element_row][/cs_element_section]

I checked the post and that code isn’t on my post text.

Also: I only have 4 pages, but the page list below shows 5 pages. When I click on it, it takes me to a page with no body text.

[ruenel]

Hey @juanajaafar,

The TOC shortcode is best used with the default WP editor. It was never intended for use inside with any element built with Cornerstone. I would highly recommend that if you want to break down a post into several pages, you may use the default WP editor instead.

Hope this explains it briefly.

[juanajaafar]

Hi. I’m really confused. Your colleague @christian_y said “Please use native features of our products instead”. This is why I’m using ToC to break the post.

I just need help on how to remove the code on page 4 which I’ve attached above. Hope you can help with this.

I’m not now going to move my post from Cornerstone to WordPress editor. So can you propose what options I have to create breaks in my post, using Cornerstone.

[rad]

Hi @juanajaafar,

They are both correct, but allow me to explain what’s the issue

If you’re planning to just divide a text content then please use standard Wordpress editor, but if you wish to use the builder then don’t divide the text content, but the sections.

What I’m saying is, don’t just place multiple <!--nextpage--> on same text content, in the same section if you plan using it in the builder. Example

[section]
         [text]hello worlds[text]
[section]

[section]
         [text]hello worlds <!--nextpage-->[text]
[section]

[section]
         [text]hello worlds <!--nextpage-->[text]
[section]

The purpose of <!--nextpage--> in the builder is not just to split content, but to correctly split sections from each other. Else, the layout will break especially the shortcode, that’s why you’re getting a shortcode at the end since it’s not properly divided. Example,

page 1

[section]
         [text]hello worlds

page 2

[text]
[section]

The TOC is just a shortcode that allows navigation linked to pagination but it’s not a requirement. You can add pagination without it. But make sure to implement <!--nextpage--> properly in the builder. The layout could also have hidden sections meant for other devices, so please properly decide where and when to use <!--nextpage--> within the builder.

Thanks!

[juanajaafar]

I have done as per your suggestion above:

Section 1 is Page 1, Section 2 is Page 2 and so on. At the end of each Section, I add the
nextpage code. Here’s what happened:

Page 1 is good. But when I click to Page 2, it doesn’t go to Section 2. Instead, I see this. An empty text with only this code:

I only see the correct Page 2 when I click Page 3. But then on Page 4, I see that code again.

[juanajaafar]

The above problem doesn’t occur when all the text are in one Section, and I insert the nextpage codes there. EXCEPT, on Page 4 where this code appears (as I’ve noted earlier above).

[rad]

Hi @juanajaafar,

In that case, would you mind providing the testing URL and admin login credentials in the secure note? I like to test it as well. And make sure the amount of <!--nextpage--> in single page is one less from what expected amount of pagination. Like if it’s 4 pages then there should be only 3 <!--nextpage-->.

Thanks!

[juanajaafar]

Hi. I’ve just dropped the secure note above. Thanx, looking forward to get some help.

[benursal]

Hi Juana,

Thanks for sharing with us your login details. You probably hate me with what I’m going to say next… because I’ll be the third person to tell you this… but I would recommend that you use the default Wordpress edit just for this long post. To be more accurate, use Gutenberg.

Now, I’m recommending that you do it just for this post because it’s a special case - because it’s using the Table of Contents shortcode. For future posts that won’t be using the said shortcode, you can continue using Cornerstone. For existing posts, you can continue using Cornerstone for them.

Using Gutenberg won’t break the design. This post will follow the design (the look and feel) of the other posts, so consistency is retained.

And with Gutenberg (or the Wordpress default editor), the TOC shortcode is guaranteed to work. As @RueNel, @christian_y and @Rad has pointed out, this shortcode doesn’t work best with Cornerstone and that is easily demonstrated by the current issue.

I have created this post https://www.juanajaafar.net/wp-admin/post.php?post=10869&action=edit and it works. You just need to fill it with the correct content.

I hope this approach works for you. In my opinion, while it’s definitely desired to use Cornerstone in all cases, this special case is better with the default Editor, and it works.

[juanajaafar]

Hi. First of all, thank you so much for helping set up the WordPress page. I really appreciate it. I wouldn’t have known where to even start.

I’m working on it right now and things look okay. I have a few questions:

1. How do set headers within the text (using the WP block) to H5. Currently, the options are only H2-4.

2. How do I set font colour as colour is not an option in WP’s paragraph block.

3. I want to add a content band into this WP post. How do I use Cornerstone’s shortcode on their blocks? I’ve tried using their shortcode block, but it doesn’t work. Here’s what I added:

   [content_band style=“color: #333;” bg_color="#434343" border=“all” inner_container=“true”]

   Text

[lely]

Hi @juanajaafar,

You’re always welcome!

@juanajaafar

1. How do set headers within the text (using the WP block) to H5. Currently, the options are only H2-4.

You can use directly Custom HTML element or convert headline element to block:
https://screencast-o-matic.com/watch/cq6n6cul3i

@juanajaafar

2. How do I set font colour as colour is not an option in WP’s paragraph block.

Paragraph content will inherit your theme content font color. No need to set it unless you what this specific content on certain colors. To do that, click the 3 dot icon that says MORE OPTIONS > Choose SHOW BLOCK SETTINGS > Under Advance > Additional CSS CLASS: Add a class where your font color is define. For example, you can add redfont. Then on Theme Options > Global CSS define the color like this:

.redfont{
 color:red;
}

@juanajaafar

3. I want to add a content band into this WP post. How do I use Cornerstone’s shortcode on their blocks? I’ve tried using their shortcode block, but it doesn’t work. Here’s what I added:

What you shared is incomplete. Here’s the list of complete shortcode:
http://demo.theme.co/integrity-1/shortcodes/

Please make sure to copy the complete shortcode to avoid structure issues.

Hope this helps.

[juanajaafar]

Hey there. This is really helpful. I’ve made the adjustments but stuck at these:

1. Once I was able to change the header to H5, I set text-align to “justify”, but the alignment doesn’t register. Here’s what I added:

<h5 style="text-align: justify;">Surat untuk orang kita</h5>

2. The content band works, but when I tried to set the alignment, it somehow cancels my font colour setting. Here’s what I added:

[content_band style="color: #ffffff;" bg_color="#434343" style="text-align: justify;" border="all" inner_container="true"]