Twenty Ten Sidebar Menu Styling

WordPress 3 and the default twenty ten theme are a great base for a stand alone website, easy to work with and with a little knowledge you can make your website theme quite unique.

The default WordPress theme has a sidebar menu but this is hard to style, we tried a lot of different ways to style the menu, in conclusion we have taken the menu above the sidebars into a template part.

The Sidebar Menu

We have created a child theme with the code that you could use to add a sidebar menu to your own customized theme

Download the theme files from here Twenty Ten Sidebar Menu (1412)

Lets have a look at the twenty ten theme with the pure css sidebar menu activated.

There is no script code for this menu just pure css, notice the different colors for the various states, these can be changed by editing the color hex code values in the style.css file.

screenshot-3 screenshot-2

Stylesheet

Our menu needs to have it’s own class so we can style this the way we want, we called this sidebar-menu, and we have wrapped the menu in a tertiary container, here is the styles, notice the three levels for hover, these changed to give different hover values for each level.

Here is the code in the child themes style.css, to add to another theme just copy from the line /* Additional Styles from Digital Raindrops */
 

/*
Theme Name: Twenty Ten Sidebar Menu
Theme URI: <a href="http://digitalraindrops.net/">http://digitalraindrops.net/</a>
Description: A WordPress 3 child theme tutorial from Digital Raindrops.
Author: David Cox of Digital Raindrops
Author URI: <a href="http://digitalraindrops.net/">http://digitalraindrops.net/</a>
Template: twentyten
Version: V1.1.1
Tags: digital raindrops, sidebar menu, pure css
*/

@import url('../twentyten/style.css');

/* Additional Styles from Digital Raindrops */
/* Container for our sidebar menu */
#tertiary {
 float: right;
 overflow: hidden;
 width: 220px;
 margin-bottom: 20px;
}

#primary {
 clear: right;
}

/* Start Style the Sidebar Menu */
ul.sidebar-menu, ul.sidebar-menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 220px;
}

ul.sidebar-menu a {
  display: block;
  text-decoration: none;
}

ul.sidebar-menu li {
  margin-top: 1px;
}

ul.sidebar-menu li a {
  background: #121212;
  color: #fff;
  padding: 0.5em;
}

ul.sidebar-menu li a:hover {
  background: #ccc;
  color: #000;
}

ul.sidebar-menu li ul li a {
  background: #e0e0e0;
  color: #000;
  padding-left: 20px;
}

ul.sidebar-menu li ul li a:hover {
  background: #ccc;
  color: #000;

  border-left: 5px #000 solid;
  padding-left: 15px;
}

ul.sidebar-menu li ul li li a {
  background: #e0e0e0;
  color: #000;
  padding-left: 25px;
}

ul.sidebar-menu li ul li li a:hover {
  background: #ccc;
  border-left: 5px #000 solid;
  padding-left: 20px;
}

ul.sidebar-menu li ul li li li a {
  background: #e0e0e0;
  color: #000;
  padding-left: 30px;
}

ul.sidebar-menu li ul li li li a:hover {
  background: #ccc;
  border-left: 5px #000 solid;
  padding-left: 25px;
}

ul.sidebar-menu li.active >a,
ul.sidebar-menu li.selected >a,
ul.sidebar-menu li.current_page_item > a,
ul.sidebar-menu li.current-menu-ancestor > a,
ul.sidebar-menu li.current-menu-item > a,
ul.sidebar-menu li.current-menu-parent > a {
 background: #aaa;
 color: #000;
}

ul.sidebar-menu li.current-menu-parent > a
{
 background: #ddd;
 color: #000;
}

* html ul.sidebar-menu li.active a,
* html ul.sidebar-menu li.selected a,
* html ul.sidebar-menu li.current_page_item a,
* html ul.sidebar-menu li.current-menu-ancestor a,
* html ul.sidebar-menu ul li.current-menu-item a,
* html ul.sidebar-menu ul li.current-menu-parent a,
* html ul.sidebar-menu ul li a:hover {
 background: #aaa;
 color: #000;
}
/* End Style the Sidebar Menu */

 

Theme Functions

We need to tell WordPress that we want a new ‘Theme Location’ for our sidebar, so we add another location in our theme’s code.

Here is the code in the child themes functions.php, to add to another theme you waoud add the new location to the menu array.

<?php
add_action( 'after_setup_theme', 'child_theme_setup' );

/** This function will hold our new calls and over-rides */
if ( !function_exists( 'child_theme_setup' ) ):
function child_theme_setup() {

 /*
 We want a Second Navigation Bar
 This theme uses wp_nav_menu() in two locations.
 */
 register_nav_menus( array(
  'sidebar' => __( 'Sidebar Custom Menu', 'twentyten' ),
 ) );

}
endif;

 

Sidebar Menu

We created a new file navigation-sidebar.php, this is our template part that we will call from sidebar.php, notice that we have put the arguments into an array to make it easy for you to extend the arguments, ‘fallback_cb’ tells WordPress that if no menu has been set in the ‘theme_location’ (sidebar), then to return and display nothing.

<div id="tertiary" role="complementary">
 <?php
   $defaults = array(
     'fallback_cb' => '',
     'menu_class' => 'sidebar-menu',
     'depth'    => 0,
     'theme_location' => 'sidebar',
     );
  wp_nav_menu( $defaults );
 ?>
</div><!-- #tertiary sidebar menu area -->

 

Sidebar File

Next we added a call to our template part in the themes sidebar.php, we added after the comments and before the primary sidebar code.

<?php /* We will add our sidebar menu here before the default content  */
 get_template_part( 'navigation' , 'sidebar' );
?>

 

The Menu

Create a new menu and call it whatever you want, we have called ours sidebar-1, then in the theme locations assign the menu to the sidebar, remember to save at each step.

screenshot-4

That is it all done, this is one way of styling the sidebar menu, we would like to see or hear about other methods.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

19 thoughts on “Twenty Ten Sidebar Menu Styling

  1. Pingback: HRxMedia

  2. This seems like an excellent concept. How would you make the submenus show/hide? I had this in joomla but haven’t yet in wp. Would this be possible? The way I would envision it is:

    all menus closed.
    When you click a menu with submenus it opens them. at least 3 levels.

    Thanks for this excellent tutorial.

    John

    • This is possible with a script, I did look at this but the script I found was a little jerky.

      I was unable to style the built in WordPress plugin as it is nested in a sidebar plugin list, the menu element on the plugin is the same as the main div.menu

      I will re-visit this and if anyone else manages it I will create a follow up post, Artisteer have a script that does this I will look at that as well.

      Regards

      David

  3. How can I move the header menu dropdown items to a sidebar menu like this instead? (one which lists child pages depending on which item in the header menu is clicked)
    Thx

  4. Hi There! Thanks for the great tutorial!

    Is there any way to move the text a little bit inward? I’ve switched the side-bar to the left and would like the text to be in line with the top menu.

    Thanks a lot.

    • Hi Leilynn78,

      Look for the Style.css in your theme folder.

      Look for the following code

      #container {
      float: left;
      margin: 0 -240px 0 0;
      width: 100%;
      }
      #content {
      margin: 0 280px 0 20px;
      }
      #primary,
      #secondary {
      float: right;
      overflow: hidden;
      width: 220px;
      }

      And replace it with

      #container {
      float:right;
      margin-right:-260px;
      width: 100%;
      }

      #content {
      margin: 0 280px 0 20px;
      }

      #primary, #secondary {
      float:left;
      clear:left;
      margin-left: 10px;
      }

      Good Luck!

  5. I tried this in my twenty ten theme, but I still see the dropdowns. I’m trying to have the sub nav appear in a sidebar. WHat am i missing?

  6. Thank you so much for this!
    I was looking for a solution for a long time on how to highlight the current menu position in the sidebar menu – after following the instructions here, I was able to implement on one of my custom themes.
    Although, my ideal solution would be using the “custom menu widget” since I would like different menus of various pages (using widget logic). If there’s a way – I’m interest to know.
    Otherwise, I’m trying to work out how to isolate the the 1st tier css from the 3rd tier css. (when selecting a menu item, both selected and “grandfather” share the same styling).
    Thanks,
    /y

  7. I did as you say and my sidebar menu is showing on the left (I changed it) but it is below my content like halfway down the page. Any reason for this? Thank you.

  8. I have done what you suggest and on my website the menu is vertical and in the sidebar but other than that it is as if the styling is not registered. What have I done wrong? Please help!

  9. http://mysitemyway.com/docs/index.php/Page_Templates
    I am trying to figure out how to implement a feature I see on the MySiteMyWay theme Construct that they call “feature tour” page template but is really just creates a special “sidebar” menu with a page and all of its children. I am not a developer but rather a designer…does looking at that code help you figure out how to tweak this? Seems to me I could get the “feature tour” function with your plan but have more flexibility.

    Example page with menu:
    http://themes.mysitemyway.com/?theme=Construct

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More

Posted in Twenty Ten

asc3.png

It is strange that there is no option to reverse the display order of the posts on the category page, when we select a category the list is the same as a blog, in descending order newest to oldest. That … Continue reading

Read More