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
88
Live Your Life Like a Supervillain
bftrick
0
150
Ninja Gravity Form 7
bftrick
0
71
Are Robots Coming for Your Job?
bftrick
0
67
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
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
730
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
400
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
250
OPENLOGI Company Profile
hr01
0
60k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
340
クラウド食堂とは?
hiyanger
0
120
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.8k
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
930
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
170
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Facilitating Awesome Meetings
lara
52
6.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
KATA
mclloyd
29
14k
A Philosophy of Restraint
colly
203
16k
What's in a price? How to price your products and services
michaelherold
244
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Code Review Best Practice
trishagee
67
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