Recently one of my clients requested if I could add or replace one of her menu links with an image. I knew it could be done, but had not yet done it myself in the past. So who do call when you need answers?
Google of course!
It took me a bit to find the answer I was looking for, but I fell upon a little golden nugget site that was able to provide step by step directions on how to do this. But far be it from me to leave it that. I wanted to figure how to do the same thing but delete a couple of steps in the process.
A little tweaking here, a little tweaking there and I was able to find the shortcut. Hey! I’m all about keeping it simple!
Below are the directions on how to add an image to your WordPress menu links. And for you non-techies, if you follow these directions to the tee, I promise you can do this too! Don’t let the code intimidate you. Mess up? You can simply ‘remove’ the page from your custom menus section and re-add the page.
Note: If creating custom menu links I would follow the these directions exactly as he has it: Mike’s Tech Blog.If want to add an image to an already created Page added in your Menu’s area, for example adding an image to your Products page, follow the directions below for the short cut.
Click on arrow on the Page tab you want add the image to in your Menus area of your WordPress website:
Add code listed below in the area labeled ‘Navigation Label’
CODE:
<div style=”background-image: url(‘/wp-content/uploads/2013/04/cart_16.png‘); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 20px;”> I <3 SHOP</div>
Where url(‘/wp-content/uploads/2013/04/cart_16.png’) is the path to YOUR image. I simply uploaded the image (size 16px X 16px) via my Media section in my dashboard and copied the URL path over (minus the root domain).
For example, the full path is:
http://www.7prettywomen.com/wp-content/uploads/2013/04/cart_16.png
However I ONLY copy everything from the first forward slash and on ( / ) – highlighted in yellow.
The words between the ></div> section of this code [ > I <3 SHOP</div>] is the word(s) I want to use for navigation link.
Then click ‘Save’.
The display: inline; margin: 0; padding: 0 0 0 20px; should be fine if your image is small enough. Otherwise you can adjust it to change the padding size in reference to the text next to it.
Bonus Tip: If you want just an image and NO text, do not add text before the </div> code.
Here’s how that would look:
This –
Becomes this –
Important Note: Be sure to copy the code above into a text editor and then to your website so you don’t unknowingly add additional characters by copying and pasting directly.