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
230
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
96
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
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
180
Railsの話をしよう
yahonda
0
170
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
220
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
110
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
180
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
2
700
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
100
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
190
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
230
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
120
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
3
1.1k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
Become a Pro
speakerdeck
PRO
29
5.6k
How to train your dragon (web standard)
notwaldorf
97
6.3k
It's Worth the Effort
3n
187
28k
Writing Fast Ruby
sferik
629
62k
Side Projects
sachag
455
43k
RailsConf 2023
tenderlove
30
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
BBQ
matthewcrist
89
9.8k
Six Lessons from altMBA
skipperchong
29
4k
Documentation Writing (for coders)
carmenintech
75
5.1k
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