Add a House Icon to the WordPress Navigation Menu Utilizing Code

We love WordPress and work with it nearly each day. The navigation menu energetic in WordPress is unimaginable – a pleasant drag-and-drop characteristic that’s straightforward to make use of. Generally, you create a menu you want to use all through your theme with out together with the house hyperlink, although. Right here’s some code including the house hyperlink to the menu with out utilizing the menu choices in WordPress Admin.

Add a House HTML Entity to the WordPress Nav Menu

Utilizing an HTML entity (🏠) to signify your private home web page slightly than a hyperlink that claims House is fairly frequent. Using the code above, I used to be capable of make a minor edit to incorporate an HTML entity slightly than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
operate add_home_link($objects, $args) {
     if (is_front_page())
          $class="class="current_page_item home-icon"";
     else
          $class="class="home-icon"";
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->earlier than .
          '<a href="' . home_url( "https://martech.zone/" ) . '" title="House">' .
          $args->link_before . '&#x1F3E0;' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $objects = $homeMenuItem . $objects;
     return $objects;
}

Add a House SVG to the WordPress Nav Menu

Utilizing an SVG to signify your private home web page slightly than a hyperlink that claims House can be fairly helpful. Using the code above, I used to be capable of make a minor edit to incorporate an SVG slightly than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
operate add_home_link($objects, $args) {
     if (is_front_page())
          $class="class="current_page_item home-icon"";
     else
          $class="class="home-icon"";
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->earlier than .
          '<a href="' . home_url( "https://martech.zone/" ) . '" title="House">' .
          $args->link_before . '<svg xmlns="http://www.w3.org/2000/svg" width="16" peak="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"><path d="M8.293 1.293a.5.5 0 0 1 .414 0l6.25 3a.5.5 0 0 1 .25.434V13a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4.727a.5.5 0 0 1 .25-.434l6.25-3a.5.5 0 0 1 .414 0zM8 2.618L2.354 5.293 2 5.534V13a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V5.534L13.646 5.293 8 2.618z"/><path fill="#000" d="M7.293 0a1 1 0 0 1 .914 0l6.25 3a1 1 0 0 1 .5.867V13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3.867a1 1 0 0 1 .5-.867l6.25-3z"/></svg>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $objects = $homeMenuItem . $objects;
     return $objects;
}

Add a House FontAwesome House to the WordPress Nav Menu

Should you’re utilizing Font Superior in your website, you too can use their icon. Using the code above, I used to be capable of make a minor edit to incorporate their icon slightly than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
operate add_home_link($objects, $args) {
     if (is_front_page())
          $class="class="current_page_item"";
     else
          $class="";

     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->earlier than .
          '<a href="' . home_url( "https://martech.zone/" ) . '" title="House">' .
          $args->link_before . '<i class="fa fa-home"></i>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $objects = $homeMenuItem . $objects;
     return $objects;
}

Add a House Picture to the WordPress Nav Menu

Utilizing a picture to signify your private home web page slightly than a hyperlink that claims House can be a risk. Using the code above, I used to be capable of make a minor edit to incorporate an SVG slightly than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
operate add_home_link($objects, $args) {
     if (is_front_page())
          $class="class="current_page_item home-icon"";
     else
          $class="class="home-icon"";
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->earlier than .
          '<a href="' . home_url( "https://martech.zone/" ) . '" title="House">' .
          $args->link_before . '<img src="[path to your home image]" peak="15" width="14" />' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $objects = $homeMenuItem . $objects;
     return $objects;
}

Right here’s a breakdown of what this code does:

• It makes use of the add_filter operate to hook into the wp_nav_menu_items filter means that you can modify the objects in a WordPress navigation menu.
• The add_home_link operate is outlined to deal with the modification. This operate takes two parameters: $objects (the prevailing menu objects) and $args (the menu arguments).
• Contained in the add_home_link operate, it checks if the present web page is the entrance web page utilizing is_front_page(). Relying on whether or not it’s the entrance web page or not, it assigns a CSS class to the house hyperlink for styling functions.
• It then constructs the HTML for the House hyperlink, together with a picture with a hyperlink to the house web page. It’s best to substitute [path to your home image] with the precise path to your private home picture.
• Lastly, it appends the House hyperlink to the start of the menu objects and returns the modified menu objects.

Make certain so as to add this code to your theme’s features.php file in your Youngster Theme and customise it as wanted. In case your theme makes use of a unique construction or encounters any points, it’s possible you’ll want to regulate the code accordingly. And, after all, guarantee you will have a legitimate picture path for the house icon.