Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>If you don't use the Description field of the categories, ordering can also be done by entering a number in each Description field, and subsequently use Javascript / jQuery to order based on this numbering.</p> <p>The wp_list_categories function has a <strong>use_desc_for_title</strong> argument which you can set to true:</p> <pre><code>wp_list_categories('use_desc_for_title=1'); </code></pre> <p>The category description is now set to the <code>&lt;a&gt;</code> tags's title attribute in the resulting html.</p> <p>So if you use numbers in the description field, the resulting category listing may look like this:</p> <pre><code> &lt;ul id="category_list"&gt; &lt;li&gt;&lt;a href="#" title="3"&gt;Category C&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="1"&gt;Category A&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="2"&gt;Category B&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Now you can sort the list, for example with jQuery at the document.ready event. If you use subcategories in a hierarchical way, use a recursive function like this:</p> <pre><code>$( document ).ready( function() { sort_list_recursive( $( '#category_list' ) ); } ); function sort_list_recursive( parent ) { var lst = parent.children( 'li' ); lst.sort( function( a, b ) { var _a = a.getElementsByTagName( 'a' )[0].title; var _b = b.getElementsByTagName( 'a' )[0].title; return _a &gt; _b ? 1 : -1; } ).appendTo( parent ); lst.each( function() { $( this ).children( 'ul' ).each( function() { sort_list_recursive( $( this ) ); }); }); } </code></pre> <p>N.B.</p> <ul> <li>Don't use a 0 (zero) in the description field, it will be ignored and set to null</li> <li>After sorting you might want to get rid of the title attributes which are set to numbers, this can easily be done with jQuery.</li> </ul>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload