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
88
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
220
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
95
Live Your Life Like a Supervillain
bftrick
0
170
Ninja Gravity Form 7
bftrick
0
85
Are Robots Coming for Your Job?
bftrick
0
77
Scoping eCommerce Projects
bftrick
0
280
Accounting basics you need to get to a $1M+ seller
bftrick
0
140
Other Decks in Technology
See All in Technology
リリース2ヶ月で収益化した話
kent_code3
1
300
Serverless Meetup #21
yoshidashingo
1
130
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
640
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
130
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
720
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
0
140
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
0
190
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
9
2.3k
AIに頼りすぎない新人育成術
cuebic9bic
3
310
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
710
Claude Codeから我々が学ぶべきこと
oikon48
10
2.8k
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
150
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
How to train your dragon (web standard)
notwaldorf
96
6.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
A better future with KSS
kneath
239
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Code Review Best Practice
trishagee
69
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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