A similar problem to the one discussed in my previous article crops up if you want to style the Search button of the WordPress search widget. If you’re using a front-end framework like Foundation or Bootstrap, you’ll want to add one of the predefined classes to this button, instead of styling it directly.
Standard WordPress Search
Adding a class to the button is pretty easy if you know where to catch the corresponding HTML output. Here’s a code snippet with lots of comments that shows you how I add the classes small, radius and button to standard WordPress search button. These classes are predefined in the Foundation framework, so this gives my search button a nice and modern look.
Genesis Search
If you’re using the Genesis framework (and you really should!), then you’ll have to adapt the code a bit. Genesis alters the rendering of the standard search form, so you won’t find the class that we’ve hooked onto in the first code snippet.
Here’s a modified example that has been adapted to work with the Genesis framework. NB: This should only be used in a Genesis child theme.
The code is pretty straightforward, and there’s only a small difference between these two versions.
I hope this saves you from spending time browsing through WordPress / Genesis source code!