Grow your CSS skills. Land your dream job.

WordPress sidebar custom menu

  • # July 18, 2012 at 10:31 am

    My mind is kind of all over the place at the moment, I’ve added a custom menu called Navigation and placed it in the sidebar widget. How would I go about styling this custom menu??

    # July 18, 2012 at 11:07 am

    One way is to check out the outputted source code in your browser and from there figure out how to style it. You might find that WP automatically puts classes like .custom-menu to an un-ordered list when showing custom menus. I’m not saying it is exactly .custom-menu, it’s something like that usually.

    sidebar .custom-menu {
    list-style: none;
    }
    # July 18, 2012 at 12:34 pm

    Thanks for the help, need abit more information though. I have a custom menu in which I inserted to my header that looks like this.

    < ?php wp_nav_menu( array('menu' => 'Main', 'container_class' => 'nav_main' )); ?>

    Would it just be easier to do the same, add it into my sidebar.php but change the class to Navigation and style it in the way as my Main navigation?

    Has anyone styles custom menus for sidebars? if so how did you do it? I would like to know for future projects. Thanks

    # July 18, 2012 at 2:47 pm

    @AntonNiklasson is correct for styling it so you wouldn’t need to change the name of the menu. It shouldn’t effect the other. Just put that code above in sidebar.php. Although I don’t see the point in having multiples of the same menu.

    # July 18, 2012 at 3:54 pm

    Sorry, my mind is all over the place trying to come up with solutions. Sometimes I just need to step away to clear my head and come back fresh, then I usually figure out a solution. What I meant to say was change the menu from Main to Navigation and change the class. Would it be easier to add a dynamic sidebar? is that the same as using the custom menu? If so how would I go about inserting it and styling it? If anyone knows of any good tuts, that would be great.

    Thanks for the help

    # July 18, 2012 at 4:30 pm

    @johnjf Now I’m really not sure what you’re overall goal is. Seems like you want to add a custom menu that is not the same as your main navigation (home, contact) to your sidebar. Is that correct?

    # July 19, 2012 at 1:28 am

    yup

    # July 19, 2012 at 1:43 am

    @johnjf Okay, then what we stated above is how you do it. Just paste the PHP code into sidebar.php (shown here). In your css file, you can style it with the outputting CSS.

    Example

    #sidebar .nav_main
    # July 19, 2012 at 5:06 am

    I don’t think that’s the best way of doing it. WP comes with a built in widget for showing custom menus, why not use that instead? Putting the PHP code in the sidebar.php like that isn’t very flexible.

    Create a new menu in Appearance > Menus and then add the Custom Menu widget to your sidebar and select your new menu to show.

    # July 19, 2012 at 12:37 pm

    alright, lets start over now that it’s a new day. How would I go abouts making a navigation in my sidebar something like this?(vertical navigation) http://media.smashingmagazine.com/wp-content/uploads/2010/03/go-media.jpg

    example pages I would have:

    • Home
    • Forum
    • Store
    • Gallery

    and so on. I would do exactly as stated above? #sidebar .custom-menu?

    # July 19, 2012 at 2:26 pm

    @AntonNiklasson Ah, you’re right. I don’t use the sidebar so that escaped my mind.

    @johnjf I’m not sure if I can explain this any other way than I already have. Do you have any knowledge of development?

    # July 19, 2012 at 11:44 pm

    Yes, but like I said. My mind get’s all over the place and I start cross thinking things where the right idea I have in mind gets mixed with other solutions and I start over thinking. I stepped away and took a breather and thought about it slowly and broke it down. I managed to figure out what you guys are saying.

    Thanks for all the help :D

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".