Before looking at the feedback from ADM students about their preference of OSS theme, I didn’t realize the importance of customization. ADM students like to customize font color, link color, background color, header images, etc. My theme should provide these functionalities in the Customizer.

Customizer is something I didn’t learn from either Lynda.com or book. This week, I went through the sections in WordPress Handbook (Theme Options – The Customizer API) and WordPress Codex  (Theme Customization API) which talk about Customization API. I tried and implemented customization of text colors and sidebar layout on my previously developed local theme.

Customization of Text Colors

In my theme folder, two related files customizer.php and customizer.js already exist and they realized the customization (change of words) of blog title and blog description.

The Customization API is used to realize the customization options

I added and changed some codes to implement the customization for text colors of

• blog title
• blog description
• post text on Index Page (the customization option will not show up on other pages)(Contextual Controls)

In customizer.php I added the following codes first to add new settings:

//in the function first_try_customize_register($wp_customize)
//change site title color
$wp_customize->add_setting( 'site_title_textcolor' , array(
   'default'     => '#000000',
   'transport'   => 'postMessage',
) );

//change site description color
$wp_customize->add_setting( 'site_description_textcolor' , array(
   'default'     => '#000000',
   'transport'   => 'postMessage',
) );

//change index page post text color
$wp_customize->add_setting( 'index_post_textcolor' , array(
   'default'     => '#5c5c5c',
   'transport'   => 'postMessage',
) );

Then I added a new section which holds these settings:

$wp_customize->add_section( 'first_try_text_color' , array(
   'title'      => __( 'Text Color', 'first_try' ),
   'priority'   => 30,
) );

After that I added a control for each setting:

//control for changing post text
//other two controls are similar
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'index_post_textcolor_control', array(
   'label'        => __( 'Post Text Color on Index Page', 'first_try' ),
   'section'    => 'first_try_text_color',
   'settings'   => 'index_post_textcolor',
   'active_callback' => 'is_home',          //<-- this setting/control only appears at index page
) ) );

Each setting is managed by a control object and controls must be added to a section.

With the above codes, a newly added section can be found in the Customizer and three settings are included.

There are two ways of previewing the changes in the Customizer. One is to reload the entire preview page (by setting ‘transport’ => ‘refresh’), the other is to use JavaScript to show the change dynamically (by setting ‘transport’ => ‘postMessage’). The second one is faster and more user-friendly so I used the second way here.

In customizer.js, I added the following codes to realize real-time preview.

//js to preview Index Page post text color
//other twos are similar 
wp.customize( 'index_post_textcolor', function( value ) {
   value.bind( function( to ) {
      $( '.home .entry-content' ).css( {
         'color': to
      } );
   } );
} );

So whenever I change the color in Customizer, I can see the change in preview window right away.

Finally, I need to retrieve and use the values of my Customizer options in the codes.

// the use of get_theme_mod() function to get my color for blog description
<p class="site-description" style="color:<?php echo get_theme_mod('site_description_textcolor', '#000000'); ?>;"><?php bloginfo( 'description' ); ?></p><br>

Customization of Sidebar Layout

The process is similar to the process above. In customizer.php file, I added the following codes:

//add new setting to change layout (left sidebar or right sidebar)
$wp_customize->add_setting( 'sidebar_position' , array(
   'transport'   => 'postMessage',
) );
//add new section to contain the setting
$wp_customize->add_section( 'first_try_layout' , array(
   'title'      => __( 'Layout', 'first_try' ),
   'priority'   => 50,
) );
//add new control
$wp_customize->add_control('sidebar_position', array(
   'label'      => __('Sidebar Position', 'Ari'),
   'section'    => 'first_try_layout',
   'settings'   => 'sidebar_position',
   'type'       => 'radio',
   'choices'    => array(
      'left'   => 'left',
      'right'  => 'right',
      'none'   => 'none',
   ),
));

Then the Customizer is like this:

By adding the corresponding JavaScript codes in customizer.js, the real-time previewing of position changes of sidebar is enabled.

wp.customize( 'sidebar_position', function( value ) {
   value.bind( function( to ) {
      if ('left' === to){                               //<-- when choose left
         $( '.content-area' ).css( {
            'float': 'right'
         } );
         $( '.site-content .widget-area' ).css( {
            'float': 'left',
            'display':'block'
         } );
      }else if('right'=== to){                          //<-- when choose right
         $( '.content-area' ).css( {
            'float': 'left'
         } );
         $( '.site-content .widget-area' ).css( {
            'float': 'right',
            'display':'block'
         } );
      }else {                                           //<-- when choose none
         $( '.content-area' ).css( {
            'float': 'none',
            'margin': 'auto'
         } );
         $( '.site-content .widget-area' ).css( {
            'display': 'none'
         } );
      }
   } );
} );

Finally, by adding the following codes in <head>secion of header.php, the saved option can be retrieved and used.

<style>
    <?php
if (get_theme_mod('sidebar_position')==='right'){?>
        .content-area{
            float: left;
        }
        .site-content .widget-area {
            float: right;
        }
    <?php } else if(get_theme_mod('sidebar_position')==='left'){?>
        .content-area{
            float: right;
        }
        .site-content .widget-area {
            float: left;
        }
    <?php } else{ ?>
        .content-area{
            float: none;
            margin: auto;
        }
        .site-content .widget-area {
            display: none;
        }
    <?php } ?>
    </style>

I have updated these changes to live server at http://172.19.37.161/wordpress.

What Else Should Be Customizable?

• Header image.
• Background image/ color.
• What meta information of post should be displayed on Index Page.
• Default Customizers like Site Identity, Colors,  Menus and Widgets can also be manipulated.
• Infinite Scroll or not.
• etc

All these should be taken into consideration when coding. I will try how to implement them next week.