Collapsing Archives

This widget displays your archives 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 Archives 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 Archives
  3. Change the CSS as shown below
  4. Back in the left sidebar, click on Plugins
  5. When that page opens, find Collapsing Archives (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 collapsArchList.
  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).

Old Style CSS

#sidebar li.collapsArch a.self {
    font-weight:bold}
#sidebar ul.collapsArchList ul.collapsArchList:before {
    content:'';}
#sidebar ul.collapsArchList li.collapsArch:before {
    content:'';}
#sidebar ul.collapsArchList li.collapsArch {
    list-style-type:none}
#sidebar ul.collapsArchList li {
    margin:0 0 0 .8em;
    text-indent:-1em}
#sidebar ul.collapsArchList li.collapsArchPost:before {
    content: '\\\\00BB \\\\00A0' !important;}

New Style CSS

#sidebar li.collapsArch a.self {
    font-weight:bold}
#sidebar ul.collapsArchList {
    margin-left: 2px;}
#sidebar ul.collapsArchList ul.collapsArchList:before {
    content:'';}
#sidebar ul.collapsArchList li.collapsArch:before {
    content:'';}
#sidebar ul.collapsArchList li.collapsArch {
    list-style-type:none}
#sidebar ul.collapsArchList li {
   margin:0 0 0 3px;}
#sidebar ul.collapsArchList .collapsArchPost a {
    display: block; width: 110px; 
    margin-bottom: 0.5em; padding-left: 3px;}
#sidebar ul.collapsArchList .collapsArchDate {
    float: right; color: black; width: 38px;
    text-indent: 0;}

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

  1. Remove the line #sidebar ul.collapsArchList li.collapsArchPost:before {content: ‘\\\\00BB \\\\00A0’ !important;}
  2. Remove the line text-indent:-1em}
  3. Change .8em to 3px in the line margin:0 0 0 .8em;
  4. Add the line #sidebar ul.collapsArchList {margin-left: 2px;}
  5. Add the line #sidebar ul.collapsArchList .collapsArchPost a { display: block; width: 110px; margin-bottom: 0.5em; padding-left: 3px;}
  6. Add the line #sidebar ul.collapsArchList .collapsArchDate {float: right; color: black; width: 38px;text-indent: 0;}

Old Style Code

if ($showPostDate ) {
    $theDate = mysql2date($postDateFormat, 
        $archPost->post_date );
    $text .= ( $text == '' ? $theDate : " $theDate" );
}

if ($showCommentCount ) {
    $commcount = ' ('.
        get_comments_number($archPost->ID).')';
}

$link = get_permalink($archPost);
echo "          <li class='collapsArchPost'>
        <a href='$link' " . "title='$title_text'>
        $text</a>$commcount</li>\n";

New Style Code

if ($showPostDate ) {
    $theDate = mysql2date($postDateFormat, 
        $archPost->post_date );
}

if ($showCommentCount ) {
    $commcount = ' ('.
        get_comments_number($archPost->ID).')';
}

$link = get_permalink($archPost);
echo "          <li class='collapsArchPost'>
        <div class=\"collapsArchDate\">$theDate</div>
        <a href='$link' " . "title='$title_text'>
        $text</a>$commcount</li>\n";

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

  1. Remove the line $text .= ( $text == '' ? $theDate : " $theDate" );
  2. Insert the code <div class=\”collapsArchDate\”>$theDate</div> before the <a href>

And that’s it!

Digg Del.icio.us Reddit Stumble Upon

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.).