Raddy Website Design & Development Tutorials

WordPress Customizer API – Editable Sections / Theme Development

By Raddy in WordPress ·

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:

  1. Malachy Ike says:

    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

    1. Raddy says:

      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.

  2. pooya behravesh says:

    you saved me man , Thanks šŸ™‚

    1. Raddy says:

      I am glad that you found it useful. Thanks for the comment!

  3. Drew says:

    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 );

    1. Raddy says:

      Hey Drew, thank you very much for this. I will update the code as soon as I get the chance.

      1. Raddy says:

        The code is now updated. Thank you once again šŸ™‚

  4. Gabor Sim says:

    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:)

    1. Raddy says:

      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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.