Next Previous page

• 

  stormvisions · Member · Sep 28, 2015 at 3:06 am

  • Copy link
  • Add topic to favorites

  I am posting a serial novel using static pages. I heard reference to a Next 1 2 3 4 Previous type plugin but found that I can’t add plugins to WordPress.com Premium. I think this plugin would be useful to anyone with ongoing serial or online comics.

  The blog I need help with is: (visible only to logged in users)

• 

  musicdoc1 · Member · Sep 28, 2015 at 4:27 am

  • Copy link

  Hi,

  Have you considered the NextPage tag?

• 

  stormvisions · Member · Sep 28, 2015 at 4:52 am

  • Copy link

  If I do that will I still be able to list the chapters on the left menu?

• 

  musicdoc1 · Member · Sep 28, 2015 at 5:27 am

  • Copy link

  Yes. You may continue to include links to the first page of each chapter in the menu.

  Also when using next page tags, you may if you wish to, provide (in a custom menu) a link to every page created when you break up a chapter into multiple pages. For example:
  If https://burtabreu.wordpress.com/johnny-apple/ is the first page of a chapter, then the second page of the chapter would be https://burtabreu.wordpress.com/johnny-apple/2/, and so on. A link to each page in the chapter can be included in a custom menu.

• 

  stormvisions · Member · Sep 28, 2015 at 12:51 pm

  • Copy link

  That might do it. I’ll have to test to see if I can set unique chapter names, or they will all have the top level name which wouldn’t work and in which case I’d still leave the plugin request active but let me test it a bit more as soon as I get to work.

  Thanks.

• 

  stormvisions · Member · Sep 28, 2015 at 3:00 pm

  • Copy link

  Ok well I guess I can set display to none for .entry-header and then create a h1 tag and assign it the .entry-title class on each ‘page’ that uses the nextpage tag or do some other css wizardry – so thank you.

  However if enough people are using WordPress in this way maybe the powers that be will consider the request. It would be great to have a way to easily add a ‘next page’ style display that would use the regular pages so you could respect the headings and also not have to manage 300-400 pages of story as one long scrolling page in the editor.

• 

  musicdoc1 · Member · Sep 28, 2015 at 5:32 pm

  • Copy link

  However if enough people are using WordPress in this way maybe the powers that be will consider the request. It would be great to have a way to easily add a ‘next page’ style display…

  Understood. You may add a “modlook” tag to the sidebar to call for staff attention. That would greatly increase the likelihood that your request for the potential feature that you describe is seen and addressed by staff.

• 

  musicdoc1 · Member · Sep 28, 2015 at 5:33 pm

  • Copy link

  I meant to say, “…add a “modlook” tag to the sidebar of this topic…”

• 

  stormvisions · Member · Sep 28, 2015 at 5:46 pm

  • Copy link

  Done. Thanks for the assistance.

• 

  supernovia · Staff · Sep 28, 2015 at 10:44 pm

  • Copy link

  Next/Previous are typically used with dated posts, but I’ll put in a request for similar functionality, @stormvisions .

  In the meantime, you might consider creating separate pages for each chapter and using the next page feature within them. You can also use the List Pages shortcode to help with navigation:

  List Pages Shortcode

• 

  stormvisions · Member · Sep 28, 2015 at 10:50 pm

  • Copy link

  Right now I am using separate pages for each chapter – actually easier that way. Those short codes might be forced to do my bidding – will try them now.

• 

  supernovia · Staff · Sep 28, 2015 at 10:54 pm

  • Copy link

  Alright, and I’ve filed that request as well. I can’t say whether or when it will be fulfilled, but know you’ve been heard :)

• 

  timethief · Member · Sep 28, 2015 at 10:55 pm

  • Copy link

  May I suggest that this alternative called Write a Book might be workable for you?

• 

  stormvisions · Member · Sep 28, 2015 at 11:01 pm

  • Copy link

  It looks like I could use the child page short code with a custom menu and some css to work this, will try that.

  The Write A Book page looks very interesting. I’m going to play right now – thank you all.

• 

  timethief · Member · Sep 28, 2015 at 11:02 pm

  • Copy link

  Best wishes whatever you decide to do.

• 

  stormvisions · Member · Sep 28, 2015 at 11:41 pm

  • Copy link

  Thank you. I was able to work it out with shortcodes and css.

• 

  supernovia · Staff · Sep 29, 2015 at 4:56 pm

  • Copy link

  Glad to hear that, stormvisions . Care to share here how you went about it?

• 

  stormvisions · Member · Sep 29, 2015 at 5:45 pm

  • Copy link

  Sure.

  <div id="chapternav">[list-pages option='menu_order' exclude='3,25']</div>

  I created a div, and gave it an id – so I could target the list-pages classes within the div without affecting the ‘global’ list-pages classes – in case you want to use the list-pages shortcode elsewhere, like say an index page.

  I selected Edit page and assigned the Menu Order number to each page so I could control the order i.e. option=’menu_order’

  I hovered over the edit buttons, in the admin, of pages I wanted to exclude from the list and that got the statement above (the div) which you paste at the end of every page you want to have it. (Note: None of the pages have parents in my example. Different classes are used for child-pages etc but concept is the same).

  Then in Appearance/Customize/CSS I did this. Tweak as you see fit.

  #chapternav {
  	margin: 0;
  	padding: 0;
  }
  
  #chapternav * {
  	vertical-align: middle;
  }
  
  #chapternav .list-pages li {
  	display: inline;
  	list-style-type: none;
  	font-size: .65em;
  	margin-top: 2px;
  	margin-bottom: 2px;
  	vertical-align: middle;
  	text-align: center;
  }
  
  #chapternav .list-pages li a {
  	letter-spacing: -.5px;
  	text-align: center;
  	vertical-align: middle;
  }
  
  #chapternav .list-pages li a:hover {
  	border: 1px solid #999999;
  	border-radius: 4px 4px 4px 4px;
  	-moz-border-radius: 4px;
  	-webkit-border-radius: 4px 4px 4px 4px;
  	padding: 3px 4px;
  }
  
  #chapternav .list-pages li:after {
  	content: " 0bb";
  	font-size: 1.5em;
  	color: #777777;
  	vertical-align: middle;
  	padding-bottom: 2px;
  }
  
  #chapternav .current_page_item a {
  	font-weight: bold;
  	font-size: 1.02em;
  }

  Hope this helps someone else.

• 

  stormvisions · Member · Sep 29, 2015 at 5:47 pm

  • Copy link

  Probably the CSS could be done more elegantly or cleaned up – I just wanted to get it done as quickly as possible.

• 

  supernovia · Staff · Sep 29, 2015 at 6:36 pm

  • Copy link

  Nicely done, @stormvisions :)