Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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 54

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 54

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

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…
What if you have to shut down the entire Citrix infrastructure for hardware maintenance, software upgrades or "the unknown"? I developed this plan for "the unknown" and hope that it helps you as well. This article explains how to properly shut down …
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…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

597 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