Display Posts Shortcode With Offset OL Numbers List

• 

  lorelle · Member · Mar 24, 2015 at 4:08 pm

  • Copy link
  • Add topic to favorites

  Using the offset parameter for the display posts shortcode, is there a way to continue OL numbers in a list, such as offset by 50 in the second column and have the count resume with 51, 52, 53, 54…?

  I know how to do this with HTML but any luck on doing it within the OL wrapper within the shortcode or another method I’m missing?

  Thanks.

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

• 

  thesacredpath · Member · Mar 25, 2015 at 7:25 pm

  • Copy link

  Hi @lorelle, using this as a guide, I came up with the following and tested it here on my test site.

  First, I constructed the HTML in the page/post using a div around the two lists. That way the code didn’t inadvertently mess with something else, such as the sharing. Here is the HTML.

  <div id="list-wrap">
  <ol class="list-1">
  	<li>Item</li>
  	<li>Item</li>
  	<li>Item</li>
  	<li>Item</li>
  </ol>
  <ol class="list-2">
  	<li>Item</li>
  	<li>Item</li>
  	<li>Item</li>
  	<li>Item</li>
  </ol>
  </div>

  And here is the CSS to go with it.

  #list-wrap {
      display: block;
  }
  #list-wrap ol.list-1 {
      counter-reset: item;
  }
  #list-wrap ol.list-2 {
      counter-reset: item 10;
  }
  #list-wrap li {
      display: block;
  }
  #list-wrap li::before {
      content: counter(item, decimal);
      counter-increment: item;
      display: inline;
      padding-right: 10px;
  }

  See what you think.

• 

  lorelle · Member · Mar 26, 2015 at 11:12 pm

  • Copy link

  Brilliant but how do I get the CSS into the display posts shortcode. I know how to change the UL/OL styles with CSS. I don’t know how to tell the display posts shortcode to use them as the code is generated automatically. I haven’t found a way to assign a CSS class within the wrapper parameter.

  Make sense?

  What I have is:

  [display-posts category="wordpress-school-wordpress" posts_per_page="-1" order="ASC" orderby="date" wrapper="ol"]

  The wrapper is limited to OL, so…if I wrap the shortcode in a div with the CSS class….

  <div class="list-2">
  [display-posts category="wordpress-school-wordpress" posts_per_page="-1" order="ASC" orderby="date" wrapper="ol"]
  </div>

  I’ll experiment. Thanks.

• 

  thesacredpath · Member · Mar 27, 2015 at 3:07 am

  • Copy link

  Hmmm, I misunderstood and I took a look at the generated HTML for a display posts list and don’t see a way to do it. Let me know if you have any luck with your experimentation.