3

I am trying to add a button in the theme customizer but can't get it to work. So far I created a panel then it shows a partial button but ideally I would like to just have a normal blue WordPress style button at the bottom under the last panel "Additional CSS". Any help is appreciated.

function prefix_customizer_register( $wp_customize ) { $wp_customize->add_panel( 'panel_id', array( 'priority' => 300, 'capability' => 'edit_theme_options', 'theme_supports' => '', 'title' => __( 'Next Step', 'textdomain' ), 'description' => __( 'This is the next step.', 'textdomain' ), ) ); $wp_customize->add_section( 'section_id', array( 'priority' => 10, 'capability' => 'edit_theme_options', 'theme_supports' => '', 'title' => __( 'Edit Pages', 'textdomain' ), 'description' => '', 'panel' => 'panel_id', ) ); $wp_customize->add_setting( 'url_field_id', array( 'default' => '', 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'transport' => '', 'sanitize_callback' => 'esc_url', ) ); $wp_customize->add_control( 'button_id', array( 'type' => 'button', 'priority' => 10, 'section' => 'section_id', 'label' => __( 'Edit Pages', 'textdomain' ), 'description' => '', ) ); } add_action( 'customize_register', 'prefix_customizer_register' );
Improve this question

1 Answer 1

Reset to default
8

There are three things you need to do in particular.

  1. As there are no settings associated with the control, you need to explicitly supply an empty array for settings, as otherwise it will try to look for a setting ID that matches the control ID (here button_id); since that setting never gets created, the control then never finishes initializing. Read more about setting-less controls.
  2. Since the control is going to output an input element with type=button you need to supply the button's label via the value attribute of that element. You can do this by passing it via the input_attrs attribute.
  3. Similarly, if you want to supply a custom class of button button-primary then you can do so by passing it here as well.

In short, this is what you would be looking at:

$wp_customize->add_control( 'button_id', array( 'type' => 'button', 'settings' => array(), // 👈 'priority' => 10, 'section' => 'section_id', 'input_attrs' => array( 'value' => __( 'Edit Pages', 'textdomain' ), // 👈 'class' => 'button button-primary', // 👈 ), ) );

Result:

Button control

Naturally this button will do nothing, so then you'd need to hook it up to custom functionality with JS using something like this:

wp.customize.control( 'button_id', function( control ) { control.container.find( '.button' ).on( 'click', function() { console.info( 'Button was clicked.' ); } ); } );

As of WordPress 4.9-beta1, you'll be able to add a control with JS in this way (needs testing!):

var control = new wp.customize.Control( 'button_id', { type: 'button', settings: [], section: 'section_id', inputAttrs: { value: 'Edit Pages', 'class': 'button button-primary' } } ); wp.customize.control.add( control ); control.container.find( '.button' ).on( 'click', function() { console.info( 'Button was clicked' ); } );

Again, the new JS API needs testing. A dev note will be coming to make.wordpress.org/core.

Improve this answer
1
  • 1
    Testing on Wordpress 4.9.8 when adding button via JS inputAttrs should be defined as input_attrs Commented Sep 6, 2018 at 14:48

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.