Using the WordPress Customizer to Build Beautiful Plugin Settings Pages

Using the Customizer at LoopConf

Transcript

1. Using the WordPress Customizer to Build Beautiful Plugin Settings Pages Patrick Rauland @BFTrick
3. Reading Can Be Difficult
4. No matter how clearly you write people will misinterpret your words.
11. 7 Steps to Hijack the Customizer
12. 1. Create a Button That Loads the Customizer
13. // get customizer url $url = admin_url( 'customize.php' );
14. array( 'title' => __( 'Customize!', 'woocommerce' ), 'desc' => __( 'Customize your product archive pages with the WordPress Customizer.', 'woocommerce' ), 'type' => 'wc_button', 'link' => $url ) WooCommerce Settings API: http://docs.woothemes.com/ document/settings-api/
16. 2. Load a Specific Page
17. // get special page $shop_page_url = get_permalink( wc_get_page_id( 'shop' ) ); // if we have a shop page go straight to it // the default will load the home page if ( $shop_page_url ) { $url = add_query_arg( 'url', urlencode( $shop_page_url ), $url ); }
19. 3. Add a Return URL
20. // get the return page $url = add_query_arg( 'return', urlencode( add_query_arg( array( 'page' => 'wc-settings', 'tab' => 'email' ), admin_url( 'admin.php' ) ) ), $url );
22. 4. Add a Flag in Customizer URL
23. $url = add_query_arg( 'wc-email-customizer', 'true', $url );
24. 5. Hide Default Controls
25. add_filter( 'customize_control_active', 'control_filter', 10, 2 ); function control_filter( $active, $control ) { if ( in_array( $control->section, array( 'wc_email_header', 'wc_email_body', 'wc_email_footer', 'wc_email_send' ) ) ) { return true; } return false; }
26. global $wp_customize; $wp_customize->remove_section( 'themes' );
28. 6. Add New controls
29. $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'wc_email_header_image_control', array( 'label' => __( 'Upload a Header', 'woocommerce' ), 'priority' => 10, 'section' => 'wc_email_header', 'settings' => 'woocommerce_email_header_image', ) ) );
30. // autofocus a section $url = add_query_arg( 'autofocus[section]', '{name of your section}', $url );
32. 7. Save Settings as Plugin Options
33. $wp_customize->add_setting( 'wc_email_background_color', array( 'type' => 'option', 'default' => '#f5f5f5', 'transport' => 'postMessage', ) );
35. No matter how clearly you write people will misinterpret your words
36. Using the Customizer allows you to show users what a setting does
37. Patrick Rauland @BFTrick WooCommerce Product Manager WooThemes