Upload
simone-damico
View
1.793
Download
1
Tags:
Embed Size (px)
DESCRIPTION
How to create a custom Theme Options in your Wordpress Theme. Wordcamp 2013, Bologna, Italy.
Citation preview
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Manage custom options pages in Wordpress
SIMONE D’AMICO
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Simone D’Amico
RELATORE
Web: simonedamico.com
Twitter: @dymissyFacebook: dymissy
Web Developer by vocation. Team Leader at Your Inspiration. Blogger.
He loves everything that revolves around the user experience and web development, with a focus on jQuery and Wordpress. Furthermore he writes for various Italian online magazines such as Html.it and Your Inspiration Web or international blogs as webexpedition18.com and webification.
BIO
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
THEME OPTIONS IN WORDPRESS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
THEME OPTIONS IN WORDPRESS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WHY SHOULD I USE A THEME OPTIONS?
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
• Improve customer experience
• Don’t reinvent the wheel
• Higher maintainable code
• …and much more!
OPTIONS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
OPTIONS API
• Way of storing data in your Wordpress installation
• Easy way to use, access, update and delete options
• Stored in wp_options table
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Add / Delete Options
• add_option()
• delete_option()
• add_site_option()
• delete_site_option()
Get / Update Options
• get_option()
• update_option()
• get_site_option()
• update_site_option()
OPTIONS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
SETTINGS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
SETTINGS API
• First added in Wordpress
2.7
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
• Allows admin pages
containing settings forms
• Lets you define sections
within settings pages and
fields within each section
SETTINGS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Add Field/Section
• add_settings_field()
• add_settings_section()
Options Form Rendering
• settings_fields()
• do_settings_sections()
• do_settings_fields()
Errors
• add_settings_error()
• get_settings_errors()
• settings_errors()
Setting Register/Unregister
• register_setting()
• unregister_setting()
SETTINGS API:A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
1. Register the settings
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
2. Add a new submenu page in Wordpress admin area
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
3. Print the Theme Options page
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
3. Print the Theme Options page
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
4. Add new sections
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
4. Add new sections
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
5. Add fields to the section
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
5. Add fields to the section
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Let’s take a look to the final result!
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Example is available under GPL 2.0 license at:
http://j.mp/WTBb4Q
OPTIONS FRAMEWORK THEME
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
ADVANCED THEME OPTIONS EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
OPTIONS FRAMEWORK THEME
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
• Do we really need to code from scratch the Theme Options?
• Options Framework Theme could do that for us!
• The Options Framework Theme makes it easy to include a
full featured options panel in any WordPress theme.
• It’s a bundled version of the Options Framework Plugin for
those folks who want to build the options directly into the
theme.
• Released under GPL 2.0 license
• https://github.com/devinsays/options-framework-theme
OPTIONS FRAMEWORK THEME
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
OPTIONS FRAMEWORK THEME
ANY QUESTIONS?
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
?
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Thanks
SIMONE D’AMICO