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
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
370
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
150
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
130
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
660
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
630
Wasm元年
askua
0
160
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
220
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
680
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
180
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.6k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Applications with DynamoDB
mza
95
6.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Code Review Best Practice
trishagee
69
18k
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