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
91
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
230
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
96
Live Your Life Like a Supervillain
bftrick
0
170
Ninja Gravity Form 7
bftrick
0
86
Are Robots Coming for Your Job?
bftrick
0
82
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
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
150
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
150
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
220
事業開発におけるDify活用事例
kentarofujii
4
1.1k
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
190
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
180
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
100
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
1k
Building a cloud native business on open source
lizrice
0
130
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2.2k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Faster Mobile Websites
deanohume
310
31k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Documentation Writing (for coders)
carmenintech
75
5.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.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