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
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
5.2k
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
640
シン・Kafka / shin-kafka
oracle4engineer
PRO
7
2.7k
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
0
150
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
Terraformあれやこれ/terraform-this-and-that
emiki
5
470
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
150
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
2.5k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
A better future with KSS
kneath
231
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Designing Experiences People Love
moore
136
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
The Language of Interfaces
destraynor
151
23k
Ruby is Unlike a Banana
tanoku
96
10k
Typedesign – Prime Four
hannesfritz
36
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Visualization
eitanlees
135
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
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