How to add icons in wordpress header menu without plugin: step by step guide

on

Adding icons to your WordPress header menu can enhance the visual appeal of your website and make navigation more intuitive. While there are various plugins available to add icons to your menu, you can also add them without using a plugin. In this article, we will provide a step-by-step guide on how to add icons to your WordPress header menu without using a plugin.

Step 1: Choose an icon library

Before you can add icons to your WordPress header menu, you need to choose an icon library. There are various free and paid icon libraries available such as FontAwesome, Material Icons, Dashicons, etc. Choose the library that you would like to use and make sure it is compatible with your theme.

Step 2: Upload the icon library to your WordPress theme directory

Once you have chosen an icon library, you need to upload it to your WordPress theme directory. You can do this by using FTP or the file manager in your web hosting control panel. Navigate to the wp-content/themes/your-theme-name directory and create a new folder named “icons”. Upload the icon library files to this folder.

Step 3: Edit your theme’s functions.php file

Next, you need to edit your theme’s functions.php file. This file contains the code that controls the functionality of your WordPress theme. You can access this file by going to Appearance > Theme Editor in your WordPress dashboard. Scroll down to the bottom of the file and add the following code:

function add_menu_icons_styles(){?> <style>/* Add your CSS code here */</style> <?php} add_action( 'admin_head', 'add_menu_icons_styles' );

Step 4: Add CSS code to display the icons

Now that you have added the necessary PHP code, you need to add CSS code to display the icons. In the same functions.php file, add the following CSS code:

add_filter( 'wp_nav_menu_items', 'add_menu_icons', 10, 2 ); function add_menu_icons( $items, $args ) {    if ($args->theme_location == 'primary') { // change 'primary' menu location to your menu location        $icon_folder = get_template_directory_uri() . '/icons/'; // replace 'icons' with the name of your icon folder         $items_array = explode('</li>', $items);         foreach($items_array as &$item) {            if(strpos($item, '<a') !== false) {                $item .= '<span class="menu-icon"><img src="'.$icon_folder.'icon.png"></span>';            }        }         $items = implode('</li>', $items_array);    }     return $items;}

The code above will add an icon to each menu item in the “primary” menu location. If your menu location is different, you will need to replace “primary” with the name of your menu location.

Step 5: Add custom CSS

Finally, you can add custom CSS to style the icons. In the same functions.php file, add the following CSS code:

.menu-icon {    display: inline-block;    width: 16px; /* adjust the width and height to match the size of your icon */    height: 16px;    margin-right: 5px; /* adjust the margin to position the icon */}

This CSS code will display the icons inline with the menu items and add a margin to position them.

Conclusion

Adding icons to your WordPress header menu can make your website more visually appealing and user-friendly. While there are various plugins available to add icons to your menu, you can also add them without using a plugin by uploading an icon library to your theme directory and adding PHP

Comments

Post a Comment