Add a Residence Icon to the WordPress Navigation Menu Utilizing Code

We love WordPress and work with it just about day by day. The navigation menu energetic in WordPress is unimaginable – a pleasant drag-and-drop characteristic that’s simple 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 Residence HTML Entity to the WordPress Nav Menu

Utilizing an HTML entity (🏠) to characterize your own home web page reasonably than a hyperlink that claims House is fairly widespread. Using the code above, I used to be in a position to make a minor edit to incorporate an HTML entity reasonably 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="Residence">' .
          $args->link_before . '&#x1F3E0;' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $objects = $homeMenuItem . $objects;
     return $objects;
}

Add a Residence SVG to the WordPress Nav Menu

Utilizing an SVG to characterize your own home web page reasonably than a hyperlink that claims Residence can be fairly helpful. Using the code above, I used to be in a position to make a minor edit to incorporate an SVG reasonably 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="Residence">' .
          $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 Residence FontAwesome Residence to the WordPress Nav Menu

Should you’re utilizing Font Superior in your web site, you can even use their icon. Using the code above, I used to be in a position to make a minor edit to incorporate their icon reasonably 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="Residence">' .
          $args->link_before . '<i class="fa fa-home"></i>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $objects = $homeMenuItem . $objects;
     return $objects;
}

Add a Residence Picture to the WordPress Nav Menu

Utilizing a picture to characterize your own home web page reasonably than a hyperlink that claims Residence can be a risk. Using the code above, I used to be in a position to make a minor edit to incorporate an SVG reasonably 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="Residence">' .
          $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 permits you to 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 present 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 Residence hyperlink, together with a picture with a hyperlink to the house web page. You need to exchange [path to your home image] with the precise path to your own home picture.
• Lastly, it appends the Residence hyperlink to the start of the menu objects and returns the modified menu objects.

Make sure that so as to add this code to your theme’s features.php file in your Baby Theme and customise it as wanted. In case your theme makes use of a distinct construction or encounters any points, it’s possible you’ll want to regulate the code accordingly. And, in fact, guarantee you might have a sound picture path for the house icon.