Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Using the WordPress Customizer to Build Beautif...
Search
Patrick Rauland
May 08, 2015
Technology
2
1.1k
Using the WordPress Customizer to Build Beautiful Plugin Settings Pages
Using the Customizer at LoopConf
Patrick Rauland
May 08, 2015
Tweet
Share
More Decks by Patrick Rauland
See All by Patrick Rauland
Google Analytics for Clients
bftrick
0
130
Black Friday 2020: Your Biggest Sales Day Yet
bftrick
1
91
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
220
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
95
Live Your Life Like a Supervillain
bftrick
0
170
Ninja Gravity Form 7
bftrick
0
86
Are Robots Coming for Your Job?
bftrick
0
82
Scoping eCommerce Projects
bftrick
0
280
Accounting basics you need to get to a $1M+ seller
bftrick
0
140
Other Decks in Technology
See All in Technology
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
270
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
hypermkt
0
1.5k
GopherCon Tour 概略
logica0419
2
150
2025-09-25 SRETT #13 ConftestによるTerraformのPolicy as Codeを試してみる
masasuzu
0
120
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.1k
AI×Data×SaaS×Operation
sansantech
PRO
0
100
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
9
3.3k
“2件同時配達”の開発舞台裏 〜出前館PMが挑んだダブルピック実現に向けた体験設計〜
demaecan
0
120
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
380
そのグラフに「魂」は宿っているか? ~生成AI全盛期におけるデータ可視化手法とライブラリ比較~
negi111111
2
800
データエンジニアがこの先生きのこるには...?
10xinc
0
380
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
210
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Become a Pro
speakerdeck
PRO
29
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Scaling GitHub
holman
463
140k
Practical Orchestrator
shlominoach
190
11k
Designing Experiences People Love
moore
142
24k
Transcript
Using the WordPress Customizer to Build Beautiful Plugin Settings Pages
Patrick Rauland @BFTrick
None
Reading Can Be Difficult
No matter how clearly you write people will misinterpret your
words.
None
None
None
None
None
None
7 Steps to Hijack the Customizer
1. Create a Button That Loads the Customizer
// get customizer url $url = admin_url( 'customize.php' );
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/
None
2. Load a Specific Page
// 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 ); }
None
3. Add a Return URL
// get the return page $url = add_query_arg( 'return', urlencode(
add_query_arg( array( 'page' => 'wc-settings', 'tab' => 'email' ), admin_url( 'admin.php' ) ) ), $url );
None
4. Add a Flag in Customizer URL
$url = add_query_arg( 'wc-email-customizer', 'true', $url );
5. Hide Default Controls
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; }
global $wp_customize; $wp_customize->remove_section( 'themes' );
None
6. Add New controls
$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', ) ) );
// autofocus a section $url = add_query_arg( 'autofocus[section]', '{name of
your section}', $url );
None
7. Save Settings as Plugin Options
$wp_customize->add_setting( 'wc_email_background_color', array( 'type' => 'option', 'default' => '#f5f5f5', 'transport'
=> 'postMessage', ) );
None
No matter how clearly you write people will misinterpret your
words
Using the Customizer allows you to show users what a
setting does
Patrick Rauland @BFTrick WooCommerce Product Manager WooThemes