How to create a custom Theme Options in your Wordpress Theme. Wordcamp 2013, Bologna, Italy.

1. Manage custom options
pages in Wordpress
SIMONE D’AMICO
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013
@WORDCAMPBOLOGNA # WPCAMPBO13

2. RELATORE
Simone D’Amico
Web: simonedamico.com
Twitter: @dymissy
Facebook: dymissy
BIO
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.
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

3. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

4. THEME OPTIONS
IN WORDPRESS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

5. THEME OPTIONS IN WORDPRESS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

6. WHY SHOULD I USE A THEME OPTIONS?
• Improve customer experience
• Don’t reinvent the wheel
• Higher maintainable code
• …and much more!
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

7. OPTIONS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

8. OPTIONS API
• Way of storing data in your Wordpress installation
• Easy way to use, access, update and delete options
• Stored in wp_options table
Add / Delete Options Get / Update Options
• add_option() • get_option()
• delete_option() • update_option()
• add_site_option() • get_site_option()
• delete_site_option() • update_site_option()
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

9. OPTIONS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

10. SETTINGS API
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

11. SETTINGS API
• First added in Wordpress
2.7
• Allows admin pages
containing settings forms
• Lets you define sections
within settings pages and
fields within each section
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

12. SETTINGS API
Setting Register/Unregister Add Field/Section
• register_setting() • add_settings_field()
• unregister_setting() • add_settings_section()
Options Form Rendering Errors
• settings_fields() • add_settings_error()
• do_settings_sections() • get_settings_errors()
• do_settings_fields() • settings_errors()
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

13. SETTINGS API:
A CONCRETE EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

14. SETTINGS API: A CONCRETE EXAMPLE
1. Register the settings
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

15. SETTINGS API: A CONCRETE EXAMPLE
2. Add a new submenu page in Wordpress admin area
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

16. SETTINGS API: A CONCRETE EXAMPLE
3. Print the Theme Options page
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

17. SETTINGS API: A CONCRETE EXAMPLE
3. Print the Theme Options page
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

18. SETTINGS API: A CONCRETE EXAMPLE
4. Add new sections
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

19. SETTINGS API: A CONCRETE EXAMPLE
4. Add new sections
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

20. SETTINGS API: A CONCRETE EXAMPLE
5. Add fields to the section
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

21. SETTINGS API: A CONCRETE EXAMPLE
5. Add fields to the section
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

22. SETTINGS API: A CONCRETE EXAMPLE
Let’s take a look to the final result!
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

23. SETTINGS API: A CONCRETE EXAMPLE
Example is available under GPL 2.0 license at:
http://j.mp/WTBb4Q
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

24. OPTIONS FRAMEWORK THEME
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

25. ADVANCED THEME OPTIONS EXAMPLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

26. OPTIONS FRAMEWORK THEME
• 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
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

27. OPTIONS FRAMEWORK THEME
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

28. OPTIONS FRAMEWORK THEME
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

29. ANY QUESTIONS?
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

30. Thanks
SIMONE D’AMICO
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013
@WORDCAMPBOLOGNA # WPCAMPBO13