Add Images to Your Blog’s Menu Design in WordPress

Adding images to your navigation menu adds flair to your blog design and provides a place to extend your brand. Menu images on a blog can also play a more functional role by adding more context to a menu item title. For example, an image of a plane beside a Where to Go tab helps readers better understand where that link takes them.

You can create your menu images in any photo-editing or illustration program. The star shown here was created using Adobe Illustrator and then saving it as a PNG file with a transparent background. Saving the file this way ensures there’s no white box around the star.

image0.jpg

Here’s how to add images to the About menu in WordPress without getting too heavy into coding. Before you start the following steps, make sure your image is uploaded onto your server. You can add images as you build a new menu or add images to a menu you already created (start with Step 6).

  1. Go into your WordPress dashboard.

  2. Choose Appearance→Menus.

  3. To start building a menu, enter a name in the Menu Name field and then select Create Menu.

    Depending on your WordPress theme, you may have to select the plus (+) tab to create a new menu.

  4. In the Theme Locations box, select your new navigation menu from the drop-down menu and then click Save.

    Your new menu will display on your blog instead of the default menu.

  5. In the Pages box, place a check mark beside your About or About Me page.

    This adds your page to the Menu area on the right side.

  6. In the Menu area box, click the drop-down arrow beside your About page button.

    New fields appear underneath the About page button. The two you need to work with are the Navigation Label and Title Attribute.

  7. In the Navigation Label field, add the following code, replacing the background image URL with your image’s URL and replacing the Tab Name with the title you want to show up in your navigation menu.

    image1.jpg
    <div style=
       "background-image: url('http://www.yourblog.com/
    imagelocation/image.png');
       background-repeat: no-repeat; 
       display: inline; 
       margin: 0;
       padding: 0 0 0 25px;">
    Tab Name
    </div>
  8. In the Title Attribute field, enter the title here as well.

    This attribute is the alternative (alt) text that a visitor sees when they mouse over the menu item.

  9. When finished, click the Save Menu button.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.