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
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
120
Black Friday 2020: Your Biggest Sales Day Yet
bftrick
1
75
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
190
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
87
Live Your Life Like a Supervillain
bftrick
0
150
Ninja Gravity Form 7
bftrick
0
70
Are Robots Coming for Your Job?
bftrick
0
66
Scoping eCommerce Projects
bftrick
0
250
Accounting basics you need to get to a $1M+ seller
bftrick
0
120
Other Decks in Technology
See All in Technology
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
120
Windows の新しい管理者保護モード
murachiakira
0
200
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
5.8k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
350
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
9
3.6k
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
340
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
160
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
210
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
140
Two Blades, One Journey: Engineering While Managing
ohbarye
4
1.9k
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Music & Morning Musume
bryan
46
6.4k
Designing for Performance
lara
604
68k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
YesSQL, Process and Tooling at Scale
rocio
172
14k
What's in a price? How to price your products and services
michaelherold
244
12k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
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