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

User Contributed Notes

1. Skip to note 9 content

   Codex 9 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"  />
2. Skip to note 10 content

   Codex 9 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' );
3. Skip to note 11 content

   Codex 9 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' );
4. Skip to note 12 content

   Codex 9 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 );
5. Skip to note 13 content

   Codex 9 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 );
6. Skip to note 14 content

   Codex 9 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 );
7. Skip to note 15 content

   Codex 9 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' );
8. Skip to note 16 content

   Cedric Moris Kelly 11 months 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

   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>