Create a Menu First things first, in the
Through the admin, we’ll create a new menu and associate it with this location: Next, we’ll display that menu everywhere we want by using the In our example, this will be the primary menu and sit on the header. Here’s the header code—our logo will come from an SVG Sprite like we discussed in a previous tutorial:
Style the Header With CSSHere’s the header appearance: To achieve this layout, we’ll need the following styles:
Make a PlanLet’s now make our menu more attractive by adding one icon to each menu item. There are different ways of doing it, for example: Here we’ll go with the second option. If you search for this filter in the WordPress files, you’ll find it in the The goal is to add a callback function to that filter that will only modify the header menu items. So, in the
For dev purposes, we can print in the front end the To make this process as understandable as possible, we’ll add icons in four different ways. Icons from the Font Awesome LibraryLet’s first discuss how to include Font Awesome icons in our menu. For simplicity, we’ll load this library through a CDN like this:
Next, we’ll place the desired icon classes for each menu item in the description field—this field isn’t printed by default in the code unless we force it. Back to our callback function, we’ll use an
In the browser console, we’ll see something like this: The end result will look like this—the first item shows the hover and active states: Icons from the Feather CollectionMoving on, let’s learn how to embed icons through the Feather icon collection. Again, for simplicity, we’ll load this collection through a CDN like this:
As we’ve done with the Font Awesome icons, we’ll place the desired icon name for each menu item in the description field. Back to our callback function, we’ll use an
Last but not least, in our JavaScript, we’ve to call the In the browser console, we’ll see something like this: The end result will look like this—the first item shows the hover and active states: Custom IconsAll that seems great, but what if we want to use custom icons? In such a case, we’ve different options. Let’s see two of them in action. Upload Icons to the Media LibraryOne option is to upload all icons to the media library and then pass their image attachment ID in the menu description. For example, in our case, I’ve uploaded the same SVG Feather icons we used before.
Make sure to enable SVG support to your WordPress site. You can do it by code or by installing a plugin like SVG Support.
In my case, the attachment ID for the home icon is 47. Then, in the callback, we’ll use the
Depending on how large are your icons, you might want to render a different image size. In the browser console, we’ll see something like this: The end result will look like this: Notice that the icon’s fill color doesn’t change on the hover and active states as it’s rendered as an image and not SVG. Create a New Field – ACF PluginAnother option is to use a plugin like the Advanced Custom Fields (ACF) WordPress plugin for adding a new image field to the menu items. This case is more convenient in case you want to display the description field and need another field for the icon. Through the settings, we’ll specify as the return type the Image ID and not the default Image Array. Then, we’ll upload the desired icon: And finally, we’ll use ACF’s
The generated code and result are exactly the same as before: ConclusionDone, folks! I hope you now have a good understanding of how to make your WordPress navigation menus more appealing by incorporating icons from different icon libraries, or even your custom ones! Stay tuned as more WordPress content is coming.. As always, thanks a lot for reading! via Pixel Lyft https://ift.tt/VBuUXwj
0 Comments
Leave a Reply. |
Top ranked Las Vegas SEO company. Expert SEO services that are affordable, low cost for small business. |