Recently, I was asked how I added the little magnifying glass into the Genesis site search box at the bottom of my website. It’s a great question and worth of a quick tutorial on how to add a Dashicon to your Genesis search box.
Dashicons is the official icon font of the WordPress admin since version 3.8. It’s similar in functionality as Font Awesome, another popular collection of icon fonts.
OK, lets get started!
Step 1: Enqueue Scripts
My website is using a customized version of the Sample child theme from StudioPress. Since this child theme from StudioPress is bare-bones, there is no inclusion of the Dashicons. If you’re using the Sample child theme, you will have to add it to your theme. Otherwise, most all other child themes from StudioPress is already including the Dashicons.
Look for this code in your child theme.
wp_enqueue_style( ‘dashicons’ );
If you see that line of code in your Genesis child theme then you can skip ahead to Step #2. Otherwise, add the following code into your functions.php file.
Also note that you most likely have a function in your theme that is enqueuing your scripts. If that is the case, you can simply add wp_enqueue_style( ‘dashicons’ ); into that function.
Step #2: Genesis Search Button
In Step #2 you will change the default text of “Search” to a magnifying glass Dashicon.
Lucky for you, the function genesis_search_form() has a filter that allows you to return something other than the word search. So what we’re going to do is apply a filter and return a magnifying glass Dashicon.
Place the code below into your functions.php file.
For all you coding geeks out there, you can find the genesis_search_form() function inside of genesis/lib/structure/search.php. There are other filters that you can apply to that function if you want to further customize the Genesis search box.
I’ve covered other Genesis Search Form customizations here.
Step #3: CSS Magic
Next you simply customize the CSS that targets the Genesis search form. Use my example below to get you started. Fine tuning the CSS is your homework. I’m sure that each theme will be slightly different, but I’m sure you can handle it.
Complete List of Dashicons
If you want to see the complete list of WordPress dashicons, you can view them here.
Genesis Search Box and FontAwesome
For those of you that prefer to use FontAwesome in your Genesis search box, I’ve got you covered.
Add the Php code snippet below into your functions.php file and the css into your child theme’s style.css file.
The CSS code is simply a starter. You will need to tweak it further for your specific implementation.