submit_button() – Function | Developer.WordPress.org

Echoes a submit button, with provided text and appropriate class(es).

Parameters

$textstringoptional: The text of the button. Defaults to ‘Save Changes’.
Default:''
$typestringoptional: The type and CSS class(es) of the button. Core values include 'primary', 'small', and 'large'. Default 'primary'.
Default:'primary'
$namestringoptional: The HTML name of the submit button. If no id attribute is given in the $other_attributes parameter, $name will be used as the button’s id. Default 'submit'.
Default:'submit'
$wrapbooloptional: True if the output button should be wrapped in a paragraph tag, false otherwise.
Default:true
$other_attributesarray|stringoptional: Other attributes that should be output with the button, mapping attributes to their values, e.g. array( 'id' => 'search-submit' ).
These key/value attribute pairs will be output as attribute="value", where attribute is the key. Attributes can also be provided as a string, e.g. id="search-submit", though the array format is generally preferred.

Default:''

More Information

This function cannot be used on the front end of the site, it is only available when loading the administration screens.

Parametr $type can be a single value, or a space separated list of values, or an array of values. The values determine the HTML classes of the button.

If $type is ‘delete’, the classes are ‘button-secondary delete’.
Otherwise the first class is ‘button’, followed by any of these in order of appearance:
- type value ‘primary’ makes class ‘button-primary’
- type value ‘small’ makes class ‘button-small’
- type value ‘large’ makes class ‘button-large’
- type value ‘secondary’ or ‘button-secondary’ is ignored (the ‘button’ class has the styling)
- any other type value ‘foo’ makes the class ‘foo’

For example, the default $type ‘primary’ results in a button with HTML classes ‘button button-primary’.

This function does not return a value. The HTML for the button is output directly to the browser.

Uses the related function get_submit_button(), which returns the button as a string instead of echoing it. It has a different default $type, 'primary large', resulting in the HTML classes 'button button-primary button-large'.

Source

	echo get_submit_button( $text, $type, $name, $wrap, $other_attributes );
}

View all references View on Trac View on GitHub

Changelog

Version	Description
3.1.0	Introduced.

User Contributed Notes

Skip to note 9 content

Codex 10 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 3You must log in to vote on the helpfulness of this note
Default Usage
```
submit_button();
```
This will output the following HTML, which will display a button with the text “Save Changes”.
```
<input type="submit" name="submit" id="submit" class="button button-primary" value="Save Changes"  />
```
Log in to add feedback
Skip to note 10 content

Codex 10 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note
Display a Secondary Button
WordPress styles secondary and primary buttons differently. Primary buttons are blue, and stand out more than secondary buttons, which are grey. By default, submit_button() outputs a primary button. To display a secondary button instead, set the $type parameter to 'secondary':
```
submit_button( __( 'Reset', 'textdomain' ), 'secondary' );
```
Log in to add feedback
Skip to note 11 content

Codex 10 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note
Display a Delete Button
By default, WordPress doesn’t currently appear to have custom styling for delete buttons, but it does give them the 'delete' HTML class. However, it’s possible that could change in the future, so it’s a good idea to specify the $type as 'delete' when displaying a delete button:
```
submit_button( __( 'Delete', 'textdomain' ), 'delete' );
```
By default, delete buttons will be displayed as secondary buttons, not primary. If you want to display it as a primary button, you can do it like this:
```
submit_button( __( 'Delete', 'textdomain' ), 'delete button-primary' );
```
Log in to add feedback
Skip to note 12 content

Codex 10 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note
Using the $name Parameter
The $name parameter may be used if you want to set the HTML name attribute for the button. By default, this will be 'submit'.
```
submit_button( __( 'Save Settings', 'textdomain' ), 'primary', 'wpdocs-save-settings' );
```
By default, the $name is also used to fill out the button’s id attribute. To change this, you can pass an id via the $other_attributes parameter:
```
$other_attributes = array( 'id' => 'wpdocs-button-id' );
submit_button( __( 'Save Settings', 'textdomain' ), 'primary', 'wpdocs-save-settings', true, $other_attributes );
```
Log in to add feedback
Skip to note 13 content

Codex 10 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note
Using the $wrap Parameter
The $wrap parameter controls whether the button is wrapped in a paragraph tag, which it is by default. This can be a help or a hindrance depending on where an how you wish to display the button. To turn this behavior off, pass false for the fourth parameter:
```
submit_button( __( 'Submit', 'textdomain' ), 'primary', 'submit-form', false );
```
Log in to add feedback
Skip to note 14 content

Codex 10 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note
Specifying Other HTML Attributes
You can add any HTML attributes you chose to your button using the $other_attributes parameter. For example:
```
$other_attributes = array( 'tabindex' => '1' );
submit_button( __( 'Go!', 'textdomain' ), 'secondary', '', true, $other_attributes );
```
Log in to add feedback
Skip to note 15 content

Codex 10 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
Using Custom Text
To output a button with custom text, use the first parameter like this:
```
submit_button( 'Submit' );
```
Log in to add feedback

Cedric Moris Kelly 1 year ago

This example shows a plugin options page form with two submit buttons, each serving different purposes.

<form method="post">
  <?php
  settings_fields( 'wpdocs-fields-settings' );
  do_settings_sections( 'wpdocs-sections-settings' );

  /* Default submit button with "Save Changes" text */
  submit_button(); 

  /* Additional attributes for the custom submit button */
  $attributes = array( 'id' => 'wpdocs-field-id' ); 

  /* Custom submit button */
  submit_button( 
    esc_html__( 'My action', 'text_domain' ), // Text of the button, localized
    'primary', // CSS class for the button
    'wpdocs-input-name', // 'name' attribute for the button to identify it in POST data
    true, // Wrap the button in a <p> tag
    $attributes // Additional attributes like 'id'
  ); 
  ?>
</form>

submit_button( string $text = '', string $type = 'primary', string $name = 'submit', bool $wrap = true, array|string $other_attributes = '' )

In this article

Description

See also

Parameters

More Information

Source

Changelog

User Contributed Notes