Splitting page links across 3 columns using the pages widget

Posted on 2016-07-30
  • WordPress
  • Web Development
  • PHP
  • MS SQL Server
  • HTML
  • +1
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
  • 2
LVL 52

Accepted Solution

Scott Fell,  EE MVE earned 500 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, 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
<!DOCTYPE html>
<script src=""></script>
<script src=""></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,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,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 52

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Ever needed a SQL 2008 Database replicated/mirrored/log shipped on another server but you can't take the downtime inflicted by initial snapshot or disconnect while T-logs are restored or mirror applied? You can use SQL Server Initialize from Backup…
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

760 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now