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
79
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
210
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
90
Live Your Life Like a Supervillain
bftrick
0
160
Ninja Gravity Form 7
bftrick
0
73
Are Robots Coming for Your Job?
bftrick
0
69
Scoping eCommerce Projects
bftrick
0
260
Accounting basics you need to get to a $1M+ seller
bftrick
0
130
Other Decks in Technology
See All in Technology
生成AI時代のセキュアCI/CDとソース管理
yuriemori
0
120
MCP Documentation Server @AI Coding Meetup #1
yyoshiki41
2
2.5k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
21k
大規模サービスにおける カスケード障害
takumiogawa
3
780
10分でわかるfreeeのQA
freee
1
12k
20250408 AI Agent workshop
sakana_ai
PRO
9
1.9k
近年の PyCon 情勢から見た PyCon APAC のまとめ
terapyon
0
280
やさしいMCP入門
minorun365
PRO
144
89k
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
210
ゆるくVPC Latticeについてまとめてみたら、意外と奥深い件
masakiokuda
2
220
システムとの会話から生まれる先手のDevOps
kakehashi
PRO
0
140
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.3k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
What's in a price? How to price your products and services
michaelherold
245
12k
Agile that works and the tools we love
rasmusluckow
328
21k
Designing Experiences People Love
moore
141
23k
Practical Orchestrator
shlominoach
186
10k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Documentation Writing (for coders)
carmenintech
69
4.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
A better future with KSS
kneath
239
17k
Gamification - CAS2011
davidbonilla
81
5.2k
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