Collapsing Categories Some Blog Site

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:

Install the plugin according to the instructions from its site
At the bottom of the left sidebar in your WordPress administration page (i.e. Dashboard), click on Settings and then Collapsing Categories
Change the CSS as shown below
Back in the left sidebar, click on Plugins
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.
On the right side is a list of files. Click on collapscatlist.
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).
Go back to the list of files. Click on collapscatwidget.
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:

Remove the line ul.collapsCatList li.collapsCatPost:before {content: ‘\\\\00BB \\\\00A0’ !important;}
Add the line .collapsCatPost a { display: block; width: 110px; margin-bottom: 0.5em; padding-left: 3px; }
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:

Remove the text $theDate from the line $linktext = “$linktext $theDate”;
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:

Remove the text $this->get_field_id plus the parentheses

And that’s it!

One Response to “Collapsing Categories”

Archives and Categories Widgets •• Some Blog Site Says:
October 30th, 2009 at 9:52 pm
[…] can visit the Collapsing Categories page or Collapsing Archive page to read more about them, including steps how to modify the widgets to […]