Menu Images

The first in this series of tutorials is adding images to the Main Menu, we looked about and found a menu that suited our theme, the stylesheets elements however do not match our theme, so we needed to rename some to suit.

If we follow the steps in this tutorial we will be able to identify and add images in the menu bar to a WordPress theme, have looked at the styling, and how to add the image styling for a navigation bar.

We will need to do the following steps, locate a suitable set of images, add the images to out theme and create a different style for the menu.

If you have not worked through the first tutorial you can download the starting theme from the downloads page or from getting started two this code should also work with the default Twenty Ten theme if you only want to style the standard menu. 

Menu Images

There are many places to get menu images on the internet many of these are free and you might think they are really no use, but what we need for our menu bar is an image set, we looked around and we found a set on psdGraphics.

In the download for this tutorial are the menu images, before we can use this in our stylesheet we should, copy the images folder to the child theme, or the images to the child themes images folder.

Download Support Files: Tutorial 2 Menu Files (2561)

We have changed the hover image and the names of some images to suit our theme, lets look at what we need and where they will be used.

  • Background Image for the menu bar, this only needs to be 1px wide by the height of our menu 51px.
  • Hover Image this will change the look of the main menu bar when we hover over it.
  • Separator this is the thin 1px line displayed on the right of the menu item.
  • List item background this will be for our sub menu items

Style the Menu

Add the contents of the file ‘lesson-1-style.css’ from the changes folder, to the end of the child themes style.css.

/* Lesson #1 styles starts here */
/* Start deal with the Background */
 background: transparent;

 background-image: url('images/page_bg.jpg');
 background-repeat: repeat-x;
 background-color: #fff;
/* End deal with the background */

/* Start restyle the main menu */
#access {
 padding: 0;
 background: #d6eaf8 url(images/menu-bg.gif) repeat-x left top;

#access a {
 color: #bbb;
 padding:0 15px;
 font-size: 12px;
 text-transform: uppercase;

#access li:hover > a
 color: #333;
 background: url(images/menu-bg-hover.gif) repeat-x left top;

#access li {
 background: url(images/separator.gif) no-repeat right center;

#access ul ul a {
 border-bottom: 1px solid #555;

#access ul ul :hover > a {
 background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
 border-right: 1px solid #000;
 border-bottom: 1px solid #000;
 border-left: 1px solid #000;
/* End restyle the main menu */
/* Lesson #1 styles ends here */

The first part of the style #wrapper makes our themes content background transparent, this will allow the themes background to show through, and the visitor will not be able to identify any left and right margins.

next we will change the body color to white #fff and we add our gradient image to the background, this has a value setting of repeat-x which means a repeat of horizontal only.

On to the menu bar, #access is the menu container we change the height, margin and padding, and add in our background image.

#access a is the menu text, we have done several things here, the color, line height, text-transform forces the text to uppercase, and then we align it in the center, the padding add a nice left and right spacing, and the margin 0 removes any off sets.

Next is the li section first is the hover this is still the top level, where we change the background and font color and we then add in the separator image, here you can see the alignment ‘right’.

Now it is just the submenu identified by #access ul ul, here we add a bottom border in the ‘a’ element, and three borders and background image for the submenu container.

It may look a bit complicated at first but all we have done is styles our pagemenu and the other elements, we can try out different colors, images and sizes that suit our themes, and also re-use these menu elements in our other themes.

Now when we visit our local website we will see our new style menu.

In our next tutorial we will be adding a nice graphical Search Box to the top menu.


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, 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 for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions., 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.


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.

Leave a Reply


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

Related Posts

Posted in Tutorials 2010 Two


For this series of tutorials we need to have a local WordPress setup. This will enable easy deployment of the theme files. This series will be added to over two weeks, rather than one big set of files since we … Continue reading

Read More