July 6, 2010

WordPress Tip: Centering the Main Menu in the Twentyten Theme

twentyten

Hello WordPress users! All of y'all know about the stunning new default theme "twentyten" that comes with the new WordPress 3.0 release. I've been working with that theme a lot through child themeing.

If you ever run into a problem/question with customizing your theme or CSS, you can always search the WordPress Codex or Forums - most likely there will have been someone else who has encountered the same or similar problem. Don't be afraid to chime in whenever you think you can help out. Most likely there are people on the forums that know less than you do that you can help out.

Centering the Main Menu in the Twentyten Theme:

By default, the twentyten menu normally floats left. if you want a centered menu, you can change your css style sheet.

[code]

/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
margin: 0 auto;
width: 940px;
display:block;
float:left;
}

[/code]

The above is a segment from the default css in twentyten. You need to take out the "float: left;" and add in "position:absolute; text-align:center;" then add a new line of "#access ul {display:inline-block;}" This will change it to the following:

[code]

/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
margin: 0 auto;
width: 940px;
display:block;
position:absolute;
text-align:center;
}

#access ul{display:inline-block;}

[/code]

Hope you enjoyed this tip. And remember always: WordPress is for lovers.
-sara

Edit: forgot to add: Make sure you include an IE fix!

put this in its own little ie.css file and conditional comment it into your header. :)

[code]
#access ul{
display:inline;
zoom:1;
}
[/code]

June 28, 2010

Adding Nav Menu Functions to Your Theme in WordPress 3.0

Nav Menu Function for WordPress 3.0 - add to theme

Here is the Admin of my implementation of the Nav Menu Function added to Servants For Haiti

As many of you already know, WordPress has just released their latest version WordPress 3.0. If your site runs on WordPress and you haven't already, Update Your Blog. If you aren't running on WordPress, this is the best time to give it a shot. You will not be disappointed. They have added so many new features and improved old ones, it is truly incredible.

One of the features they have added is the ability to have Navigation Menu function control in the admin panel. No more coding in what pages to exclude in the menu! No more downloading plug-ins to sort the menu for you!

One thing: you have to retro-fit your old themes to allow this function. (and don't forget to code it in to any new theme releases!) Here is how you do it:

1. open to your theme's functions.php
2. add this line of code in there:

add_theme_support( 'menus' );

3. open your theme's header.php (typically where your main menu will be) and replace your previous menu code

which is typically something like:

<?php wp_list_pages($args); ?> 

with:

<?php wp_nav_menu($args); ?>

Check out the codex for the different parameters you can include in your wp_nav_menu( ) here: http://codex.wordpress.org/Function_Reference/wp_nav_menu

newbie note: $args should be empty or filled with parameters from the codex.

Sara Cannon is a Design and Digital Strategy Consultant, UX/UI Designer, Creative Director, & Artist.
Have a project I could help you with? Contact me at sara@saracannon.com.

Skip to content