How To Add Custom Widget Area And Theme Customizer API On Your WordPress Theme

In my previous two posts, I taught how to convert an HTML theme into a WordPress one and how to build and integrate a fully functional blog into your newly-converted WordPress theme.

In this final part, we are going to add a few more functionalities in WordPress (WP) backend to make our theme more feature-rich.

We will learn:

• How to add custom widget areas in WordPress backend and frontend
• How to use the “Theme Customizer” to change logo of theme

Adding Custom Widget Areas

Widgets areas allow us to add custom text, links, navigation menus, social links, calendar and so much more. It would be great if we edit following areas as widgets.

Till now ,we will not be able to see “Widgets” option under the Appearance->Widget in WP Admin for our WordPress theme.

To use widgets, we first need to enable them.

Add the following code in functions.php to enable Widget in WordPress admin.

if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'HomeLeft Widgets', 'id' => 'homeleft-widgets', 'description' => 'Widget Area', 'before_widget' => '<div id="one" class="two">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>' )); }

1 2 3 4 5 6 7 8 9 10 11

if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'HomeLeft Widgets', 'id'   => 'homeleft-widgets', 'description'   => 'Widget Area', 'before_widget' => '<div id="one" class="two">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title'   => '</h2>' )); }

Widget area activated

The above code will register a new widget called “Homeleft Widgets”. To use this widget, we need to insert following code in the area we want.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homeleft Widgets') ) : ?> <?php endif; ?>

1 2 3

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homeleft Widgets') ) : ?> <?php endif; ?>

In our case, we will place it in index.php in place of “Careful Analysis” removing its html.

Code replaced

Now, whatever widget we place in “Homeleft Widgets”, it will display on the homepage.

We can insert as many widget areas to our theme as we want. First, we will register a widget and then call it in the area we want.

Using Theme Customizer To Change Logo

We can use the Theme Customization API to enable the Theme Customize options in the WP Admin. The Theme Customizer gives us an instant live preview of the changes we make in a website.

First, we will need to enable the option by adding following code to our functions.php:

function mytheme_customize_register( $wp_customize ) { //add section, setting, and controls here } add_action( 'customize_register', 'mytheme_customize_register' );

1 2 3 4

function mytheme_customize_register( $wp_customize ) { //add section, setting, and controls here } add_action( 'customize_register', 'mytheme_customize_register' );

Now, we will define what sections, settings, and control we want by adding the following code.

function mytheme_customize_register( $wp_customize ) { $wp_customize->add_section( 'themeslug_logo_section' , array( 'title' => __( 'Logo', 'themeslug' ), 'priority' => 30, 'description' => 'Upload a logo to replace the default site name and description in the header', ) ); $wp_customize->add_setting( 'themeslug_logo' ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array( 'label' => __( 'Logo', 'themeslug' ), 'section' => 'themeslug_logo_section', 'settings' => 'themeslug_logo', ) ) ); } add_action( 'customize_register', 'mytheme_customize_register' );

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function mytheme_customize_register( $wp_customize ) { $wp_customize->add_section( 'themeslug_logo_section' , array( 'title'       => __( 'Logo', 'themeslug' ), 'priority'   => 30, 'description' => 'Upload a logo to replace the default site name and description in the header', ) ); $wp_customize->add_setting( 'themeslug_logo' ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array( 'label'   => __( 'Logo', 'themeslug' ), 'section' => 'themeslug_logo_section', 'settings' => 'themeslug_logo', ) ) ); } add_action( 'customize_register', 'mytheme_customize_register' );

The above code will enable the “Customize” option in the WP admin themes.

Theme Customizer activated

Next, we are going to add the following code in header.php replacing the HTML logo.

<?php if( get_theme_mod( 'themeslug_logo') ) : ?> <div class='site-logo'> <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> 'rel='home'> <img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?> 'alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a> </div> <?php else: ?> <hgroup> <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?> 'title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> 'rel='home'><?php bloginfo( 'name'); ?></a></h1> <h2 class='site-description'><?php bloginfo( 'description'); ?></h2> </hgroup> <?php endif; ?>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?php if( get_theme_mod( 'themeslug_logo') ) : ?> <div class='site-logo'> <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> 'rel='home'> <img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?> 'alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a> </div> <?php else: ?> <hgroup> <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?> 'title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> 'rel='home'><?php bloginfo( 'name'); ?></a></h1> <h2 class='site-description'><?php bloginfo( 'description'); ?></h2> </hgroup> <?php endif; ?>

The above code will call the themeslug_logo if it is uploaded through the Theme Customizer. Otherwise, it will display the title and description of the website.

We will wrap it up here. You can play with the techniques and functions taught in this tutorial series to give your theme a much finer look. You can add widget areas in the footer.php, create sidebar in the blog section, and add widget areas there too. There is so much we can do with the simple techniques we covered here. Do let me know what would you like to read next.