Creating WordPress Theme – Adding Customizer Object

Creating WordPress Theme Adding Customizer Object
Share this to your friends

Put this code in your functions.php file ( you must insert the codes inside PHP opening(<?php) and closing(?>) tags. ) :


function escimma_setup() {
        add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'escimma_setup' );

You can assign a different function name if you want. Here I’m calling it escimma_setup as that is what my theme is called. Adding that will change our Site Identity panel to this :

We can now upload a logo, though retrieving it will be done later. First we will just add an option to choose between showing Site title or Site logo. A checkbox will be added to let the user change the content of the theme header without changing codes.

Adding Customizer Objects in Custom Theme

Again add this to your functions.php file :


function theme_customizer( $wp_customize ) {
      $wp_customize->add_setting('show_header_tagline_checkbox', array(
            'default' => '',
      ));
      $wp_customize->add_control('show_header_tagline_checkbox', array(
            'label' => 'Show title and tagline instead of logo',
            'section' => 'title_tagline',
            'type' => 'checkbox',
      ));
}
add_action( 'customize_register', 'theme_customizer' );

If you added the code correctly, you can now see a checkbox with a label “Show title and tagline instead of logo”  in our theme’s Site Identity panel.

Read WP(WordPress) Theme Options – The Customizer API to know more about the framework. But as you can see, the Customizer can be use to add options, (user-friendly interfaces) that can be used to modify theme. Adding option to change CSS styles, switching background images or providing input boxes can be achieve using the Customizer. Like what we did earlier.

Explaining More About the Code


function theme_customizer( $wp_customize ) {
}
add_action( 'customize_register', 'theme_customizer' );

We used the customize_register hook to add/edit Customizer objects.


$wp_customize->add_setting('show_header_tagline_checkbox', array(
      'default' => '',
));
$wp_customize->add_control('show_header_tagline_checkbox', array(
      'label' => 'Show title and tagline instead of logo',
      'section' => 'title_tagline',
      'type' => 'checkbox',
));

If you read the Customizer API we can use add_, remove_, get_ methods to modify objects like panels, and sections. We didn’t put much in our add_setting method, but you can read more about it here to learn more about the method.

In our add_control method,

  • we set a value for our control label(Show title and tagline instead of logo),
  • we set our control type to checkbox,
  • and used WP built-in section(title_tagline) to hold our control.

You can use the add_section method if you want to create a new section to group your controls. But for now, we leave it like that.

Retrieving and Using the Value of Customizer Options

Now we go back to our header.php file, and edit the code we used in displaying a simple header.
In our header.php file inside are <header> tag put this code:


<?php
$output = '';
      if( get_theme_mod( 'show_header_tagline_checkbox' ) == 1 ) {
            if( !empty( get_bloginfo( 'name' ) ) || !empty( get_bloginfo( 'description' ) ) ) {
                  $output = '<h1><a href=" '.esc_url( home_url( '/' ) ).' ">'.get_bloginfo( 'name' ).'</a><br/><i>'.get_bloginfo( 'description' ).'</i></h1>';
            } else {
                  $output = '<h1><a href=" '.esc_url( home_url( '/' ) ).' ">SITE TITLE</a></h1><i>Site description...</i>';
            }
      } else {
            if( function_exists( 'the_custom_logo' ) ) {
                  if ( has_custom_logo() ) {
                        $output = get_custom_logo();
                  } else {
                        $output = '<h1><a href=" '.esc_url( home_url( '/' ) ).' ">NO SITE LOGO</a></h1>';
                  }
            if( !empty( get_bloginfo( 'name' ) ) || !empty( get_bloginfo( 'description' ) )) {
                  echo '<div id="header-hide"><a href=" '.esc_url(home_url( '/' )).' "> '.get_bloginfo( 'name' ).' </a><br/><i>'.get_bloginfo( 'description' ).'</i></div>';
            }
      }
}
echo $output;
?>

Let’s explain what the code above do.

Using the get_theme_mod Function


if( get_theme_mod( 'show_header_tagline_checkbox' ) == 1 ) {

In the code above we used the get_theme_mod function to retrieve the value we set in our control. We add ‘show_header_tagline_checkbox’ as a parameter to tell the function that we want to retrieve the value of our checkbox control. (The show_header_tagline_checkbox is the id we used when we create the control in our functions.php file).

Showing Site Title and Site Description using bloginfo() Function

The Site title and Site description will be shown using the bloginfo() function if the checkbox is checked.


if( !empty( get_bloginfo( 'name' ) ) || !empty( get_bloginfo( 'description' ) ) ) {
      $output = '<h1><a href=" '.esc_url( home_url( '/' ) ).' ">'.get_bloginfo( 'name' ).'</a><br/><i>'.get_bloginfo( 'description' ).'</i></h1>';
} else {
      $output = '<h1><a href=" '.esc_url( home_url( '/' ) ).' ">SITE TITLE</a></h1><i>Site description...</i>';
}

The code shows another if-else statement that checks if there’s a value assigned in the Site Title and Site Description. Just in case it doesn’t, we put a default Title and Description instead.

Checking for a Custom Logo


if( function_exists( 'the_custom_logo' ) ) {
      if ( has_custom_logo() ) {
            $output = get_custom_logo();
      } else {
            $output = '<h1><a href=" '.esc_url( home_url( '/' ) ).' ">NO SITE LOGO</a></h1>';
      }

The has_custom_logo() function returns a boolean value(true or false) if the site has a custom logo. We provide another if-else statement to check if the user has uploaded a Site logo or not. If it returns true we retrieves the site logo using the get_custom_logo() function and output it in the header.

Hide the Site Title and Site Description Instead of not Using It


if( !empty( get_bloginfo( 'name' ) ) || !empty( get_bloginfo( 'description' ) )) {
      echo '<div id="header-hide"><a href=" '.esc_url(home_url( '/' )).' "> '.get_bloginfo( 'name' ).' </a><br/><i>'.get_bloginfo( 'description' ).'</i></div>';
}

This is just a simple code I used to hide the Site Title and description when a Site logo is picked instead of showing the text. I used the CSS display property to hide the text. So you need to edit your style.css file if you don’t want to delete this code.

In your style.css file add this:


#header-hide {
      display:none;
}

That’s it for now. Try to upload a logo and switch between Site title and Site logo in your new Site Identity panel.

Leave a Reply