Quickly add a Category DropDown to Thematic 0.9

Cristian — Fri, 20 Mar 2009 08:39:05 +0000

With the launch of Thematic 0.9 we now have out of the box drop-down menus to work with. This is one of the many features added to 0.9 that was requested by the community. However sometimes one might want to replace the default Thematic menu with a menu composed with the categories and sub-categories of your WordPress installation.

Although I’ve done in the past a similar tutorial that one isn’t working anymore with the latest Thematic version so here is a quick and easy way to add a Category DropDown.

First create a ChildTheme.
Second create and then open the functions.php file that should be found in your new ChildTheme.
Third add this code to the functions.php file:

[sourcecode language="php"]

#Add a drop down category menu
function childtheme_category_menu() { ?>

add_action(‘wp_page_menu’,'childtheme_category_menu’);

[/sourcecode]

Save and test. You should now have a drop-down from your categories!

Replacing the Thematic Menu with a DropDown List of Categories

Cristian — Wed, 17 Dec 2008 03:27:54 +0000

There comes a time when you might want to use the Thematic Theme for other things then just a blog, like a magazine or a portal and it might be best suited to have the categories of your blog on top instead of your static pages. After all, you’ll probably have two static pages (about and contact) and several categories and subcategories.

I’ve seen this request twice in the forums over at ThemeShaper and I’ll now try and answer it.

I’ve created a the CatDrop Child Theme that dose just that: transforms Thematic’s menu into a magazine style category based one!

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (CatDrop and Thematic) to your server in the themes folder AND THEN ACTIVATE the CatDrop theme.

Assuming you’ve already downloaded the latest version ofThematic (at the time of the writing it was version 0.7) and uploaded it inside your wp-content/themes directory, we can start the tutorial.

We won’t modify Thematic directly, instead we’ll create a Child theme and add this functionality to it. To do just that create a directory named catdrop inside your themes folder and two files: functions.php and style.css.

We’ll start by telling WordPress that our theme is a ChildTheme of thematic add this code into style.css.

/*
Theme Name: CatDrop
Theme URI: http://cozmoslabs.com/
Description: Built on Thematic Theme
Author: Cristi Antohe
Author URI: http://cozmoslabs.com/
Template: thematic
Version: 0.1
.
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/
 
/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');
 
/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');
 
/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');
 
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');
 
/* Apply default theme styles and colors */
@import url('../thematic/library/styles/default.css');
 
/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');
 
/************************************************ Style for drop-down menu */
#header{
	z-index:99; /* IE7 z-index bug */
}
#access{
	overflow:visible;
	position:static;
	float:none;
	height:37px;
}
#menu{
	position:static;
	width: 940px;
	margin-top: 0pt;
	margin-right: auto;
	margin-bottom: 0pt;
	margin-left: auto;
 
	padding-top: 7px;
	padding-right: 0pt;
	padding-bottom: 8px;
	padding-left: 0pt;
	overflow-x: visible;
	overflow-y: visible;
	overflow:visible;
}
#menu ul{
	padding:0;
	margin:0;
}
#menu ul li ul{
 
}
#menu li{
	margin:0;
	padding:0;
}
#menu li a{
	text-align:center;
	margin:0 0px 0 0;
	width:11em;
	padding:5px;
	border-left:1px solid #6DA5D6;
}
#menu li li li a{
	background:#B5D1EA;
}
#main{
	clear:both;
}

I’ve added some stilling to the #access and #menu divs or the theme would look odd.

Next we need to create our functions.php file. Add the following code to it:


/* Create unordered lists with our categories */
function categ_menu() {
?>
<div id="menu">
<ul class="sf-menu">
	<li><a href="/" class="on">Homea>li>
 	 wp_list_categories('orderby=name&amp;exlude=181&amp;title_li=');
 	$this_category = get_category($cat);
 	if (get_category_children($this_category->cat_ID) != "") {
 		echo "";
			wp_list_categories('orderby=id&amp;show_count=0&amp;title_li=&amp;use_desc_for_title=1&amp;child_of='.$this_category->cat_ID);
 		echo "
";
 	}
	?>
ul>
div>

}
/* Add the needed style and javascript for the dropdown */
function add_to_head(){
?>	
<link rel="stylesheet" type="text/css" href="/superfish/superfish.css" media="screen">
<script type="text/javascript" src="/superfish/hoverIntent.js">script>
<script type="text/javascript" src="/superfish/superfish.js">script>
<script type="text/javascript">
// initialise plugins
	jQuery(function(){
		jQuery('ul.sf-menu').superfish({
            delay:       300,                            // one second delay on mouseout 
            speed:       'fast',                         // faster animation speed 
            autoArrows:  false,                          // disable generation of arrow mark-up 
            dropShadows: true                            // disable drop shadows 
		});
	});


}
add_action('wp_head', 'add_to_head');
add_action('wp_page_menu', 'categ_menu');  
?>

The categ_menu function is the one that generates the list of categories and the add_to_head one is adding the needed css and javascript files to out Child Theme.(you can get the files from the Child theme download). This could be easily modified to support drop-down pages for the menu but that one some other time!

And this is the way you make Thematic similar to a magazine style WordPress theme!

Cozmoslabs » menu dropdown

Quickly add a Category DropDown to Thematic 0.9

Replacing the Thematic Menu with a DropDown List of Categories