Images in custom WordPress menus

The personalized menus are a real wonder, although they have supposed the disappearance of the link manager. They allow us to put the navigation menus in WordPress to our liking through a visual interface, something that was previously only possible by modifying code manually.

With personalized menus we can easily add elements to the navigation bar of our theme , that if, usually only with text, but that can be improved, and we'll see 3 ways to add images to personalized menus .

 icons menu

It is the least simple method, but also the most customizable, since the possibilities are endless, they only depend on your knowledge of CSS.

To create a menu item that is an image using this method, the process is as follows:

  1. ] Create a CSS class for each image or icon that you are going to use in a menu. Here you develop your skill and imagination.
  2. Go to "Appearance -> Menus", display the "Screen Options" and check the box labeled "CSS Classes"
     imagen menu css 1 [19659009] Add the custom menu item with the URL and label you want
     image menu css 2
  3. Display the newly added element and in the new field named "CSS Classes" enter the name of the that will be applied to that particular element
     image menu css 3
  4. Save the menu changes … you always forget

And so for each element you want to add.

the most complicated method but also the best because the personalization can be total.

This method is a bit " ñapa " but works great and is easy to use.

What you have to do is to create a new custom URL menu link, but instead to put a normal text in the label field you put the HTML code with which you would show the image in question that you want to show that is, something like …

] You add it to the menu and that's it, simple and effective. The menu item will look a little weird to have such a long and strange label but it works great.

Because of the geeky point that it has is the method that I have more affection for.

This method, how you can imagine, It is simple to the greatest extent possible. You just have to install a plugin called Nav menu images and start using it. Now, not everything is as beautiful as it seems.

Let's see, do not be scared, it works, it just takes a step more than you can imagine, because in principle, having no page of adjustments or anything like it seems that you have not installed anything.

The process is as follows:

  1. You install and activate the plugin
  2. You add a custom link element to the menu as you would normally do
  3. You save the changes in the menu (yes, now, you ignore me)
  4. You open the newly added menu item and you'll see a link under the tag field to add an image to the menu. Give it a click
  5. The WordPress media loader opens, choose an image and assign it
  6. Save the changes again

 image menu using plugin [19659003] Actually, how you've seen, it's simple, but it's not very obvious that you have to save twice the menu so surely many have uninstalled the plugin before thinking it did not work. [19659003]  images in menu wordpress

Well, and that's it, you'll say which method you liked the most, or even if you know some way to do this.

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you: