Splitting page links across 3 columns using the pages widget

Posted on 2016-07-30
Medium Priority
Last Modified: 2016-08-11
Hi All

I have come across a plugin called Turbo Widgets and it's enabled me to put  my pages in alphabetical order on the home page, I just need to figure out how to code this to spread the approx 200 links across 3 columns on the same page or limit to say 50 a page.

Here is the code that Turbo Widgets generates

[turbo_widget widget-prefix=pages&obj-class=WP_Widget_Pages&widget-pages--title=SRFT+Knowledge+Base+Articles&widget-pages--sortby=post_title&widget-pages--exclude=]

And below an image showing only a handful of page links so far but will eventually have a lot more

Visual Aid
Question by:IM&T SRFT
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 53

Accepted Solution

Scott Fell,  EE MVE earned 2000 total points
ID: 41746515
There are a couple of parts to your questions and I also think some missing issues.

First, when you have a question in web development, you should provide a test page on a public facing site that we can view.  On your test page, only include the absolute minimum information to recreate your issue.

While images help show what you are seeing, we can't tell what is going on and including code snippets along with your test page is best.  Sometimes you don't have (or want to provide) a test page on a public site.  That is fine, use a playground like jsbin.com, jsfiddle or code pen and manually recreate your test case.  

As I said, you have at least two issues.  One is how to sort and the other is how to get your data to columns. There will be multiple ways to do both and I will concentrate on just one of each.   If you are not sure how any of this works, then it will be best to create separate questions for each part (sorting, columns) .

First sorting.

Assume you have a list
  <ul id="myList">
    <li>List 1 item #3</li>
    <li>List 2 item #4</li>
    <li>List 2 item #5</li>
    <li>B Middle</li>
    <li>C Last</li>
    <li>A First</li>
    <li>List 1 item #1</li>
    <li>List 1 item #2</li>
    <li>List 2 item #6</li>


Open in new window

And you want it sorted in alpha order.   Using jquery with a plug in called tinysort https://github.com/Sjeiti/TinySort
<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
  $(function() {

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <ul id="myList">
    <li>List 1 item #3</li>
    <li>List 2 item #4</li>
    <li>List 2 item #5</li>
    <li>B Middle</li>
    <li>C Last</li>
    <li>A First</li>
    <li>List 1 item #1</li>
    <li>List 1 item #2</li>
    <li>List 2 item #6</li>


Open in new window

An example of above output and full code http://jsbin.com/kibafejuce/1/edit?html,output

The plug in makes it easy but you can also code raw javascript/jquery code. To use the script, load from the cdn as shown and inside your ready function, tinysort('target_selector'); which in this case is tinysort('ul#myList>li');

Next, using multiple columns.  To make this example simple, I will just use floated elements.
To the existing code, just add css
    #myList li{

Open in new window

and working example http://jsbin.com/pevelujoro/1/edit?html,output

If you are using a grid system like bootstrap or foundation, you have some other options.

Again, it is hard to tell what you are using, but based on what you have shown, it is possible you are using a CMS like wordpress and a plugin/widget.  You may need point to the specific widget for help.

Author Closing Comment

ID: 41751847
Hi Scott

Firstly, thank you very much for your patience and detailed response, I have been away for a short while.

The above goes above my knowledge so I think it will be best i either:

1) Go back to basics and upload a copy of my site as a working example of what I need to do and as suggested separate what I want to achieve as two separate posts and work through them

2) Alternatively, I may opt to request a freelance job for someone to do this but I still need to be able to understand what is being done and how it works.

Once again thank you for your assistance!
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 41752290
Thank you for the points!

Going back to basics is a great choice if you want to figure this out on your own.  

I think you have a wordpress site and you may want to crate a sample page that you do not add to your nav with fake information.  It will still be visible to anybody that knows the url.  You can simply post the url in your new question.  

You will also want to let use know which theme (if any)  you used and where you purchased it from or how we can see what libraries and plugins are installed.  Actually, for somebody that knows html, it is easier to do this sans the CMS.

Wordpress makes it easy for non coders, but like many things in life, when they appear to be simple on the outside, they is typically some additional complexity to get it that way. Wordpress falls into that category.  

In this case, when you see code like
[turbo_widget widget-prefix=pages&obj-class=WP_Widget_Pages&widget-pages--title=SRFT+Knowledge+Base+Articles&widget-pages--sortby=post_title&widget-pages--exclude=]

Open in new window

That is an indication  of something you have to place inside your WYSIWYG editor.  Then when the page is displayed, WordPress sees those brackets and "urbo_widget widget-prefix" as a match to something that is found in a big list of functions. Then it uses that function to translate to proper html.

The answer I gave you is based on coding by hand. Until you can show more details, that is the best you can do.

If you click on the 3 dots above to the right of "Ask A Question" you can use Live or Gigs to hire somebody.  Live is for quick help working side by side via chat and a shared whiteboard.  Gigs is to hire somebody.   I suggest using Gigs to hire somebody for 5 hours of consultation that can be done by email, screenshare or chat where some work can be done by the consultant behind the scenes as well.

If you found an Expert that you like to work with you can go to their profile page and you will see towards the top, "Live", "Gigs" and "Careers".  Each with an Invite link you can use to invite them to view your requirements and bid on your project.

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In the first part of this tutorial we will cover the prerequisites for installing SQL Server vNext on Linux.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Viewers will learn how to use the SELECT statement in SQL to return specific rows and columns, with various degrees of sorting and limits in place.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question