Replacing the Thematic Menu with a DropDown List of Categories

Thematic Menu DropDown

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!

Demo

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:

<!--?php  } /* Add the needed style and javascript for the dropdown */ function add_to_head(){ ?-->	
		<link href="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/superfish/superfish.css" rel="stylesheet" media="screen" type="text/css" /><script type="text/javascript" src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/superfish/hoverIntent.js"></script><script type="text/javascript" src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/superfish/superfish.js"></script><script type="text/javascript">// <![CDATA[
// 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  		}); 	});
// &#93;></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!

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

24 thoughts on “Replacing the Thematic Menu with a DropDown List of Categories

  1. I love the thematic theme and am planning on using it soon with the catdrop child theme, however I would only want to use this with drop down pages rather than categories, would you be able to create a summary on how to use this theme with drop down pages rather than categories?
    I really hope so, Many thanks. GC

  2. Pingback: Replacing the Thematic Menu with a DropDown List of Categories | Castup

  3. Gib – look at the command php wp_list_categories …look to replace it in your code with listing pages instead. Going to the WP codex should give you a list of the arguements you can use.

  4. Pingback: Crystalline - A crystal sharp Child Theme for Thematic | Reflection Media

  5. Pingback: Una guida a Thematic Framework | Altamente Decorativo

  6. Change this
    #
    # <a href=”/” class=”on”>Home
    # cat_ID) != “”) {
    # echo “”;
    # wp_list_categories(‘orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
    # echo “”;
    # }
    # ?>
    #

    to this

    <a href=”/” class=”on”>home

  7. nice work matey, thanks for taking the time to provide this great child theme.

    regarding a post above on how to display pages instead of categories.

    i took a wild guess and replaced everything between sf-menu with list pages…so like this.

    and it works perfectly.

  8. Hi all,
    Even with the help in these comments, I can’t work out how to get subpages to drop down as hoped.
    My code is identical to Cristi’s example, but I’ve changed the PHP to look like this, as per Jamie’s suggestion:

    <a href=”/” class=”on”>Home

    What more do I need to include?
    All help rewarded with multiferous blog postings on a subject of your choice.

    Thank you!

  9. Hi guys! I don’t know why code isn’t displayed into comments and I’ll check that out.

    Although a bit late I did make a PageDrop Childtheme that should solve all your problems related to a DropDown menu for pages: http://www.cozmoslabs.com/2009/02/12/thematic-drop-down-menu/

    @freedimensio you weren’t far from the solution, just needed to add another parameter to the wp_list_pages function, more exactly: wp_list_pages(‘sort_column=menu_order&title_li=’);

    Sorry that I didn’t answer your questions faster… It’s been a bit more them busy lately!

    Cheers!

  10. @Matteo Stagi That is really interesting! Thank you for sharing it! To be honest I disregarded Justin Tadlock’s idea when he wrote about it because of lack of sub-menus and didn’t give it much thought. Now you’ve shown us a really good way to use the menu capabilities of WordPress with minimal code! Thank you!

  11. Hi Cristi,
    maybe you can help: I want to use your byty theme and add the catdrop function to it. Waht do I have to change? I have now all three themes installed (thematic, byty and catdrop) and catrop is the one activated in wordpress. thanks a lot! Peg

  12. Hey, just stumbled upon Thematic last night and now your site – which is exactly what I’m looking for as I try a complete redesign. Regarding the comments above, I’m actually trying to do the same thing but with dropdowns for both categories AND pages. Can you just gang the code one on top of the other?

  13. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  14. I downloaded the theme and noticed that in the drop downs there is this annoying shadow 3d effect thing. It does display properly in firefox, improperly in opera, and not at all in IE. Is there anyway to get rid of it?

  15. Can you just apply this dropdown menu to another child theme inside Thematic??? I would like to use the drop down menu… but I would like to apply it to some other Thematic themes instead of starting from scratch

Leave a Reply

Your email address will not be published. Required fields are marked *


6 − = four

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>