My blog is a WordPress blog. I think it is a good platform for a blog, but occasionally I will find small shortcomings. One such shortcoming is no obvious way to include an image in a custom menu link. Let me explain: In WordPress, you can create a “custom menu”, which can then be included in various places on your blog. For example, I use a custom menu for my main navigation menu (the one at the top of this blog that has the links “Blog Home”, “About Me”, “Blog Rationale” and “Blog RSS Feed”). The problem is that when you create a menu and add a custom link to the menu (see reference figure below), it only shows options for a link URL and a text label (no option for adding an image).
You can see from my navigation menu above (and the cropped image below), though, that there must be a way to add an image because I have an RSS icon included with the “Blog RSS Feed” link.
Adding an image is relatively simple, you just have to either stumble across a blog like this one that explains it, or know a bit about web design. Luckily, I have some background in web design, had a hunch about what would work for adding images to the WordPress links, and indeed my hunch was correct. The instructions below describe how to add an image to a custom link.
Before creating a link in a custom menu, first you have to create a custom menu. Do this in the WordPress admin page by clicking on “Appearance” and then “Menus”. From there you can create a new menu by clicking on the tab with the “+” sign, type in a name for the menu, and then click the “Create Menu” button.
After that it will allow you to add all sorts of items to your custom menu. It allows you to add predefined links to pages, themes, categories and custom links. As mentioned before, the custom links only show text options, but you can add custom code in the “Label” field to make it show whatever you want. However, the text field is so short that it makes it difficult to see what code you have entered in there, so I would recommend typing the code into a text editor like Notepad or Vim and then copying/pasting it into the field. Here is the code I entered into the “Label” field:
<div style="background-image: url('/images/16px-Feed-icon.png'); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 20px;"> Blog RSS Feed</div>
After pasting in the code (I’ll explain the code in a bit…), click the “Add to Menu” button. The result looks like the figure below. It is misleading because it looks like it just copied the text directly over just as you typed it in. However, when you actually use the menu somewhere in your blog it will show the image and text correctly, instead of just regurgitating the code.
You probably don’t want to add the code that I used, because I put in exactly what I wanted for my own blog and you will want something else that is customized just for your own blog. So let me explain what the code all means so that you can customize it however you want. First, let me show the same code, but shown in an easier to read format:
<div style=" background-image: url('/images/16px-Feed-icon.png'); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 20px; "> Blog RSS Feed</div>
First, note that there is a “
<div></div>” tag set around the text “Blog RSS Feed”. This basically gives us a small, customizable block around the text label that we can then play with (i.e., customize with an image). We can modify the
div block by using the “
style=""” attribute (within the opening
<div> tag as shown above).
The line “
background-image: url('/images/16px-Feed-icon.png');” specifies what image file you want to use. This the first thing you need to change – make it point to the path of your image file.
The line “
background-repeat: no-repeat;” says that we want the image to show once, without being a repeating background. You should leave this as-is unless you want a background that repeats horizontally, vertically, or both.
The line “
display: inline;” means that it will render the link in the
div tags inline in its context rather than putting it on a new line all by itself (which would look really terrible).
The line “
margin: 0;” says that we don’t want the
div block to have any extra spacing around it, other than what already will exist for for the content in that location.
The line “
padding: 0 0 0 20px;” is similar to the “
margin” line above, except that we expanded it out to having four values. The values define some extra space that we want in the
div block in the directions of above, right, below, and left respectively. By saying we want
20px (20 pixels) of space to the left, I am specifying enough space for the image before the text portion of the label begins. This value of
20px needs to be updated to match (or be slightly larger than) the width of the image that you are using. For example, if your image is 50 pixels wide, then put something like
After you’re all done and have clicked the “Add to Menu” button, click the “Save Menu” button to save the link in the menu. If you want to use this new menu as your main navigation menu (like I am), then select the menu you created from the drop-down menu in the “Theme Locations” box and then click “Save”.
That’s all – easy!