• Home
  • Blog

  • Home
  • Blog

0January 3, 2015

Add a Class to the WordPress Search Button

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!

Filed Under: Development Tagged With: Button, Genesis, Search, WordPress

Categories

  • Development (2)

Recent Posts

  • Add a Class to the WordPress Search Button
  • Add a Class to the WordPress Comment Submit Button

Recent Comments

    Copyright © 2015 All Rights Reserved

    Site by Alain Schlesser