How To Customize Your Search Placeholder Text For Genesis Child Theme

If you're using Genesis theme framework and a child theme for your WordPress website, you're going to love this short but hopefully useful tutorial.

I'm going to show you how you can customize the search box input placeholder text and the search box input search button using some simple PHP code.

Let's get to it.

First of all, as with any WordPress or Genesis child theme customizations, you'll need to backup your WordPress site.

A simple solution, if you don't have access to a backup service, would be to create a saved copy of the file or folder you're going to be making modifications to.

You can save a copy on your computer's local drive for now.

OK, let's begin.

Log into your WP dashboard

First, log into your WordPress dashboard and go to Appearance > Editor.

Next, find the functions.php file for the Genesis child theme you have installed and activated.

Remember, ensure you have backed up your site, or the entire content of this file before you make changes to it.

Add the PHP snippet code for the form

First, we'll customize the form.

Copy the PHP code below and paste it at the very bottom of your functions.php file.

//* Do not add above php tag. Use code below only.

//* Customize search form input box.
add_filter( 'genesis_search_button_text', 'magnet_search_text' );
function magnet_search_text( $text ) {
return esc_attr( 'Search my blog name...' );
}

Next, replace the part that says 'Search my blog name...' with your own text.

If you take a look at the custom search form on my website, you'll see that I have 'Search Magnet4Blogging'.

You can now Save this, clear your WP cache, test it and leave it, or you can continue with customizing the CTA search button.

Add the PHP snippet code for the button

OK, so, if you want to change the custom search button, copy the PHP code snippet below and paste it into your function.php file. Anywhere at the bottom, after the code you added above, will do nicely. (See image below)

//* Do not add the above tag. Use code below only.

//* Customize the search form input button.
add_filter( 'genesis_search_button_text', 'magnet_search_button_text' );
function magnet_search_button_text( $text ) {
return esc_attr( 'Go' );
}

Next, you can customize the code by adding your own text to replace 'Go', marked in red.

You can also change the function name if you like into something of your own, also marked in red. Or, to keep things simple, just leave it as it is.

Once you're done, hit Save, clear your WordPress cache and reload your website to see the changes.

That's it, I hope this worked for you, but if it didn't, simply revert back to your backup version of your functions.php file.

Customizing with CSS

If you want to customize your Search Form style, you can do so by adding custom CSS to the Additional CSS field found under Appearance > Customize.

Generally, you'll need to find the 'Type Selector' or 'Class Selector' for the form. For most Genesis child themes it's usually something like this -

.search-form {
background: #fff;
}

or something like this -

.input {
background: #fff;
}

Your best bet is to use the DevTools in Chrome to find the name of the selector for your form. You can access the DevTools by right-clicking on your mouse and selecting 'Inspect'.

Did this tutorial cause your website to crash?

If your website crashed because of this tutorial, first of all, I'm truly sorry.

I have tested and used this method for many personal and client website projects, so I know the code above works.

If you need to regain access to your WordPress website and can't do so via your WP dashboard, you'll need to log into your web hosting cPanel, then go to File Manager > WP Content > Themes > Function.php to restore your functions.php backup from there.

If you need any assistance, please use the Live Chat option below, or get in touch with me via email, or via my Facebook page.

Best of luck.

Psst, need help with customizing your WordPress website? Check out this page to see how I can help.