How to Add Icons to WordPress Navigation Menu Items

Create a Menu

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

1

operate playground_setup() {

2

    //Register menu areas

3

    register_nav_menus(

4

        array(

5

            'header-menu' => __( 'The Header Menu', 'playground' ),

6

            //extra areas 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 would like through the use of the wp_nav_menu() operate and passing as the worth of the theme_location key the placement we created.

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

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

1

<header class="site-header">

2

    <nav>

3

        <a class="brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" aria-label="forecastr brand">

4

            <svg width="178" top="38" position="img">

5

                <use href="#brand"></use>

6

            </svg>

7

        </a>

8

        <?php

9

        wp_nav_menu(

10

            array(

11

                'container'      => false,

12

                'theme_location' => 'header-menu',

13

            )

14

        );

15

        ?>

16

    </nav>

17

</header>

Type the Header With CSS

Right here’s the header look:

To realize this structure, we’ll want the next kinds:

1

:root {

2

  --white: #fff;

3

  --orange: #e76f51;

4

  --lightyellow: #fcf5e4;

5

}

6

7

.site-header {

8

  place: sticky;

9

  prime: 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: heart;

18

  justify-content: space-between;

19

  padding: 0 20px;

20

}

21

22

.site-header .brand svg {

23

  fill: var(--orange);

24

}

25

26

.site-header .menu {

27

  list-style: none;

28

  padding: 0;

29

  margin: 0;

30

  justify-content: heart;

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: heart;

42

  hole: 5px;

43

  text-decoration: none;

44

  font-size: 22px;

45

  padding: 0 10px;

46

  border-radius: 5px;

47

  border: 2px stable 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 other ways of doing it, for instance:

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

When you 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 operate to that filter that may solely modify the header menu gadgets.

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

1

operate 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 );

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

Icons from the Font Superior Library

Let’s first talk about the right way to embody Font Superior icons in our menu. For simplicity, we’ll load this library by means of a CDN like this:

1

//features.php

2

3

operate 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 classes for every menu merchandise within the description discipline—this discipline isn’t printed by default within the code until we drive it.

Again to our callback operate, 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

//features.php

2

3

operate 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 = '<i class="' . $merchandise->description . '"></i>' . $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 top end result will appear like this—the primary merchandise reveals the hover and lively states:

Icons from the Feather Assortment

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

1

//features.php

2

3

operate 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 executed with the Font Superior icons, we’ll place the specified icon title for every menu merchandise within the description discipline.

Again to our callback operate, 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 instructions.

1

 operate 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 = '<i data-feather="' . $merchandise->description . '"></i>' . $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() methodology to affiliate the icon names with the precise SVG icons.

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

The top end result will appear like this—the primary merchandise reveals the hover and lively states:

Customized Icons

All that appears nice, however what if we wish 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 go 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.

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

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

1

operate 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 );

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

The top end result will appear like 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 Discipline – ACF Plugin

An alternative choice is to make use of a plugin just like the Advanced Custom Fields (ACF) WordPress plugin for including a brand new image field to the menu gadgets.

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

Via the settings, we’ll specify because the return kind 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() operate to output the goal icons:

1

//features.php

2

3

operate 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, of us! I hope you now have a very good understanding of the right 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 at all times, thanks rather a lot for studying!