Using the WordPress Customizer to Build Beautiful Plugin Settings Pages

Transcript

1. Using the WordPress Customizer to Build Beautiful Plugin Settings Pages

   Patrick Rauland @BFTrick
2. None

3. Reading Can Be Difficult

4. No matter how clearly you write people will misinterpret your

   words.
5. None
6. None
7. None
8. None
9. None
10. None

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/
15. None

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 ); }
18. None

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 );
21. None

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' );

27. None

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 );
31. None

32. 7. Save Settings as Plugin Options

33. $wp_customize->add_setting( 'wc_email_background_color', array( 'type' => 'option', 'default' => '#f5f5f5', 'transport'

    => 'postMessage', ) );
34. None

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