Easy methods to Add Icons to WordPress Navigation Menu Objects

December 8, 2023 6:53 pm Graphic Designing Poetic Comments

Create a Menu

First issues first, within the capabilities.php of our theme (as normal, mine is known as Playground), we’ll register a brand new navigation menu location:

1	perform playground_setup() {
2	//Register menu places
3	register_nav_menus(
4	array(
5	‘header-menu’ => __( ‘The Header Menu’, ‘playground’ ),
6	//extra places right here
7	)
8	);
9	}
10	add_action( ‘after_setup_theme’, ‘playground_setup’ );

Via the admin, we’ll create a brand new menu and affiliate it with this location:

Subsequent, we’ll show that menu all over the place we wish through the use of the wp_nav_menu() perform and passing as the worth of the theme_location key the situation we created.

In our instance, this would be the main menu and sit on the header.

Right here’s the header code—our emblem will come from an SVG Sprite like we mentioned in a earlier tutorial:

1	class=“site-header”>
2
3	class=“emblem” href=““ aria-label=“forecastr emblem”>
4	width=“178” peak=“38” position=“img”>
5	href=“#emblem”>
6
7
8
9	wp_nav_menu(
10	array(
11	‘container’ => false,
12	‘theme_location’ => ‘header-menu’,
13	)
14	);
15	?>
16
17

Type the Header With CSS

Right here’s the header look:

To attain this format, we’ll want the next types:

1	:root {
2	–white: #fff;
3	–orange: #e76f51;
4	–lightyellow: #fcf5e4;
5	}
6
7	.site-header {
8	place: sticky;
9	high: 0;
10	padding: 3vh 0;
11	z-index: 1;
12	background: var(–lightyellow);
13	}
14
15	.site-header nav {
16	show: flex;
17	align-items: middle;
18	justify-content: space-between;
19	padding: 0 20px;
20	}
21
22	.site-header .emblem svg {
23	fill: var(–orange);
24	}
25
26	.site-header .menu {
27	list-style: none;
28	padding: 0;
29	margin: 0;
30	justify-content: middle;
31	hole: 20px;
32	}
33
34	.site-header .menu,
35	.site-header .menu li,
36	.site-header .menu a {
37	show: inline-flex;
38	}
39
40	.site-header .menu a {
41	align-items: middle;
42	hole: 5px;
43	text-decoration: none;
44	font-size: 22px;
45	padding: 0 10px;
46	border-radius: 5px;
47	border: 2px strong clear;
48	transition: border 0.15s ease-out;
49	}
50
51	.site-header .menu svg,
52	.site-header .menu path {
53	fill: var(–orange);
54	}
55
56	.site-header .menu .current-menu-item a,
57	.site-header .menu a:hover {
58	border-color: var(–orange);
59	}

Make a Plan

Let’s now make our menu extra enticing by including one icon to every menu merchandise. There are alternative ways of doing it, for instance:

Right here we’ll go along with the second possibility.

If you happen to seek for this filter within the WordPress recordsdata, you’ll discover it within the wp-includes/nav-menu-template.php file path.

The purpose is so as to add a callback perform to that filter that may solely modify the header menu gadgets.

So, within the capabilities.php, we’ll place a beginning code just like this:

1	perform modify_nav_menu_args( $sorted_menu_items, $args ) {
2	if ( ‘header-menu’ === $args->menu->slug ) :
3	foreach ( $sorted_menu_items as $merchandise ) :
4	//do one thing
5	endforeach;
6	endif;
7
8	return $sorted_menu_items;
9	}
10	add_filter( ‘wp_nav_menu_objects’, ‘modify_nav_menu_args’, 10, 2 );

For dev functions, we will print within the entrance finish the $sorted_menu_items and $args parameters.

To make this course of as comprehensible as doable, we’ll add icons in 4 alternative ways.

Icons from the Font Superior Library

Let’s first focus on the best way to embrace Font Superior icons in our menu. For simplicity, we’ll load this library by a CDN like this:

1	//capabilities.php
2
3	perform playground_scripts_and_styles() {
4	wp_enqueue_script( ‘fa-icons’, ‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js’);
5	…
6	}
7	add_action( ‘wp_enqueue_scripts’, ‘playground_scripts_and_styles’ );

Subsequent, we’ll place the specified icon lessons for every menu merchandise within the description area—this area isn’t printed by default within the code until we pressure it.

Again to our callback perform, we’ll use an i tag to show the outline of every menu merchandise—be at liberty so as to add aria-hidden=”true” if you need:

1	//capabilities.php
2
3	perform modify_nav_menu_args( $sorted_menu_items, $args ) {
4	if ( ‘header-menu’ === $args->menu->slug ) :
5	foreach ( $sorted_menu_items as $merchandise ) :
6	if ( $merchandise->description ) :
7	$merchandise->title = ‘. $merchandise->description . ‘”>‘ . $merchandise->title;
8	endif;
9	endforeach;
10	endif;
11
12	return $sorted_menu_items;
13	}
14	add_filter( ‘wp_nav_menu_objects’, ‘modify_nav_menu_args’, 10, 2 );

Within the browser console, we’ll see one thing like this:

The tip end result will appear to be this—the primary merchandise reveals the hover and lively states:

Icons from the Feather Assortment

Transferring on, let’s discover ways to embed icons by the Feather icon assortment. Once more, for simplicity, we’ll load this assortment by a CDN like this:

1	//capabilities.php
2
3	perform playground_scripts_and_styles() {
4	wp_enqueue_script( ‘feather-icons’, ‘https://cdn.jsdelivr.internet/npm/feather-icons/dist/feather.min.js’ );
5	…
6	}
7	add_action( ‘wp_enqueue_scripts’, ‘playground_scripts_and_styles’ );

As we’ve carried out with the Font Superior icons, we’ll place the specified icon identify for every menu merchandise within the description area.

Again to our callback perform, we’ll use an i tag to show the outline of every menu merchandise. Discover the presence of the data-feather icon that the library requires, as talked about within the directions.

1	perform modify_nav_menu_args( $sorted_menu_items, $args ) {
2	if ( ‘header-menu’ === $args->menu->slug ) :
3	foreach ( $sorted_menu_items as $merchandise ) :
4	if ( $merchandise->description ) :
5	$merchandise->title = ‘. $merchandise->description . ‘”>‘ . $merchandise->title;
6	endif;
7	endforeach;
8	endif;
9
10	return $sorted_menu_items;
11	}
12	add_filter( ‘wp_nav_menu_objects’, ‘modify_nav_menu_args’, 10, 2 );

Final however not least, in our JavaScript, we’ve to name the feather.exchange() technique to affiliate the icon names with the precise SVG icons.

Within the browser console, we’ll see one thing like this:

The tip end result will appear to be this—the primary merchandise reveals the hover and lively states:

Customized Icons

All that appears nice, however what if we need to use customized icons? In such a case, we’ve completely different choices. Let’s see two of them in motion.

Add Icons to the Media Library

One possibility is to add all icons to the media library after which cross their picture attachment ID within the menu description.

For instance, in our case, I’ve uploaded the identical SVG Feather icons we used earlier than.

Be certain that to allow SVG help to your WordPress web site. You are able to do it by code or by putting in a plugin like SVG Assist.

In my case, the attachment ID for the house icon is 47.

Then, within the callback, we’ll use the wp_get_attachment_image() perform to seize all the information for this icon.

1	perform modify_nav_menu_args( $sorted_menu_items, $args ) {
2	if ( ‘header-menu’ === $args->menu->slug ) :
3	foreach ( $sorted_menu_items as $merchandise ) :
4	if ( $merchandise->description ) :
5	$merchandise->title = wp_get_attachment_image( $merchandise->description, ‘full’, true ) . $merchandise->title;
6	endif;
7	endforeach;
8	endif;
9
10	return $sorted_menu_items;
11	}
12	add_filter( ‘wp_nav_menu_objects’, ‘modify_nav_menu_args’, 10, 2 );

Relying on how giant are your icons, you would possibly need to render a special picture dimension.

Within the browser console, we’ll see one thing like this:

The tip end result will appear to be this:

Discover that the icon’s fill coloration does not change on the hover and lively states because it’s rendered as a picture and never SVG.

Create a New Subject – ACF Plugin

Another choice is to make use of a plugin just like the Superior Customized Fields (ACF) WordPress plugin for including a brand new picture area to the menu gadgets.

This case is extra handy in case you need to show the outline area and want one other area for the icon.

Via the settings, we’ll specify because the return sort the Picture ID and never the default Picture Array.

Then, we’ll add the specified icon:

And at last, we’ll use ACF’s get_field() perform to output the goal icons:

1	//capabilities.php
2
3	perform modify_nav_menu_args( $sorted_menu_items, $args ) {
4	if ( ‘header-menu’ === $args->menu->slug ) :
5	foreach ( $sorted_menu_items as $merchandise ) :
6	$icon_id = get_field( ‘icon’, $merchandise );
7	if ( $icon_id ) :
8	$merchandise->title = wp_get_attachment_image( $icon_id, ‘full’, true ) . $merchandise->title;
9	endif;
10	endforeach;
11	endif;
12
13	return $sorted_menu_items;
14	}
15	add_filter( ‘wp_nav_menu_objects’, ‘modify_nav_menu_args’, 10, 2 );

The generated code and end result are precisely the identical as earlier than:

Conclusion

Achieved, people! I hope you now have a very good understanding of the best way to make your WordPress navigation menus extra interesting by incorporating icons from completely different icon libraries, and even your customized ones!

Keep tuned as extra WordPress content material is coming.. As all the time, thanks so much for studying!

Blog