WordPress Theme Customization in 2 steps & 20 minutes

A simple, handy and very straightforward way to customize your WordPress theme is via the Theme Customizer, available since WordPress 3.4. The Automattic team encourage theme developers to take this approach when starting from their Underscores theme.

It basically consists of two steps:

  1. In the Customizer panel:
    Add the options whose values will be saved in the database, and
  2. In the functions.php or the appropriate templates:
    Retrieve the saved values and make use of them in the right places.

Long story short, here are some chunks of code, ready for use in real life (all files references are for the Underscores starter theme):

WordPress Theme Customization Example 1. – Logo and Favicon

Step 1. – in the file inc/customizer.php

function yourtheme_customize_register( $wp_customize ) {
...
	/* *******************************
	// Add General Settings Section //
	******************************* */
	$wp_customize->add_section( 'general-settings' , array(
            'title' => __( 'General Settings', 'yourtheme' ),
            'priority' => 30,
            'description' => __( 'Upload your logo here', 'yourtheme' )
	) );
	// Add Logo Setting
	$wp_customize->add_setting( 'logo' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo', array(
            'label' => __( 'Your Logo', 'yourtheme' ),
            'section' => 'general-settings',
            'settings' => 'logo'
	) ) );
	// Add Favicon Setting
	$wp_customize->add_setting( 'favicon' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'favicon', array(
            'label' => __( 'Your Favicon', 'yourtheme' ),
            'section' => 'general-settings',
            'settings' => 'favicon'
	) ) );
...
}

Step 2.

a. – in header.php render the logo if an image has been uploaded

    <div class="site-branding">
        <?php $logo=get_theme_mod('logo');?>
        <?php if ($logo) { ?>
            <a href="<?php echo home_url(); ?>"><img src="<?php echo $logo; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
        <?php } else { ?>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        <?php } ?>
    </div><!-- .site-branding -->

b. – in functions/php render the favicon if and image has been uploaded

    function yourtheme_favicon() {
        $favicon=get_theme_mod('favicon');
        if ($favicon){
            echo '<link rel="shortcut icon" href="' . $favicon . '"/>'."\n";
        }
        else{ ?>
            <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/admin/images/favicon.png" />
            <?php
        }
    }
    add_action('wp_head', 'yourtheme_favicon');

WordPress Theme Customization Example II. – Social Media

Step 1. – in the file inc/customizer.php

function yourtheme_customize_register( $wp_customize ) {
	...
	/* ***************************
	// Add Social Media Section //
	*************************** */
	$wp_customize->add_section( 'social-media' , array(
            'title' => __( 'Social Media', 'add_setting' ),
            'priority' => 30,
            'description' => __( 'Enter the URL to your account for each service for the icon to appear in the header.', 'add_setting' )
	) );
	// Add Twitter Setting
	$wp_customize->add_setting( 'twitter' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'twitter', array(
            'label' => __( 'Twitter', 'add_setting' ),
            'section' => 'social-media',
            'settings' => 'twitter',
            'type' => 'theme_mod'
	) ) );
	// Add FB Setting
	$wp_customize->add_setting( 'facebook' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'facebook', array(
            'label' => __( 'Facebook', 'add_setting' ),
            'section' => 'social-media',
            'settings' => 'facebook',
            'type' => 'theme_mod'
	) ) );
        // Repeat for all the social media you need
	...
}

Step 2. – in the appropriate template (header.php, sidebar.php etc.), retrieve the social media settings and do whatever you need with them:

    <?php 
        $tw= get_theme_mod('twitter');
        echo("Tweety: ".$tw);  // test only

        $fb= get_theme_mod('facebook');
        echo("FB: ".$fb);  // test only
    ?>

The setting variables can be of several types, such as:

  • WP_Customize_Control() – a simple textbox, to hold plain string values; it also is the parent of all the other types of controls. (see example II above, for the social media URLs).
  • WP_Customize_Color_Control() – a color picker.
  • WP_Customize_Upload_Control() – a control allowing media uploads.
  • WP_Customize_Image_Control() – a control allowing image uploads (see example I above for the logo and favicon).
  • WP_Customize_Background_Image_Control() – a control for customizing the background image.
  • WP_Customize_Header_Image_Control() – a control for customizing the header image.

Got the idea?

The WordPress Theme Customization is much simpler with the Theme Customizer than creating a theme options page, using Options Framework or whatever tool we had a year ago.

References:

4 Comments

  1. Avatar
    19 Mar 2015 at 6:49 PM · Reply

    Step 2.
    a. – in header.php render the logo if an image has been uploaded

    This is what you should use for this step:

    <a href="”><img src="” alt=””/>

    <a href="” rel=”home”>

    • Manuela Kherouf
      19 Mar 2015 at 7:33 PM · Reply

      Hey Dick, it looks like the php code has been stripped out from your comment, you might want to try the <pre> tag.

  2. Avatar
    Dave
    06 May 2015 at 11:01 PM · Reply

    Hello. For the social media how do i retrieve it. Im working with the Undescores theme and already have the social menu in the menu option. Thanks

    • Manuela Kherouf
      07 May 2015 at 12:18 AM · Reply

      Hey Dave, you retrieve the social media settings as I showed in example II, step 2. You need to insert the code from step 2 in the template of your choice (header.php, footer.php or sidebar.php), depending on where you want the social links to appear on your site. Of course, you may adapt the “echo” line in whatever way you need, so that it suits the requirements of your project.

Leave a Comment

Sitemap

open