Replacing the Thematic Menu with a DropDown List of Categories

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!

        

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</a>
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:

<?php
/* Create unordered lists with our categories */
function categ_menu() {
?>
<div id="menu">
<ul class="sf-menu">
	<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
 	<?php wp_list_categories('orderby=name&amp;amp;exlude=181&amp;amp;title_li=');
 	$this_category = get_category($cat);
 	if (get_category_children($this_category->cat_ID) != "") {
 		echo "<ul>";
			wp_list_categories('orderby=id&amp;amp;show_count=0&amp;amp;title_li=&amp;amp;use_desc_for_title=1&amp;amp;child_of='.$this_category->cat_ID);
 		echo "</ul>";
 	}
	?>
</ul>
</div>
<?php
}
/* Add the needed style and javascript for the dropdown */
function add_to_head(){
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/superfish/superfish.css" media="screen">
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/superfish/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/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
		});
	});
</script>
<?php
}
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!

Further Reading:

1. Use Wordpress as a CMS with Thematic Theme- Part1
2. Add “Featured Posts” to your Thematic child theme
3. Quickly add a Category DropDown to Thematic 0.9
4. Installing Wordpress Child Themes and Customizing the Byty Theme
5. Add a search box to the thematic menu