How to create custom theme options with WP Customize API

[melbos]

Details

• Topic description: In case you are searching for a way to create extra settings so that your site users could define their custom global site settings these lessons could help you with that. This lesson plan will show you how to create custom option pages using WP Customize API.
• Audience (User, Developer, Contributor, etc.): Developer
• Learning objectives (What will the learner be able to do as a result of this content?): how to create a customized options page with children subpages, how to get values and work with different types of fields
• Content type (Course, Tutorial, Online Workshop, or Lesson Plan): Lesson Plan
• WordPress version (optional):
• Will you be creating this content? (Yes or No): Yes

Related Resources

• Theme Options – The Customize API (https://developer.wordpress.org/themes/customize-api/)
• https://developer.wordpress.org/themes/customize-api/customizer-objects/
• https://developer.wordpress.org/reference/classes/wp_customize_manager/
• https://developer.wordpress.org/reference/hooks/customize_register/
• https://developer.wordpress.org/reference/functions/wp_enqueue_scripts/

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

Development Checklist:

• Gather links to Support and Developer Docs
• Consider any MarComms (marketing communications) resources and link to those
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Create an outline of the example lesson walk-through
• Draft lesson plan
• Copy edit
• Style guide review
• Instructional Review
• Final review
• Publish
• Announce to the Training team
• Announce to lesson plan creator
• Announce to marketing
• Gather feedback from lesson plan users about the quality

Lesson Plan Template

Lession Plan: https://docs.google.com/document/d/1ycaUx0vyqZ9iCxUV_gCWmA_d3JID2hsWMQ_4Gnd1T3g/edit

Description

Customize your theme with WordPress Customize API and empower users with options to quickly modify page appearance.
The purpose of the "Create Custom Theme Options" lesson plan is to empower developers with the knowledge and skills necessary to develop and implement custom theme options in WordPress. This lesson plan caters to individuals interested in creating WordPress themes with additional features and settings that go beyond the default customization options. In the realm of WordPress theme development, customization and flexibility are key aspects that contribute to a theme's success.
The "Create Custom Theme Options" lesson plan dives into the essential concepts and practical steps required to implement a personalized theme options panel, offering users a seamless and intuitive way to modify their website's appearance and functionality.

Objectives

After completing this lesson, participants will be able to:

• Objective 1.1: Understand the structure of a WordPress theme, including template files, style sheets, and the functions.php file.
• Objective 1.2: Analyze the role of theme options in enhancing user customization and experience.
• Objective 1.3: Demonstrate the ability to create and organize theme files and folders efficiently.
• Objective 2.1: Navigate and interact with the Theme Customizer interface.
• Objective 2.2: Identify and implement built-in customization options available in the Theme Customizer.
• Objective 3.1: Utilize WordPress functions and hooks to add new sections and settings.
• Objective 3.2: Apply best practices in naming and organizing custom sections and settings.
• Objective 5.1: Understand the role of CSS variables in the Global Styles system.
• Objective 6.1: Hook into the customize_save action to save settings.
• Objective 6.2: Utilize WordPress Customizer APIs to store and retrieve theme options.
• Objective 7.1: Recognize the relationship between theme options and Global Styles.
• Objective 7.2: Demonstrate how theme options enhance the user experience in both the Customizer and Site Editor.

It’s required that you include a bulleted list of objective(s) for each lesson plan. Objectives should be worded as actions that the participant can do once they’ve finished. See Bloom's Taxonomy of Action Verbs (PDF) as a reference. Avoid using words like "know," "understand," "be introduced to," etc. There should be one assement item for each objective (see below).

Target Audience

Who is this lesson intended for? What interests/skills would they bring? Put an "x" in the brackets for all that apply.

• Users / Content Writers
• Designers
• Developers

Experience Level

How much experience would a participant need to get the most from this lesson? Put an "x" in the brackets for all that apply.

• Beginner
• Intermediate
• Advanced

Type of Instruction

Which strategies will be used for this lesson plan? Put an "x" in the brackets for all that apply.

• Demonstration
• Discussion
• Exercises
• Feedback
• Lecture (Presentation)
• Slides
• Show & Tell
• Tutorial

Time Estimate (Duration)

How long will it take to present this lesson? Put an "x" in the brackets for the one that applies.

• 1 hour or less

Lesson Outline

https://docs.google.com/document/d/1ycaUx0vyqZ9iCxUV_gCWmA_d3JID2hsWMQ_4Gnd1T3g/edit

[jonathanbossenger]

@melbos this looks good to me, I look forward to seeing it when it's ready to be reviewed.

[abdnafees]

Hey guys,

I reached out to Ben on Slack for opportunities to contribute to Make WordPress and he suggested I start from here. Please let me know where and what needs to be done and I will get cracking.

[melbos]

Hi there, Well I created an draft lesson plan on how to create theme options so now it would be good if someone could review the content and help me prepare video lesson for this. How does that sound to you? Thank you Melita

…

On Sun, 26 May 2024 at 17:07, Abdullah Nafees ***@***.***> wrote: Hey guys, I reached out to Ben on Slack for opportunities to contribute to Make WordPress and he suggested I start from here. Please let me know where and what needs to be done and I will get cracking. — Reply to this email directly, view it on GitHub <#1902 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACGWD4ZB326HGX2WFNU3PDZEH3EHAVCNFSM6AAAAAA5SPRUFWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZSGI2TGNBZHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[abdnafees]

@melbos Sounds good to me. I'll be sure to get back to you in a few hours.

[abdnafees]

Tutorial/Lessons Review Checklist

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations is easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Comment:
The content looks solid.

[jonathanbossenger]

Hey folks

@cynthianorman pointed out that Theme options are a topic we're planning to create a video lesson for to be part of the Theme Developer learning pathway.

To avoid duplicating work, I wonder if there's a way forward here for us to collaborate on completing #2517 using some of the objectives from this lesson plan outline.

@melbos, do you see yourself creating this video lesson, or is this something you could collaborate on with Cynthia? If that is the case, we can review the learning objectives here and see which would make sense for the lesson on Theme options for the theme developer learning pathway.

[melbos]

Yes, I am glad that something could be used for learning pathways of theme developers. I can help you with that for sure. Feel free te use any of the content and modify as you wish. If Cynthia is interested in preparing video I will be glad to assist or help any way I can

…

On Wed, 19 Jun 2024 at 15:31, Jonathan Bossenger ***@***.***> wrote: Hey folks @cynthianorman <https://github.com/cynthianorman> pointed out that Theme options are a topic we're planning to create a video lesson <#2517> for to be part of the Theme Developer learning pathway <#2045>. To avoid duplicating work, I wonder if there's a way forward here for us to collaborate on completing #2517 <#2517> using some of the objectives from this lesson plan outline. @melbos <https://github.com/melbos>, do you see yourself creating this video lesson, or is this something you could collaborate on with Cynthia? If that is the case, we can review the learning objectives here and see which would make sense for the lesson on Theme options for the theme developer learning pathway. — Reply to this email directly, view it on GitHub <#1902 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACGWD6BXLUJK7MMUDT7OB3ZIGB4BAVCNFSM6AAAAAA5SPRUFWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZYG4ZTAMRYGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[cynthianorman]

Thanks for your quick reply @melbos - I will definitely use what's here to prepare my video lesson and reach out with any questions I may have

[jonathanbossenger]

Awesome, thanks folks.

[melbos]

Awesome, good luck and let me know when video is ready. I am glad that material will be used for something useful.

…

On Wed, 19 Jun 2024 at 15:43, Cynthia Norman ***@***.***> wrote: Thanks for your quick reply @melbos <https://github.com/melbos> - I will definitely use what's here to prepare my video lesson and reach out with any questions I may have — Reply to this email directly, view it on GitHub <#1902 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACGWD437YVMMPU75EAFQ7TZIGDGJAVCNFSM6AAAAAA5SPRUFWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZYG42TINZSGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>