create your own

Add a WordPress Menubar to Your Blog

76
rate or flag this page

By shibashake

There are many ways to add menubars to your WordPress blog. You can certainly modify your WordPress theme template and have unlimited flexibility in creating a menubar from scratch, but that usually requires a lot of time and work.

Here, we explore how you can easily add menubars to your WordPress blog right from your WordPress dashboard. No CSS, Javascript, or PHP knowledge required, and no editing of your WordPress theme files needed.

There are four easy ways to do this -

Screen-shot of Shiba WordPress theme with menubar.
Screen-shot of Shiba WordPress theme with menubar.


1. Create a Simple List of Links with a Text Widget

This method is simple, but the results are not very pretty, and the menubar is limited to a list of links.

  1. Click on Appearance >> Widgets.
  2. Click and open up your menubar widget area on the right column.
  3. Pick a Text Widget from the middle column and drag and drop it into the widget area on the right.
  4. Open up the Text Widget and paste the HTML code below into it. Change the HTML links and link text to your own sites.
  5. Refresh your blog and a list of links will appear in your menubar widget area.

If you are not familiar with Text Widgets, consider reading Add Google AdSense to Your WordPress Blog for a visual step by step tutorial on Text Widgets.

<div class="menubar-style">
  &nbsp;&nbsp;
  <a href="http://www.shibashake.com" target="_top">HOME</a>&nbsp;&nbsp;::&nbsp;
  <a href="http://www.shibashake.com/wordpress-theme" target="_top">WORDPRESS</a>&nbsp;&nbsp;::&nbsp;
  <a href="http://www.virtualimage3d.com" target="_top">ART</a>&nbsp;&nbsp;::&nbsp; 
  <a href="http://www.shibashake.com/HubPages" target="_top">HUBPAGES</a>
</div>
Screen-shot of the unstyled Text Widget menubar.
Screen-shot of the unstyled Text Widget menubar.

2. Use a WordPress Theme with a Built-In Menubar

There are a variety of WordPress themes that come with built-in menubars. For example the Atahualpa theme allows you to set Page Menu Bar and Category Menu Bar options by going to its Appearance >> Theme Options menu.

Using a theme with a built-in menubar will allow you to create compelling menubars for your blog with very little time and effort. In addition, the menubar will fit in well with the visual design of your entire blog because it is part of the blog theme.

However, its strength is also its weakness. If you decide to change themes later on, you will lose all the menubar settings and additions you have made in your previous theme.

In addition, different themes may provide different menubar functions, and some of them may be limited to just single links, with no drop-down menu support.

If you like the functions provided by the menubar of a given theme, you must also accept other aspects of the theme, including its visual design. Because of this, having a menubar that is integrally tied to your blog theme may limit the flexibility of other aspects of your blog functions and design.

3. Use a Menubar WordPress Plugin

This is a great way to get menubar support because it is not theme specific. You can use any WordPress theme that you like, and your menubar functions, settings, and design will move with your from theme to theme.

To find a menubar plugin, just go to your WordPress dashboard.

  1. Click on Appearance >> Plugins >> Add New.
  2. Enter menubar into the search box and hit the Search button. This will return a list of menubar plugins from the WordPress site. The first result should be the popular menubar plugin by Andrea from dontdream.it.
  3. Click on the Install link to the right and you will get a pop-up showing a description of the plugin, installation instructions, and other materials that have been packaged with the plugin including screenshots and a faq section.

WordPress dashboard screenshot for installing the menubar plugin.
WordPress dashboard screenshot for installing the menubar plugin.

4. Click on the Install Now button to the right of the pop-up. This will install the plugin.

5. Click on the Activate Plugin link and you should have your WordPress menubar.

Step 4 - Screenshot of the WordPress menubar plugin by Andrea.
Step 4 - Screenshot of the WordPress menubar plugin by Andrea.
Step 5 - Activate the menubar plugin after installation.
Step 5 - Activate the menubar plugin after installation.

To actually get the menubar to appear in your blog however is a bit more complex. Detailed instructions are available on the plugin site but basically you must -

  1. Create a directory for your menubar styles called menubar-templates under the  wp-content/plugins directory of your blog.
  2. Download a menubar style and unzip it in your menubar-templates directory.
  3. Create a new menubar by going to Tools >> Menubar in your WordPress dashbaord.
  4. Add the menubar into your blog either through the widget interface (WordPress 2.8+) or by adding a line of PHP code into your blog header.php file.

This method is more flexible than the previous two in the long-run, but it requires a bit more setup cost. In addition, the existing menubar styles available may not exactly fit in with your current WordPress theme.

4. Use a Menubar-Ready WordPress Theme

The easiest and most flexible way to include a menubar into your blog is to use a menubar-ready WordPress theme. I.e., a theme that automatically supports the menubar plugin.

The Shiba WordPress theme is menubar-ready. It will automatically create a style for your menubar that changes color according to the color scheme of your blog. It will also automatically create a default menubar for you, if one does not already exist.

In short, all you have to do is install and activate the menubar plugin.

  1. Then, go to Appearance >> Widgets.
  2. Get a Menubar Widget and drop it into the menubar widget area to the right.
  3. Enter shiba_menubar into the widget name box. Click on the Save button on the Menubar Widget.
  4. Refresh your blog and a menubar should appear right below the header image.

WordPress dashboard screen-shot for enabling the menubar widget in your blog.
WordPress dashboard screen-shot for enabling the menubar widget in your blog.

You can change the color scheme of your blog anytime you want using the Custom Colors interface in the Shiba theme, and your menubar will update its color accordingly. If you change themes, you menubar plugin and all of its settings will remain intact.

Click thumbnail to view full-size
Shiba WordPress theme screenshot with Andrea's Menubar plugin.
Shiba WordPress theme screenshot with Andrea's Menubar plugin.

When properly applied and styled, menubars can significantly improve the maneuverability of your blog, and enhance the blog experience for your users. Enjoy your menubars!


Join HubPages and use it to help drive traffic to your home blog or website.

Do you have a menubar in your blog?

  • Yes!
  • No - I don't need no stinkin menubars!
  • Not yet, but I will add one with the simple methods above.
See results without voting

WordPress Blog

  • White Wedding WordPress Theme Images

    This is my second set of wedding themed images. The previous wedding theme focused just on the bride and bridal gown, so here I wanted to include some pictures of the groom, as well as present some... - 5 days ago

  • Carrara 7 – Head Modeling for Beginners

    I have been using Poser for the last year to generate 3D images for my articles and website. Recently however, I wanted to create some anime characters, but could not find the right face on DAZ or... - 8 days ago

  • Thanksgiving WordPress Theme Images

    Thanksgiving is a harvest celebration. Traditionally, it was a time to give thanks for the bounty given to us by Mother Earth. In more modern times, it is a celebration of thanks and gratitude for... - 2 weeks ago

Comments

RSS for comments on this Hub

Jess Killmenow profile image

Jess Killmenow  says:
2 months ago

Wow, nice article, Shibashake! And nice cartoons! I need some of these characters in my strip!

shibashake profile image

shibashake  says:
2 months ago

lol - I am sure they will be very happy to visit your excellent life! I wouldn't mind joining your excellent life either - I mean, it is pretty excellent! :D

Submit a Comment

Members and Guests

Sign in or sign up and post using a hubpages account.


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites

WordPress in the News

working