manage custom options pages in wordpress
DESCRIPTION
How to create a custom Theme Options in your Wordpress Theme. Wordcamp 2013, Bologna, Italy.TRANSCRIPT
![Page 1: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/1.jpg)
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Manage custom options pages in Wordpress
SIMONE D’AMICO
![Page 2: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/2.jpg)
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
![Page 3: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/3.jpg)
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 4: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/4.jpg)
THEME OPTIONS IN WORDPRESS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 5: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/5.jpg)
THEME OPTIONS IN WORDPRESS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 6: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/6.jpg)
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!
![Page 7: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/7.jpg)
OPTIONS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 8: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/8.jpg)
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()
![Page 9: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/9.jpg)
OPTIONS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 10: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/10.jpg)
SETTINGS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 11: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/11.jpg)
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
![Page 12: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/12.jpg)
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()
![Page 13: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/13.jpg)
SETTINGS API:A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 14: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/14.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
1. Register the settings
![Page 15: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/15.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
2. Add a new submenu page in Wordpress admin area
![Page 16: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/16.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
3. Print the Theme Options page
![Page 17: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/17.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
3. Print the Theme Options page
![Page 18: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/18.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
4. Add new sections
![Page 19: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/19.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
4. Add new sections
![Page 20: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/20.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
5. Add fields to the section
![Page 21: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/21.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
5. Add fields to the section
![Page 22: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/22.jpg)
SETTINGS API: A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Let’s take a look to the final result!
![Page 23: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/23.jpg)
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
![Page 24: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/24.jpg)
OPTIONS FRAMEWORK THEME
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 25: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/25.jpg)
ADVANCED THEME OPTIONS EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 26: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/26.jpg)
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
![Page 27: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/27.jpg)
OPTIONS FRAMEWORK THEME
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
![Page 28: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/28.jpg)
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
OPTIONS FRAMEWORK THEME
![Page 29: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/29.jpg)
ANY QUESTIONS?
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
?
![Page 30: Manage custom options pages in Wordpress](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559080341a28abb3518b4705/html5/thumbnails/30.jpg)
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Thanks
SIMONE D’AMICO