Create a Genesis Menu Home Icon Button

One frequently asked question is "How do I add a home button to a menu for a Genesis Framework child theme?" There are many solutions of various complexities to this question found on the web. The solution I'm offering here is simple and purely CSS based. It not only applies to the Genesis Framework, but to WordPress in general and produces the result you see in the image below in a menu I am built for a Swedish eCommerce site. This post teaches you how to do this in three very simple steps.

Enable WordPress CSS Menu Classes

The first step is to enable CSS Classes in the WordPress Menu Builder. From the Admin screen, navigate to the Appearance/Menus page and click on the Screen Options button in the upper right of your screen. Then, simply click on the CSS Classes checkbox to enable it.

Add CSS Class to menu item

Next, open the home menu item and add the css class to it. In this case I've named my class "home-button."

Add Code to Style.css

Last, find an icon that you like and upload it to your site. Add the following code to your theme's style.css file. This code does two things. It displays the home button icon and hides the text associated with the menu item.

.home-button {
	background: url(images/home.png) no-repeat 50% 50% !important;
	background-size: 24px !important;
	-moz-background-size: 24px auto;
	-webkit-background-size: 24px auto;
	text-indent: -9999em;
}

You may have to adjust the size to suit your specific need. Also, the url referenced in the code is located in the child theme's images directory. If that directory doesn't exist in your child theme, you could create it or store your menu icon in another directory of your choosing. Just make sure you change the url above to reflect the correct location for your icon.