Add a Dwelling Icon to the WordPress Navigation Menu Utilizing Code

We love WordPress and work with it just about on daily basis. The navigation menu lively in WordPress is unbelievable – a pleasant drag-and-drop function 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 Dwelling HTML Entity to the WordPress Nav Menu

Utilizing an HTML entity (🏠) to characterize your property web page fairly 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 fairly than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
perform 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="Dwelling">' .
          $args->link_before . '&#x1F3E0;' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $objects = $homeMenuItem . $objects;
     return $objects;
}

Add a Dwelling SVG to the WordPress Nav Menu

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

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
perform 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="Dwelling">' .
          $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 Dwelling FontAwesome Dwelling to the WordPress Nav Menu

If you happen to’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 fairly than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
perform 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="Dwelling">' .
          $args->link_before . '<i class="fa fa-home"></i>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $objects = $homeMenuItem . $objects;
     return $objects;
}

Add a Dwelling Picture to the WordPress Nav Menu

Utilizing a picture to characterize your property web page fairly than a hyperlink that claims Dwelling can be a chance. Using the code above, I used to be capable of make a minor edit to incorporate an SVG fairly than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
perform 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="Dwelling">' .
          $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 perform 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 perform is outlined to deal with the modification. This perform takes two parameters: $objects (the prevailing menu objects) and $args (the menu arguments).
• Contained in the add_home_link perform, 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 Dwelling hyperlink, together with a picture with a hyperlink to the house web page. You need to change [path to your home image] with the precise path to your property picture.
• Lastly, it appends the Dwelling 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 capabilities.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, you might want to regulate the code accordingly. And, after all, guarantee you might have a legitimate picture path for the house icon.