Web Design and Development

Add Sorting to Websimon Tables (WordPress Plugin)

the Frequently Asked Questions…
  • What’s the best table plugin for WordPress?
  • How can I add sortable tables to WordPress posts and pages?
  • Can the Websimon Tables plugin sort data by columns?
  • Is there a WP-Table alternative plugin aside from WP-Table Reloaded?

and The Digital FAQ answers…

Websimon Tables is an excellent alternative to the popular WP-Table Reloaded plugin. In addition to having more options for CSS styling, Websimon’s tables can also be customized individually in the WordPress admin. By contrast, WP-Table only allows for a single site-wide style, by editing its CSS files.

You can also run both WP-Table Reloaded and Websimon at the same time, since neither share coding (not forks).

Unfortunately, Websimon Tables is still a relatively new plugin — having only been released in December 2011 — and a number of planned features are still incomplete or unimplemented. One of those much-desired features is the ability to sort columns like WP-Table can do.

By following this guide, you can add a jQuery tablesorter function into Websimon Tables.

If this article is helpful, please share it with others, using these links:
And if you've found our site to be as helpful as a magazine, book or class, then consider a small donation to support what we do here. Or sign up as a Premium Member for only $20. Thanks!

Download the WordPress / jQuery Plugins

For your convenience, I’ve packaged the required files as a download available in our forum. If you’re not already part of our community, simply register as a Free Member — or better yet, a Premium Member — to access the files.

Please note that these files are confirmed as functional, and are not modified beyond the scope of adding sorting functions. In other words, we’ve not sneakily added any obnoxious footer links or nonsense of that nature, as many unscrupulous sites tend to do.

If you’re determined to do everything manually, then feel free to download the requires files from the official sites:

Add jQuery to WordPress

This modified Websimon Tables (v1.3.2) plugin is confirmed to work with jQuery 1.4.2+ and WordPress 2.9.2+. The current version of jQuery is 1.8.1, and the current version of WordPress (3.4.2) comes with jQuery 1.7.2.

Upload the jquery-latest.js and jquery.tablesorter.js files to your server. Where you place these files is a matter of personal preference. (I put all scripts, fonts, and similar code-stuff in a “script” folder at the domain root level.)

In your theme header, you’ll need to add the following lines in the HEAD:

… and then alter it to match your domain name and script folder location. Those lines of code cause jQuery and the jQuery Tablesorter scripts to load.

Important: The jQuery file must be named “jquery-latest.js” for the table sorter to function — it’s apparently hard-coded into the script library somewhere. As of this post, you can take the current version of jQuery (1.8.1) and simply rename the .js file.

Add jQuery Tablesorter to Websimon Tables

Note that this step can be skipped if you’re using our download. The information below simply documents how we’ve altered the files…

Unzip the Websimon Tables plugin to your local computer, and locate the file websimon_tables.php. On line 68 of the file replace this:

with this:

… and then you’re finished. If you want too “install” the plugin from within WordPress, you’ll need to re-zip the files. Or simply upload the entire modified Websimon plugin folder to your WordPress plugins folder via FTP. Once the plugin is installed/uploaded, activate it.

Configuring Websimon Tables

Although a sorting ability has been added, a matching visual cue has not been added. Such a cue is useful for notifying viewers that a table can be sorted. Rather than further modify the plugin code, you can simply use HTML symbols in the table header rows, when creating/editing a table in the wp-admin.

Simply copy and paste these: ▴▾

Sample table:

Column ▴▾Column ▴▾Column ▴▾Column ▴▾
Lorem ipsum.Alpha beta gamma.Lorem ipsum.Lorem ipsum.
Sample text. This is a much longer sample to show thread wrapping.Sample text.Sample text.Sample text.

jQuery Troubleshooting

Depending on your existing theme and plugins, you may already have jQuery installed — especially if you’re using a feature-rich theme, or have multiple plugins installed. This can cause jQuery problems.

By default, WordPress comes a version of jQuery inside the wp-includes/js/jquery folder, for use by the WordPress admin panel. If a theme requires jQuery, developers may opt to load the default WordPress version. Other devs will simply include another copy. The same is true of plugins.

Sadly, it’s not uncommon for a WordPress site to have multiple copies of jQuery being loaded, which causes slower page load times. Furthermore, it can cause jQuery conflicts.

A common issue site owners have with jQuery is when multiple versions are loaded. Although newer versions of jQuery have deprecated several functions found in the older versions, those functions have thus far not been removed. So older scripts/plugins still work fine with a newer jQuery. The problem occurs when a function only found in the newer jQuery libraries is needed by a script, yet an older version is loaded. Or more accurately, the the older version is loaded last!

It’s important that you audit your site, and try to reduce the jQuery calls to a single request — and using the latest version. Though you can look in the header of a theme, jQuery calls are sometimes initiated from within a plugin. View the source code of a page that’s been loaded into a browser in order to see the locations and quantity of jQuery loads.

Multiple requests can be reduced either by editing themes and plugins, or by using your domain’s primary .htaccess file to redirect requests to a single location.

It’s also best to load the minified (compressed version) of jQuery.

Parting Thoughts

If you have any issues with modifying or using this plugin, feel free to post a question in our forum. Several experienced WordPress developers are participants in the forum, and can give guidance on both basic and advanced issues.

If you’re still using one of those so-called “unlimited” hosts, then odds are that your site is loading much slower than it needs to. If your WordPress site takes longer than 2 seconds to load, you have problems. Consider moving to a new, better-quality host — many of which are actually cheaper than what you’re using now! Read our web hosting review.

And if you’re still struggling with finding that perfect WordPress theme, take a look at the low-cost themes available from ThemeforestStudioPressGabfire or Elegant Themes.

Have comments or feedback? — Be sure to share your thoughts in the forum

If this article is helpful, please share it with others, using these links:
And if you've found our site to be as helpful as a magazine, book or class, then consider a small donation to support what we do here. Or sign up as a Premium Member for only $20. Thanks!

Copyright Notice: All guides, articles and editorials found on digitalFAQ.com are copyright by The Digital FAQ and/or the respective authors. Articles may not be copied, borrowed, full-quoted or reproduced in any manner, online or in print, which includes blogs and forums, without the written email consent of Site Staff (which may or may not be given, for free or fee). Know that digitalFAQ.com staff does routinely monitor online plagiarism, and we do send takedown notices to site admins and/or web hosts (DMCA et al legal actions) as is necessary. If you would like for others to read articles found on The Digital FAQ, simply link to our content. (Note: Printouts for personal use is specifically allowed.)


Page Sponsored By:   (Advertise Here) / Web