Add a Dwelling 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 function 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 Dwelling HTML Entity to the WordPress Nav Menu

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

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
perform add_home_link($gadgets, $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>';
     $gadgets = $homeMenuItem . $gadgets;
     return $gadgets;
}

Add a Dwelling SVG to the WordPress Nav Menu

Utilizing an SVG to characterize your house web page relatively 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 relatively than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
perform add_home_link($gadgets, $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>';
     $gadgets = $homeMenuItem . $gadgets;
     return $gadgets;
}

Add a Dwelling FontAwesome Dwelling to the WordPress Nav Menu

In case you’re utilizing Font Superior in your web site, you may also use their icon. Using the code above, I used to be capable of make a minor edit to incorporate their icon relatively than the textual content:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
perform add_home_link($gadgets, $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>';
     $gadgets = $homeMenuItem . $gadgets;
     return $gadgets;
}

Add a Dwelling Picture to the WordPress Nav Menu

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

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
perform add_home_link($gadgets, $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>';
     $gadgets = $homeMenuItem . $gadgets;
     return $gadgets;
}

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 lets you modify the gadgets in a WordPress navigation menu.
• The add_home_link perform is outlined to deal with the modification. This perform takes two parameters: $gadgets (the present menu gadgets) 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 house picture.
• Lastly, it appends the Dwelling hyperlink to the start of the menu gadgets and returns the modified menu gadgets.

Be certain so as to add this code to your theme’s features.php file in your Little one 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, in fact, guarantee you have got a legitimate picture path for the house icon.