WordPress Customizer API – Editable Sections / Theme Development
If you are currently developing your own WordPress Theme and you want to make if fully customizable, the WP Customizer API is a great option to get started.
In this tutorial, I will show you how to create a Customizer Class and use the WP Customizer API to add and retrieve data without doing any complicated database queries. I will cover how to add Select option, Textarea and Image and I will show you how to display the options on a page.
I’ve added the code from the video just for reference. As soon as I get the chance I will try to split it into smaller chunks and explain every single section. For now, please just watch the video and don’t forget to subscribe.
Code:
This is the file that I added in the inc folder. You can obviously name the class and the file name something different.
theminimalist-customizer.php
<?php
class TheMinimalist_Customizer {
public function __construct() {
add_action( 'customize_register', array( $this, 'register_customize_sections' ) );
}
public function register_customize_sections( $wp_customize ) {
/*
* Add settings to sections.
*/
$this->author_callout_section( $wp_customize );
}
/* Sanitize Inputs */
public function sanitize_custom_option($input) {
return ( $input === "No" ) ? "No" : "Yes";
}
public function sanitize_custom_text($input) {
return filter_var($input, FILTER_SANITIZE_STRING);
}
public function sanitize_custom_url($input) {
return filter_var($input, FILTER_SANITIZE_URL);
}
public function sanitize_custom_email($input) {
return filter_var($input, FILTER_SANITIZE_EMAIL);
}
public function sanitize_hex_color( $color ) {
if ( '' === $color ) {
return '';
}
// 3 or 6 hex digits, or the empty string.
if ( preg_match( '|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) ) {
return $color;
}
}
/* Author Section */
private function author_callout_section( $wp_customize ) {
// New panel for "Layout".
$wp_customize->add_section('basic-author-callout-section', array(
'title' => 'Author',
'priority' => 2,
'description' => __('The Author section is only displayed on the Blog page.', 'theminimalist'),
));
$wp_customize->add_setting('basic-author-callout-display', array(
'default' => 'No',
'sanitize_callback' => array( $this, 'sanitize_custom_option' )
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize, 'basic-author-callout-display-control', array(
'label' => 'Display this section?',
'section' => 'basic-author-callout-section',
'settings' => 'basic-author-callout-display',
'type' => 'select',
'choices' => array('No' => 'No', 'Yes' => 'Yes')
)));
$wp_customize->add_setting('basic-author-callout-text', array(
'default' => '',
'sanitize_callback' => array( $this, 'sanitize_custom_text' )
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize, 'basic-author-callout-control', array(
'label' => 'About Author',
'section' => 'basic-author-callout-section',
'settings' => 'basic-author-callout-text',
'type' => 'textarea'
)));
$wp_customize->add_setting('basic-author-callout-image', array(
'default' => '',
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'sanitize_callback' => array( $this, 'sanitize_custom_url' )
));
$wp_customize->add_control(new WP_Customize_Cropped_Image_Control($wp_customize, 'basic-author-callout-image-control', array(
'label' => 'Image',
'section' => 'basic-author-callout-section',
'settings' => 'basic-author-callout-image',
'width' => 442,
'height' => 310
)));
}
}Add this to your functions.php file
// Customizer Settings require get_stylesheet_directory() . '/inc/theminimalist-customizer.php'; new TheMinimalist_Customizer();
Display the settings. In my case, I displayed the customizer settings on my front page – index.php
<?php if (get_theme_mod('basic-author-callout-display') == 'Yes') { ?>
<div class="row row-padding author">
<div class="col-6 author-image">
<img src="<?php echo wp_get_attachment_url(get_theme_mod('basic-author-callout-image')) ?>" alt="Author Image">
</div>
<div class="col-6 author-content">
<?php
$authorText = get_theme_mod('basic-author-callout-text');
if ($authorText != '') {
echo wpautop($authorText);
} else {
echo "Edit this by going to your Dashboard -> Appearance -> Customise -> Author Editor";
}
?>
</div>
</div>
<?php } ?>More Resources:
Author
Hi! Iām Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
Hi I am coming from your your tube tutorial and what an awesome way you taught this topic. I have a question of mine that i would like to ask.
I am new to advanced PHP/Wordpress and I will like to ask you for a simple reference or explaination to the need for $this in line 4 of the code e.g
add_action( ‘customize_register’, array( $this, ‘register_customize_sections’ ) );
Thanks
Malachy
Hi Malachy,
Okay, I will try…
So we have a class named TheMinimalist_Customizer. A class can have multiple objects and each object has all the properties and methods defined in the class, but different property values.
The $this keyword refers to the current object, and it’s only available inside methods.
It’s a little confusing to start with. Look at some tutorials for PHP OOP – Classes and Objects and you’ll get it.
you saved me man , Thanks š
I am glad that you found it useful. Thanks for the comment!
Thanks for this great bit of code. I didn’t have time to watch the video, so wanted to point out a few nuances here (for those trying to use this right off the page). The code above is missing a closing } bracket at the end to close out the class. Also the following 3 sections aren’t actually in the code, so if you leave these lines at the top without adding sections it’ll break:
$this->social_callout_section( $wp_customize );
$this->footer_callout_section( $wp_customize );
$this->colours_callout_section( $wp_customize );
Hey Drew, thank you very much for this. I will update the code as soon as I get the chance.
The code is now updated. Thank you once again š
Hi!
first of all-Thanks a lot for this code!! it was so useful!
i would have a question:
i would need more text areas below (first text area, second, etc) but when i try to multiply it (as i did with success with the image settings and controls) its appears only one piece of text area. always the last one…
so i would need more options in Author section like below for instance, but i always failing with multiplying text area. Can you help me out please?
Display this section 1? (Y/N)
About Author1 (textbox)
Image1 (upload)
Display this section 2? (Y/N)
About Author2 (textbox)
Image2 (upload)
Display this section 3? (Y/N)
About Author3 (textbox)
Image3 (upload)
thx:)
How are you trying to multiply it? As long as the sections have unique names you should be okay to add as many as you want. So copy and paste a section, but change the naming