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
84
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
220
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
94
Live Your Life Like a Supervillain
bftrick
0
170
Ninja Gravity Form 7
bftrick
0
84
Are Robots Coming for Your Job?
bftrick
0
74
Scoping eCommerce Projects
bftrick
0
270
Accounting basics you need to get to a $1M+ seller
bftrick
0
140
Other Decks in Technology
See All in Technology
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
430
Geminiとv0による高速プロトタイピング
shinya337
0
200
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
150
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
290
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
130
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
100
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
150
ビギナーであり続ける/beginning
ikuodanaka
1
200
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
300
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
RailsConf 2023
tenderlove
30
1.1k
Making Projects Easy
brettharned
116
6.3k
Designing Experiences People Love
moore
142
24k
The Language of Interfaces
destraynor
158
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Balancing Empowerment & Direction
lara
1
390
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