Complete Customizer Development For WordPress Themes/Plugins

In this video, I show you how the customizer works and how it automatically displays changes in your theme.

The theme customizer has 4 components and in this course, we will be programming all of them. I show you the panel, section, control, and settings.

We start coding our theme options in this video, Open your theme's functions.php and follow along by typing along with me. We discuss and add all the customizer's

• panels
• sections
• controls
• settings

Learn how to add an date control to your customizer with a calendar. We also add a new panel as well.

Learn how to add a basic text field control to your customizer.

This is a very important video, because I show you the details on how to display all that wonderful data that your users enter into the customizer. You can add this to any PHP file in your theme you like including:

• header.php
• footer.php
• index.php
• page.php
• single.php
• page templates

I have heard from students that some panels and sections do not display for them. The reason is simple. I explain in this video how to quickly correct and troubleshoot this minor issue.

A special note and some advice on having the latest version of WordPress installed.

Learn how to add an URL control to your customizer. with a sanitization callback function to help escape the URL entered.

Learn how to add an textarea control to your customizer.

Learn how to add an password control to your customizer for more security.

Learn how to add a range control to your customizer. This video shows you how to add a slider and create any range of numbers which the user can use to slide along and select any number in the range.

Learn how to add an email control to your customizer.

Learn how to add a control to upload any image or select one from your WordPress media section.

In this video, I show you how to add a control that lets your theme user pick a color. I also show you how to select the default color. In this video, we select a hex of #FF0000 (red),

Would you like your customizer to offer audio uploads such as MP3s? I show you how to do that in this video.

We can write a background image control. However, this is not the most reliable control as you will soon see in the video.

We already know how to add textbox fields, but what if we wanted to add 5, 20, or even 100? We can easily do that with this code trick that I show you in this video.

Use this customizer code to create a control similar to a HTML <select> element. We start with a simply choice array and then we enhance it by adding a PHP associative array.

With this customizer code, we use the WordPress API to display a list of posts inside a <SELECT> control and then let the user pick one of them as a featured post.

In this session, we create radio button controls and they are as easy as creating select controls.

Sometimes you want to validate the data that is input into the controls like a certain number of calendars, a date, or a URL prefix. We can do this with some simple PHP functions. I show you an example of how to validate a Facebook URL.

This is our first custom control and we will be building a lot. With the code for custom controls, you can design any controls you'd like for your theme and theme options. This one allows the user of your theme to add a Facebook page and a Facebook group URL.

We can create image upload controls and I show you in this video. I show you how we upload the sliders for rock band photos and we perform 2 of them through a FOR loop. Pretty cool and it will save us a lot of time coding the image controls separately!

For the code in the resources section, simply download it and add it to your functions.php file and within your customizer function.

We can further tap into the WordPress hook system and add CSS from color controls to change the background-color and H3 color properties with our customizer. I will introduce a new action hook and show you how to hook it into your theme.

We can move our controls to sections already provided out of the box with WordPress. I show you how to add your own controls to these sections:

• Title & Tagline
• Navigation
• Static Front Page

I have been teaching you the refresh transport the entire time, but there is another type of transport we can use. It is called postMessage. It is faster than the refresh transport, because it shows the changes right away instead of waiting for the usual 2 seconds to refresh the page, 

The Difference Between postMessage and refresh?

1. The refresh transport requires an entire page refresh in the web browser. 
2. The postMessage transport loads any changes immediately through AJAX.

Why Did I Wait So Long To Show It To You in This Advanced Section?

The reason why I waited is because it is a little more difficult to code as the postMessage transport requires these extra steps:

1. a new jQuery/javascript code file to be written,
2. an extra action hook added to your theme's functions.php file to call and load that new jQuery file.

Which is the better transport to use? 

Watch my next video and I will explain which is better.

Active_callback is an amazing advanced trick. With it, we can call any WordPress function and perform some cool things like hiding panels, sections, and controls depending on the type of page. We do that in this video.

You may have noticed that WordPress also creates panels and sections by default. We can place our own panels and sections in between them by knowing the priority numbers of the core components and setting our priorities right in the middle. I show you how to do that in this video.

Learn now to get the customizer settings and change them on the fly with PHP.

Just as we can set a type for our controls, we can also set a type for our settings as well to either theme_mod or option. I show you how to do that and explain the pros & cons of each.

There is no code necessary for this video. You only need to change one line of code and I show you in the video.

We can easily remove components, even core components by WordPress core. I show you how in this video.

Wouldn't be cool to tell your customizers that your theme comes with SEO built in and that they do not need a complicated plugin? Well, you can learn in this quick video tutorial how to write a meta tag box for each and every post and page. Then, we will call those meta tags right onto the page itself all ready for Google and Yahoo to index!

How to use the resources:

1. To use this code, copy and paste the code - custom control for SEO control.txt file right into your customizer's callback function.
2. Open code - custom control for SEO header.txt and paste into your header.php's <HEAD> tags in the HTML.

Themes come with instructions and there is no better a control in your customizer than one that explains how to use your theme. In this video, I show you how:

• to create a brand new panel for your instructions
• create one new section for each instruction control
• create a brand new custom control for each instruction