We love WordPress and work with it virtually day-after-day. The lively navigation menu in WordPress is unimaginable – a pleasant drag-and-drop function that’s straightforward to make use of. Nevertheless, generally you create a menu that you just wish to use all through the theme with out together with the house hyperlink. Here’s a code Adding the home link to the menu with out utilizing the menu choices in WordPress Admin.
Add a Dwelling HTML entity to the WordPress navigation menu
With a HTML An entity (🏠) to characterize your homepage as an alternative of a hyperlink that claims “Dwelling” is extensively used. Utilizing the code above I used to be capable of make a small change to incorporate an HTML entity as an alternative of 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 = ‘
‘; $objects = $homeMenuItem . $objects; return $objects; }
Add a Dwelling SVG to the WordPress navigation menu
With a SVG Displaying your homepage as an alternative of a hyperlink that claims “Dwelling” can be very helpful. Utilizing the code above I used to be capable of make a small change to incorporate an SVG file as an alternative of 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 = ‘
‘; $objects = $homeMenuItem . $objects; return $objects; }
Add a house font “Superior Dwelling” to the WordPress navigation menu
When you use Font Awesome You may also use their icon in your web site. Utilizing the code above I used to be capable of make a small change to incorporate their icon as an alternative of 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 = ‘
‘; $objects = $homeMenuItem . $objects; return $objects; }
Add a house picture to the WordPress navigation menu
It’s also potential to make use of a picture to characterize your homepage as an alternative of a hyperlink that claims “Dwelling”. Utilizing the code above I used to be capable of make a small change to incorporate an SVG file as an alternative of 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 = ‘
‘; $objects = $homeMenuItem . $objects; return $objects; }
Here is a breakdown of what this code does:
It makes use of the add_filter perform to hook into the wp_nav_menu_items filter and means that you can change the objects in a WordPress navigation menu. The add_home_link perform is outlined to course of the change. This perform takes two parameters: $objects (the prevailing menu objects) and $args (the menu arguments). Inside the add_home_link perform, it checks whether or not the present web page is the house web page utilizing is_front_page(). Relying on whether or not it’s the homepage or not, it assigns a CSS class to the house hyperlink for styling functions. The HTML code for the house hyperlink is then created, together with a picture with a hyperlink to the house web page. You must substitute [path to your home image] with the precise path to your property picture. Lastly, the house hyperlink is appended to the start of the menu objects and the modified menu objects are returned.
Ensure so as to add this code to your theme’s features.php file Children’s theme and regulate as wanted. In case your theme makes use of a distinct construction or encounters issues, you might want to regulate the code accordingly. And naturally, be sure to have a legitimate picture path for the house icon.
