unsplash-logo camilo jimenez

Adding a Custom Class to a Submit Button

Published 2013-01-17

While you can hand-code the HTML for a submit button in a form, WordPress has a nice function, submit_button(), that echoes the correct code for you.

For a recent project, I wanted to restyle some buttons to make them look like links rather than buttons. While you don’t NEED a special class to pull this off, it is easier and neater in the CSS. I thought this would be achievable in the $other_attributes. However, the $type parameter accepts any string, not just the WordPress defaults.

Whatever you put there appears in the class attribute of the button. Then use that class to style the button however you wish!

 * Default WordPress submit() parameters
 * @param  string  $text              changes the text on the button
 * @param  string  $type              determines the style of the button. WordPress styling options:
 *    primary - the default
 *    secondary
 *    delete
 *    custom - add your custom class for styling here!
 * @param  string  $name              sets the name attribute for the button, its "Submit" by default.
 * @param  string  $wrap              determines if the button is wrapped in paragraphs tags or not,
 *     the default is true.
 * @param  array   $other_attributes  sets other attributes for the button.
submit_button('Whatever Text', 'my-custom-class');

Gist of the code above

Share this post!

Check out these most recent posts:

How to Add a Class to a Metabox

Toggling the visibility of a metabox using a form requires the metabox to have a custom class. This is how to add custom classes to a metabox.

ArtistDataPress Expiration

In case you haven't heard, ArtistData is shutting down, so the ArtistDataPress plugin will also be shutting down as of October 14.

Avoiding get_theme_mod Errors

If you're getting an error related to the get_theme_mod function, the solution is simpler than you think. Check out this solution.

Building Your First Widget

Watch the video of my presentation about building your first widget from WordCamp Nashville 2013. You can also follow along with the code samples.