A WordPress Post Category Accordion

Posted on June 17, 2012
accordion

There are quite a few ways to showcase your posts in WordPress, but I’ve found many of the archive functions to be pretty lacking. WordPress was conceived as a blog first, and a content management system second, so if you want users to be able to browse and locate particular content you might want to do just a bit if legwork. jQuery UI always offers some quick and efficient interfaces, if we couple this resource along with some mild modifications to a pretty basic wordpress post loop, we can get a nice clean easy to use index of posts. For a bonus, I’ve added the ability to designate a root category, so you can have multiple accordion on appropriate pages, or perhaps showcase something like an article category.

The php

I’ve borrowed from a few tutorials and examples in the codex to build a fairly bread and butter loop here. Note the child_of setting here. The divs, headings and list items are designed to be super friendly for the UI accordion. You could even leave things here for a nice clean archives page.

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
33
34
35
36
37
    // Start building our HTML
    $accordion = '<div id="archives_accordion">';
   
    // Define our parent category
    $categories = get_categories('child_of=8');
   
    // Get all the children of the designated category
    foreach ( $categories as $category ) { 
   
        $currentCat = $category->term_id;
        $accordion .= '<h2><a href="#">'.$category->cat_name.'</a></h2>';
        $accordion .= '<div><ul>';
       
        // Define the current category
        $queryargs = 'cat='.$currentCat;
       
        query_posts($queryargs);
               
        // The query
        if ( have_posts() ) : while ( have_posts() ) : the_post();
            $accordion .= '<li><a href='.get_permalink().'>'.get_the_title().'</a></li>';
            endwhile;
            else:
        endif;
       
        // Destory the previous query, get ready for the next
        wp_reset_query();
       
        // End This Category
        $accordion .= '</ul></div>';
        }
       
        // End The Accordion
        $accordion .= '</div>';
       
        // Print the whole thing out
        echo $accordion;

jQuery UI

For best performance you might want some local fallbacks, but if speed is in order using the Google APIs will get us going in a snap.

1
2
<link rel="stylesheet" type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/ui-darkness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

jQuery

We’ve already done most of the work, the jQuery can be squeezed into a single neat line at this point and we’re good to go!

The Demo

The final product can be inserted into a post template or inserted directly using exec-php.


This entry was posted in Wordpress Tips and Tutorials.