Collapsing Categories

This widget displays your categories better than the WordPress default. This allows the list to be expanded or collapsed, reducing clutter on the sidebar. Visit WordPress plugins to get the plugin, and thank Rob Felty for his effort.

The changes I made are to separate the date from the post link. I thought the default style of having the date run together with the post name was too cluttered. Having different styles for each and separating them somewhat looks cleaner to me. Here is what you can do to get your Collapsing Categories to look like mine.

Steps to modify this widget:

  1. Install the plugin according to the instructions from its site
  2. At the bottom of the left sidebar in your WordPress administration page (i.e. Dashboard), click on Settings and then Collapsing Categories
  3. Change the CSS as shown below
  4. Back in the left sidebar, click on Plugins
  5. When that page opens, find Collapsing Categories (where you had to click Activate when you first installed the plugin). Click the Edit link that’s right next to the Deactivate link.
  6. On the right side is a list of files. Click on collapscatlist.
  7. Change the code as shown below. It is a large file; you will ignore most of it. The lines to change are in the second-to-last page (i.e. go straight to the end of the file and then press Page Up once).
  8. Go back to the list of files. Click on collapscatwidget.
  9. Change the code as shown below below. It is a large file; you will ignore most of it. The lines to change are in the second-to-last page (i.e. go straight to the end of the file and then press Page Up once).

Old Style CSS

ul.collapsCatList li.collapsCat {list-style-type:none}
ul.collapsCatList li.collapsCatPost {
       margin:0 0 0 2em;}
ul.collapsCatList li.collapsCatPost:before {content: 
        '\\\\00BB \\\\00A0' !important;} 
ul.collapsCatList li.collapsCat .sym {
   font-size:1.2em;
   font-family:Monaco, 'Andale Mono', 'FreeMono', 
        'Courier new', 'Courier', monospace;
    padding-right:5px;}";

New Style CSS

ul.collapsCatList li.collapsCat {list-style-type:none}
ul.collapsCatList li.collapsCatPost {
       margin:0 0 0 2em;}
.collapsCatPost a {
        display: block; width: 110px; 
        margin-bottom: 0.5em; padding-left: 3px; }
.collapsCatDate {
        float: right; color: black; 
        width: 43px; text-indent: 0; text-align: right;}
ul.collapsCatList li.collapsCat .sym {
   font-size:1.2em;
   font-family:Monaco, 'Andale Mono', 'FreeMono', 
        'Courier new', 'Courier', monospace;
    padding-right:5px;}";

In case you don’t feel like comparing each part, here are the changes:

  1. Remove the line ul.collapsCatList li.collapsCatPost:before {content: ‘\\\\00BB \\\\00A0’ !important;}
  2. Add the line .collapsCatPost a { display: block; width: 110px; margin-bottom: 0.5em; padding-left: 3px; }
  3. Add the line .collapsCatDate { float: right; color: black; width: 43px; text-indent: 0; text-align: right;}

Old Style Code – collapscatlist

if ($showPostDate) {
  $theDate = mysql2date($postDateFormat, 
                  $post->post_date );
  if ($postDateAppend=='before') {
    $linktext = "$theDate $linktext";
  } else {
    $linktext = "$linktext $theDate";
  }
}
    $posttext.= "<li class='collapsCatPost'>
        <a $self href='".get_permalink($post).
        "' title='$title_text'>$linktext</a></li>\n";
    } 
}
// close <ul> and <li> before starting a new category

New Style Code – collapscatlist

if ($showPostDate) {
  $theDate = mysql2date($postDateFormat, 
                  $post->post_date );
  if ($postDateAppend=='before') {
    $linktext = "$theDate $linktext";
  } else {
    $linktext = "$linktext";
  }
}
    $posttext.= "<li class='collapsCatPost'>
        <div class=\"collapsCatDate\">$theDate</div>
        <a $self href='".get_permalink($post).
        "' title='$title_text'>$linktext</a></li>\n";
    } 
}
// close <ul> and <li> before starting a new category

In case you don’t feel like comparing each part, here are the changes:

  1. Remove the text $theDate from the line $linktext = “$linktext $theDate”;
  2. Insert the code <div class=\”collapsCatDate\”>$theDate</div> before the <a href>

Old Style Code – collapscatwidget

$title = empty($instance['title']) ? ' ' : 
apply_filters('widget_title', $instance['title']);
echo $before_widget . $before_title . 
        $title . $after_title;
echo "
    \n"; if( function_exists('collapsCat') ) { collapsCat($instance); } else { wp_list_categories(); } echo "
\n"; echo $after_widget;

New Style Code – collapscatwidget

$title = empty($instance['title']) ? ' ' : 
    apply_filters('widget_title', $instance['title']);
echo $before_widget . $before_title . 
        $title . $after_title;
echo "<ul id='collapsCatList'>\n";
   if( function_exists('collapsCat') ) {
    collapsCat($instance);
   } else {
    wp_list_categories();
   }
echo "</ul>\n";
echo $after_widget;

In case you don’t feel like comparing each part, here are the changes:

  1. Remove the text $this->get_field_id plus the parentheses

And that’s it!

Digg Del.icio.us Reddit Stumble Upon

One Response to “Collapsing Categories”

  1. Archives and Categories Widgets •• Some Blog Site Says:

    […] can visit the Collapsing Categories page or Collapsing Archive page to read more about them, including steps how to modify the widgets to […]

Leave a Reply

Comment moderation: please do not submit your comment multiple times, as comments are not posted until I approve them. If your comment never appears, that probably means that I didn't like your comment (maybe off topic, maybe spam, maybe not family-friendly, etc.).

Check this box to be notified of additional comments to this post. Notification will be sent to the email address you provided above. You can also subscribe without commenting.