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 Beautiful Plugin Settings Pages
Search
Patrick Rauland
May 08, 2015
Technology
2
980
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
110
Black Friday 2020: Your Biggest Sales Day Yet
bftrick
1
54
10 Uncommon (& Weird) Ways to Prevent Fights
bftrick
0
130
WooCommerce and You - A Love Story - WordCamp Minneapolis 2018
bftrick
0
75
Live Your Life Like a Supervillain
bftrick
0
99
Ninja Gravity Form 7
bftrick
0
59
Are Robots Coming for Your Job?
bftrick
0
57
Scoping eCommerce Projects
bftrick
0
210
Accounting basics you need to get to a $1M+ seller
bftrick
0
120
Other Decks in Technology
See All in Technology
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
710
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
540
シン・Kafka / shin-kafka
oracle4engineer
PRO
7
2.7k
NgRx Signal Store
rainerhahnekamp
0
120
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
190
転移学習とドメイン適応の基礎
kmatsui
2
570
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
640
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
0
220
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
アプリがつくるNOT A HOTELブランド
hokuts
1
450
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
160
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Scaling GitHub
holman
457
140k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Product Roadmaps are Hard
iamctodd
43
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Why Our Code Smells
bkeepers
PRO
331
56k
KATA
mclloyd
14
12k
The Mythical Team-Month
searls
215
42k
Infographics Made Easy
chrislema
237
18k
Code Review Best Practice
trishagee
54
15k
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