Since I’ve got a lot of quiestions regarding this subject I’ve decided to write a tutorial about it. So this tutorial is how to make a dropdown menu for Magazeen theme, like the one you see at the top of this page. This is the way I did it, but there is probably a better way to do it. I hope this helps you.

These are the things we are going to need to finish this tutorial:

1. First and foremost Rayns Suckerfish Drop Down Menu (RSDDM)
2. Any text editor ’cause we’ll have to do some code editing
3. Good will

For starters download RSDDM. Unpack it, using FTP upload it to wp-content/plugins folder. Login to your Wordpress admin and activate RSDDM (I hope I don’t have to explain this, if you have problems read the instructions from the page we’ve downloaded RSDDM from).

What did we do? We’ve just installed a plugin for Wordpress that makes dropdown menus. Now we have to adjust it for the Magazeen theme.

From the folder wp-content/themes/magazeen/ open header.php file. You should find this piece of code around the line 52:

<ul class="pages">
<li<?php if( is_home() ) : ?> class="current_page_item"<?php endif; ?>><a href="<?php bloginfo( 'url' ); ?>" title="<?php bloginfo( 'title' ); ?>">Home</a></li> <?php wp_list_pages( 'title_li=&depth=1' ); ?>
</ul>

Now replace it with this code:

<ul class="pages">
<?php suckerfish(); ?>
</ul>

Ok, great, we just replaced default Magazeen menu with the RSDDM and we now have to adjust CSS to make the dropdown look like it’s a part of the theme, because if you look at it now, it doesn’t look very good. To change the CSS login to your WP Admin panel and go to Settings – > Suckerfish. When you get to there you will see something like this:

Now, enter this code in the box where it says Enter your CSS here:

#suckerfishnav {background:none;font-size:13px;font-family:Arial,Helvetica,sans-serif;font-weight:bold}
#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:20px;padding:0;margin:0 0 1px 0;width:100%}
#suckerfishnav a {display:block;color:#fff;text-decoration:none;padding:0px 25px}
#suckerfishnav li {float:left;padding:0}
#suckerfishnav li ul {position:absolute;left:-999em;height:auto;width:130px;font-weight:normal;margin:0;line-height:1;-moz-opacity:1;opacity:1;khtml-opacity:1; z-index:999; border-top:1px solid #dde4e7;border-bottom:1px solid #c2cfd5;border-left:1px solid #c2cfd5;border-right:1px solid #c2cfd5;}
#suckerfishnav li li {padding-right:1px;width:124px;border-bottom:1px solid #c2cfd5}
#suckerfishnav li li a {padding:3px 10px}
#suckerfishnav li ul li {font-weight:normal;font-family:Arial, helvetica,sans-serif}
#suckerfishnav li ul li a {font-size:13px; color:#000}
#suckerfishnav li:hover ul li a {color:#000}
#suckerfishnav li ul ul {margin:-20px 0 0 131px}
#suckerfishnav li ul li:hover {background:none}
#suckerfishnav li ul li:hover a {color:#000}
#suckerfishnav li ul li:hover li a {color:#000}
#suckerfishnav li ul li li:hover a {color:#000}
#suckerfishnav li ul li ul li:hover ul li a {color:#000}
#suckerfishnav li ul li ul li:hover ul li:hover a {color:#000}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {left:-999em}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {left:auto;background:#dde4e7;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {background:none;}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#000}

Now we should get a better looking menu, something like the one you see on this site. I won’t explain this code, it’s just CSS that defines visual look of the RSDDM.

Now this last bit is a little harder, because it depends on what you want to put in your menus, so I will try to explain it on my example. Now if you look at your page you will probably get a menu with default settings, witch will be fine for some of you, but it wasn’t so good for me. I wanted to make category Tutoriali, a dropdown menu that will show it’s subcategories.

So I’ve opened wp-content/plugins/ryans-suckerfish-wordpress-dropdown-menu/ryans-suckerfish.php. In that file you will see 6 groups of code that look something like this:

if (get_option('suckerfish_menuitem1') == 'Pages') {wp_list_pages('title_li=');}
if (get_option('suckerfish_menuitem1') == 'Pages Dropdown') {echo '<li><a href="#">Pages</a><ul>' , wp_list_pages('title_li=') , '</ul>';}
if (get_option('suckerfish_menuitem1') == 'Category') {wp_list_categories('title_li=');}
if (get_option('suckerfish_menuitem1') == 'Categories Dropdown') {echo '<li><a href="#">Categories</a><ul>' , wp_list_categories('title_li=') , '</ul></li>';}
if (get_option('suckerfish_menuitem1') == 'Home') {echo '<li><a href="' , bloginfo('url') , '/">Po&#269;etna</a></li>';}
if (get_option('suckerfish_menuitem1') == 'Blogroll') {wp_list_bookmarks('title_li=&categorize=0');}
if (get_option('suckerfish_menuitem1') == 'Blogroll Dropdown') {echo '<li><a href="#">Blogroll</a> <ul>' , wp_list_bookmarks('title_li=&categorize=0') , '</ul></li>';}
if (get_option('suckerfish_menuitem1') == 'Archives (months)') {wp_get_archives('type=monthly');}
if (get_option('suckerfish_menuitem1') == 'Archives (years)') {wp_get_archives('type=yearly');}
if (get_option('suckerfish_menuitem1') == 'Archives (months) Dropdown') {echo '<li><a href="#">Archives</a><ul>' , wp_get_archives('type=monthly') , '</ul></li>';}
if (get_option('suckerfish_menuitem1') == 'Archives (years) Dropdown') {echo '<li><a href="#">Archives</a><ul>' , wp_get_archives('type=yearly') , '</ul></li>';}

If you look above code a little closer you will see that every line begins with if (get_option(’suckerfish_menuitem1′), menuitem1 at the end points to the position of the dropdown menu. There are only 6 positions, that means that you can have maximum of 6 dropdown menus.

As you can see my first dropdown menu is at the postion 2. So to make it work I had to replace this code:

if (get_option('suckerfish_menuitem2') == 'Categories Dropdown') {echo '<li><a href="#">Categories</a><ul>' , wp_list_categories('title_li=') , '</ul></li>';}

With this:

if (get_option('suckerfish_menuitem2') == 'Categories Dropdown') {echo '<li><a href="#">Tutoriali</a><ul>' , wp_list_categories('title_li&include=7,5,14,13,10') , '</ul></li>';}

Here I have changed the name Categories to Tutoriali(Tutorials in Croatian) and then I’ve added Wordpress command wp_list_categories, whose purpose is to define witch categories will be shown in the dropdown menu. Those categories are called by these numbers 7, 5, 14, 13, 10. These numbers are the ID numbers of my categories.

Finally to make it all work I had to go to Settings -> Suckerfish

I’ve chosen Categories Dropdown from the Menu Item #2 , as you can see in the picture above. The reason I’ve chosen Categories Dropdown is because it is defined in the line I have changed in the step before (if (get_option(’suckerfish_menuitem2′) == ‘Categories Dropdown…)

So that’s about it, if any body knows a better and/or easier way to do this be sure to let me know. For any questions be sure to use the commenting system. Hope this helps. Have a nice day.