Because my previous post (WordPress: Sort Posts by Multiple Fields) was one of my most popular posts, and because I have realized since then that the solution it proposes is an inadequate one, I felt the need to write an update. I don’t want to be spreading bad information, and for a blog with any significant number of posts, that solution is untenable.

As progzy points out, sorting by multiple fields can be accomplished using the `posts_orderby` filter hook, which uses MySQL directly to sort the posts, instead of getting all the posts from the database into a gigantic array, and then sorting them with php code. Here’s how to do it.

Writing an orderby Function

You’ll need to write a function that returns a SQL fragment represented as a string, and then connect it to the filter hook. The SQL fragment is the `ORDER BY` segment of the SQL query that gets your posts from the database. See the MySQL Documentation on sorting for more info on this.

Here’s an example of a custom sorting function:

function order_by_multiple( $orderby) {
  return "post_date ASC, post_title DESC";
}

The above would sort the posts by date in ascending order first, and secondarily by title in descending (reverse) order.

Only Sort on a certain page

You can also make this much more complex, if you want to. One important way is by using the different “Conditional Tags” WordPress provides. Here’s an example that only applies the custom sort on the home page:

function order_by_multiple( $orderby) {
  if (!is_home()) {
    return "post_date ASC, post_title DESC";
  }
}

Hook up the sort function

Then, once you have your ordering function written, you just need to hook it into the WordPress code like this:

add_filter("posts_orderby", "order_by_multiple");

Make the second string argument there match your function name, of course (it doesn’t have to be the same name as mine, it can be anything). And you can have more than one function hook into the same hook. They will be executed in the same order they are added. In that case, the `$orderby` argument that’s coming into the function is the existing SQL fragment. So you could add to it, remove something from it, etc.

Use Debug Query to help figure out what to return

So the question is, how do you know what to put in your SQL fragment string? If you know your SQL well, you might be able to figure it out by intuition/trial-and-error. For the rest of us, there is a very helpful WordPress Plugin called Debug Queries which will print out all of the MySQL queries that are run for every page you visit (only for logged-in admins, of course. It’s just a debugging tool for use while developing).

If you install it, it will print out many queries per page. You have to look for the one that’s querying for posts. In my testing, mine looks like this:

SELECT SQL_CALC_FOUND_ROWS wp_posts.* FROM wp_posts (...)

The important part is the `FROM wp_posts`. That means you’re selecting rows from the posts table. So if you have plugins or metadata that you’re selecting on, you will see them in that query, and it may help you figure out what incantation you need to put in that `orderby` string.

If you need to sort by category, tag, custom meta-data, etc. as one of your sort values, you may need to alter your MySQL query even more, perhaps using other hooks (very similar to the `posts_orderby` hook), such as `posts_join`, `posts_where`, etc. Each of these modify different parts of the query.

Beyond that, if you still need help figuring out how to get the exact set of posts in the right order, you may need to read up on MySQL in general and learn how to manipulate the queries in more detail. Good Luck!

Please see the above link for a much more efficient way to sort by multiple fields.

I was recently creating a star-rating system for a client, and we were sorting the reviews (or “posts”) by the number of stars. The problem that came up was that with a 5 star system, and increments of half-stars, you will necessarily end up with many of the ratings being equal. We wanted to be able to control the exact order the reviews were shown in the case of a tie. Here’s how I did it.

Adding a “Priority” Custom Field

The first step was to add a custom field called “priority”, which would act as the tie-breaker.  Basically, if two posts have the same star rating, we’ll check the priority and see which one is higher, and that one will be displayed first.  I was using the Flutter plugin, so adding another custom field was as simple as clicking a few buttons in the admin panel.

Custom Query

Sorting by a single field is relatively easy.  You would create a custom query for the posts by using something like this (to sort alphabetically):

query_posts("orderby=title&order=ASC");

Using Flutter’s syntax for sorting by its custom fields, we’d use:

query_posts("customorderby=x_stars-overall-rating&order=DESC");

Refining the Order with usort()

But you can’t sort by more than one field using the above methods.  That’s where usort comes in.  PHP has a function called usort() which sorts an array based on a custom function which “compares” the two array items in any way you like.  So all we need to do is run our array of posts through a function which does the more complex comparison using both the “stars” field and then the “priority” field for tie-breakers.

First, we insert this in the category listing page (or whichever page you’re working on) to run the custom sort function:

usort($wp_query->posts, 'review_tie_breaker');

The first argument in the function is the array of posts created by the default query in WordPress.  The second argument is the name of our custom sort function, which is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function review_tie_breaker($a, $b) {
   // get the star value for each 
   $a_stars = get_post_meta($a->ID, 'stars-overall-rating', true);
   $b_stars = get_post_meta($b->ID, 'stars-overall-rating', true);
   // if it's not a tie, return which has more stars
   if ($a_stars != $b_stars) {
      return ((float)$a_stars > (float)$b_stars) ? -1 : 1;
   }
   // else, if they are tied, go to the priority tiebreaker...
 
   // get the priority value for each
   $a_priority = get_post_meta($a->ID, 'rating-priority', true);
   $b_priority = get_post_meta($b->ID, 'rating-priority', true);
 
   // if a priority value has not been entered, default to 0
   $a_priority = ($a_priority == '') ? 0 : (int)$a_priority;
   $b_priority = ($b_priority == '') ? 0 : (int)$b_priority;
 
   // if the priority is also equal, just return as a tie
   if ($a_priority == $b_priority) {
      return 0;
   }
   // if not, we return the priority comparison
   return ($a_priority < $b_priority) ? -1 : 1;
}

How the Tie-Breaker Function Works

The way the custom sort function works is by comparing two elements of the array ($a and $b, above), and deciding which one is “greater than” the other.  If $a is greater than $b, we should return a value of 1.  If the opposite is true, we return -1.  If they are tied, we return 0.  The above function uses ternary operators to compare first the star ratings and then the priority values.  If the stars are not tied, it just returns which has the higher star rating, and never gets to the tie-breaker phase.  But if they are equal, we then compare the second criteria.

There is also a check to make sure the “priority” field has a value.  This is so that the user is not forced to input a value for every single review, just the ones that need to be tweaked.  Using this system, all that is required to bump a review up above another review with an equal star-rating is to insert a “-1″ in the priority box.

I used this for a star rating system, but it could be used for any number of applications.  For example, if you wanted to order your posts by author, but for each author make sure they are in chronological order.

The Problem

There’s no reason to re-invent the wheel, and there are already several tabs implementations written as jQuery plugins, including the jQuery UI tabs widget. The problem with these is that most (if not all) of them require the markup to be set up in a different way than we have available with our WordPress-outputted sidebar markup.

To illustrate, WordPress by default outputs the sidebar with markup that is structured something like this:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="sidebar-1">
  <ul class="sidebar-list">
    <li id="widget-1" class="widget widget-class-1">
      <h2>Widget 1 Title</h2>
      <p>...content...</p>
    </li>
    <li id="widget-2" class="widget widget-class-2">
      <h2>Widget 2 Title</h2>
      <p>...content2...</p>
    </li>
  </ul>
</div>

The various jQuery tabs plugins all require the markup to be strutured like this (notice the titles moved to the additional list at the top, with anchor tags corresponding to the ids of the respective widgets:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="sidebar-1">
  <ul>
    <li><a href="#widget-1">Widget 1 Title</a></li>
    <li><a href="#widget-2">Widget 2 Title</a></li>
  </ul>
  <ul class="sidebar-list">
    <li id="widget-1" class="widget widget-class-1">
      <p>...content...</p>
    </li>
    <li id="widget-2" class="widget widget-class-2">
      <p>...content2...</p>
    </li>
  </ul>
</div>

The Solution

While it would be possible to alter the PHP code to output the list above the widgets (although, I looked into this solution and was not able to find a hook that would allow it without altering the core), we can just use some custom jQuery to dynamically add the list before invoking the tabs plugin.  This method also has the advantage that it makes our tabs more unobtrusive.  If javascript is disabled, the page will look exactly as it would with the standard sidebar widgets, but if javascript is available, we’ll fix the markup and add the tabs all at once with our jQuery code.

The Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$(document).ready(function() {
   // first, we select the sidebar
   $('#sidebar-1 .sidebar-list').each(function() {
      // each child of the sidebar element will be a widget, and will become a tab
      var widgets = $(this).children();
 
      // we'll build the list of titles, starting with the opening tag
      var titleList = '<ul>';
 
      //for each widget in the sidebar:
      widgets.each(function() {
 
         // save the title of the widget
         var widgetTitle = $(this).children('h2').text();
         // then hide it since it will be displayed in the tab
         $(this).children('h2').hide();
 
         // create a new list item for the tab, linking to this widget's id
         var listItem = '<li><a href="#'+$(this).attr('id')+'">'+widgetTitle+'</a></li>';
         // add the list item to the list we're building
         titleList += listItem;
      });
      // close the list now that we're done going through each widget
      titleList += '</ul>';
 
      // add the title list to the beginning of the sidebar
      $(this).before(titleList);
   });
 
   // apply the tabs plugin
   $('#sidebar-1').tabs();
});

Explanation

The comments in the code should make the solution pretty self-explanatory.  This will take all the widgets in the selected sidebar and create tabs for them.

There are some things you’ll have to be careful about if you use this code.  First, you’ll have to change the selection for the sidebar div (line 3 above, as well as in the second-to-last line) to match yours.  This assumes you have your sidebar list wrapped in a div (required by the tabs plugin), so if you don’t, you will need to add that, either in the theme itself or with jQuery( using .wrap() ). Also, in the two places you see ‘h2′, this is assuming that the titles of the widgets are in <h2> tags.  You may need to select a different tag if your theme displays the widget titles differently.

Also note that this will create tabs for all the widgets in the sidebar.  Making it only apply to specific widgets is possible, but a bit more complicated.  Luckily, with WordPress 2.8, the sidebars/widgets interface is much improved.  One solution would be to create multiple ‘sidebars’ that stacked on top of each other in the sidebar area of your theme, and apply the above tab-ifying code to one or more of them individually.

I also upgraded to the latest Pods release (1.6.5), which will allow some nifty behind-the-scenes magic to happen.

That’s all.  Carry on.

I’m going to show you how (and why) I did NOT use that feature to create my customized home page.

Here’s what I wanted:

1. A unique page for the home page, including a few of the latest posts (displayed differently than on the main blog page)
2. The main blog page to be located at “url.com/blog”, showing the default latest posts (assuming permalinks are turned on)
3. All other dynamic archive pages shown by month, tag, category, etc., should be shown using the same template as the main blog page, without creating any duplicate files

Here’s how I did it:

home.php

Instead of using the admin interface to designate a specific file for your home page, you can use WordPress’s built-in template hierarchy.  This method has the advantage that if you’re building this theme for the public, it will automatically behave how you want it to, instead of having to instruct the user to alter their settings.

To do this simply design your home page’s php/html/css, and name it home.php.  That’s it –  “home.php” takes precedence over “index.php”.

Custom loop

WordPress shows blog posts in what they call “The Loop”.  The Loop works by doing the following:

1. The query — gets a set of posts based on what page we’re viewing.  Usually this is automatic, using the URL (e.g. “?p=138″ or “/category/news”).
2. “if(have_posts()):” — just like it looks, it makes sure the query got at least one post.
3. “while(have_posts()):” — keep doing the loop until we don’t have any more posts.
4. “the_post();” — this basically “loads up” the current post in the loop so that all the template tags associated with the post will reference this specific post from this specific query.
5. Then comes the markup output for each post.
6. “endwhile; endif;” — the end of the loop.

So, in order to customize the Loop, there are two main things we can do.  One is to make a unique query, and the other is to create a unique layout structure inside the loop.

For my home page, I wanted only the 2 most recent posts rather than the number set in the admin panel that would be used for the main blog page.  I added a simple counter and put this code in the appropriate spot in home.php:

1
2
3
4
5

$i = 0;
if(have_posts()) : while(have_posts() && $i<2) : the_post();
   // html output, template tags, etc go here
   $i++;
endwhile; endif;

index.php

In the aforementioned template hierarchy, index.php is the default template for all blog pages, and in the absence of home.php it would be the home page as well.  So I used index.php to put my main, default loop.  But how do we get index.php to show up at “url.com/blog”?

This is the part that I have never seen anywhere else, and what prompted me to write this post.  What I did was use index.php for its special status in the template hierarchy, and ALSO used the same file as a Page Template.  To use index.php as a template, just add the magic keyword/comment at the top, like this:

1
2
3

<?php /*
Template Name: blog
 */

Now, create a blank Page in the admin panel titled Blog, and assign the ‘blog’ page template to it.  The title will still be used to display the title on the page, and assigning the ‘blog’ template to it makes it use index.php as the page template.

Custom query

So now the url for the blog is right, but it’s displaying the blank page created in the admin instead of the default loop of latest blog posts.  To remedy that, we put a conditional test at the top, and if this is the blog page, we “reset” the query so that it contains all the posts.

1
2
3

if(is_page('blog')) {
   query_posts("");
}

The “query_posts” function creates the query, as mentioned above.  Passing an empty string as the argument makes sure we get all the posts.  We put this above the start of the Loop, to override the automatic query that is just returning the one ‘post’, in this case being the blank Blog page.

Fixing the pagination

There’s one other quirky problem we have to deal with now.  The flaw is in the empty query.  It works, but when you get to multiple pages worth of posts, the paging will not work right.  When we click the “next page” or “page 2″ link, the page number we’re going gets passed to the database as part of the query.  When we override the query with a blank one, we also override the page information, so we always end up on page 1.  To fix this, we have to find add a little test to find out the proper page, and add that in to our custom query.  After adding the paging fix, our custom query looks like this:

1
2
3
4
5
6

if(is_page('blog')) {
   if (get_query_var('paged'))
      $paged = get_query_var('paged');
   else $paged = 1;
   query_posts("paged=$paged");
}

“get_query_var(‘paged’)” gets the paging information from the original query that we’re about to override.  If it’s there, we use it, and if not, we assume we’re on page one.  Now you can write a spiffy Loop below this and it will be used for all blog post listings, including the default one at “/blog”

I hope this was helpful to someone!

The portfolio section is empty as of now, as I am in development of a new structure for it using the Pods CMS plugin for WordPress.

I’ve decided to concentrate on WordPress development for several reasons:

• WordPress is one of the most popular blogging and CMS systems out there today.
• In the hands of an expert, WP can be extremely flexible.
• WP is easy to get started with, but difficult to master.  Inexperienced users often require expert assistance in customization.
• I’m already using it for this site, and have at least one more site in development using it.
• The skills used in creating wordpress themes (XHTML, CSS, PHP) are all applicable to generic web design uses – I’m not boxing myself in.

The plan for now is to keep practicing with custom wordpress themes.  First up is a redesign of this site.  Yep, it’s only a couple of weeks old and it’s already on the chopping block.  What can I say?  Sometimes I’m a perfectionist.

My point will be made more easily with an example:  I wanted to show the links on my “Links” page in boxes, with linked title and images, and a short description, all controlled by CSS classes.

WordPress offers a “template tag” (that is, PHP function) for theme creators to display the list of links added via the admin panel.  You can put it anywhere in your templates (for example, in the sidebar) and it will automatically keep the list up-to-date:

1

wp_list_bookmarks();

That function generates an unordered list of link categories, with sub-lists of each link, complete with CSS styles assigned so that you can add a custom style.  But, say you (like me) don’t want the categories, just the links please.  And can I have it show the images associated with the links as well?

To this end, the WordPress developers have included a large range of optional arguments for the function above, so you can include or exclude categories, decide whether to format the list as an unordered list (<ul>) or other custom HTML tag, whether to show the images and descriptions, etc:

1

wp_list_bookmarks('categorize=0&title_li=&show_images=1&show_description=1');

Pretty good, but what if I want even more control (I usually do )?  The next-deepest level of under-the-hood-ness allows you to get the list of links, store it in an array, and then loop through the array using a simple PHP foreach loop that outputs the link data in whatever custom format you need.  It’s easier than it sounds.  Here’s the final code I used for my links page:

1
2
3
4
5
6
7
8
9
10

<?php
$myLinks = get_bookmarks();
foreach($myLinks as $myLink) {
?>
   <div class="linkBox">
      <a href="<?php echo($myLink->link_url); ?>"><img src="<?php echo($myLink->link_image); ?>" /></a>
      <h3><a href="<?php echo($myLink->link_url); ?>"><?php echo($myLink->link_name); ?></a></h3>
      <p><?php echo($myLink->link_description); ?></p>
   </div>
<?php } ?>

And of course, if needed there are more levels below this one.  You could do a loop within a loop, for example, to format each category of links with its own category heading, different colors or styles, etc.

Ahhh, the power!