This is Alpha, the first-born, when he was 2YO.
This is Beta, the second-born, when he was about 2YO.
This is Gamma, the third-born, when he was about 18MO.
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 "
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!
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 […]