Create a WordPress Menu With Images – No Plugin Needed
Contents
WordPress makes it easy to create and adjust navigation menus but one thing that is difficult to do is create a menu that is image based. Yes there are many plugin out there that will do this and most of them will cost you a few pennies, but I have found a way to accomplish this without using a plugin and simply using the built in menu system that comes standard with WordPress version 3 and higher.
To this:
Here are the steps below.
Step #1 – Create a Menu
Go into the administrative area of your WordPress website and then Appearance > Menus and create new menu. You may name it what ever you like.
Step #2 – Create HTML code
In this step we are going to create HTML code for the image you want as the menu item to replace standard boring text. The HTML code below will be used in step 3. You need to make adjustments to this code for each menu item. The adjustments you will make are the URL that the image with link to and the URL path of the image itself. Simple copy the code below and paste it in your favorite text editor. Then you will change out the 2 areas mentioned, URL_YOU_WANT_IMAGE_TO_LINK_TO & IMAGE_PATH_WILL_GO_HERE.
**Please note that image size should be no higher than the height of your navigation area.**
Step #3 – Create a Menu Item
We will now put the HTML code we created in step #2 into action as our 1st menu item in our image based menu. See the image below for placement of the HTML code.
Step #4 – Adjust Menu Item
Now that we have added the item to our menu we need to make sure that we remove any text that is in the URL field. Please see image below.
Step #5 – Save Menu & Activate
Now all we have to do is make sure we hit the blue save menu button and the bottom and then select it as the menu for your theme and save.
About author
You might also like
YouTube Embed Code Options – Have it Autoplay
Here are some problems I face when embedding YouTube videos on my website. First, the user has to click on the “play” button for the video to play. People who
Custom Facebook LIKE Box | Customize Facebook LIKE Box Using CSS
The Facebook Like box placed on your website /blog is probably the easiest way to attract new fans to your Facebook page. And the same rectangular box can even help
Change the YouTube Embed Image to Custom Image
ContentsBefore:After:Here is the exact code from above example.That’s it! If you want a specific preview image for your YouTube video, you’re pretty much out of luck. When you upload a
0 Comments
No Comments Yet!
You can be first to comment this post!