Pro Yearly is on sale from $80 to $50! »

Using the WordPress Customizer to Build Beautiful Plugin Settings Pages

Using the WordPress Customizer to Build Beautiful Plugin Settings Pages

Using the Customizer at LoopConf

D4398e14879a394a9feabd6871d6bbaa?s=128

Patrick Rauland

May 08, 2015
Tweet

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