Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've been learning hot to add theme customizer feature to a theme. Used few sources for the code and help, but chose the Codex in the end.

I am using a snippet from the codex itself, slightly modified to add more settings.

The only thing I've done was to add few more color options. I am also using the Java script to show live changes.

THE ISSUE: the function which calls back the settings saved values and adds the new values to a STYLE section in the header - Doesn't work. :/

it seems that it will not pull the saved value (or even the default one) with "get_theme_mod"

can someone have a look at the code and point me to the right direction please ??

Here's my functions.php file.

<?php

class UnReady_Customize {

   public static function register ( $wp_customize ) {
      //1. Define a new section (if desired) to the Theme Customizer
      $wp_customize->add_section( 'mytheme_options',
         array(
            'title' => __( 'MyTheme Options', 'mytheme' ), //Visible title of section
            'priority' => 35, //Determines what order this appears in
            'capability' => 'edit_theme_options', //Capability needed to tweak
            'description' => __('Allows you to customize some example settings for MyTheme.', 'mytheme'), //Descriptive tooltip
         )
      );

      //2. Register new settings to the WP database...
      $wp_customize->add_setting( 'mytheme_options[body_background]', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            'default' => '#FFFFFF', //Default setting/value to save
            'type' => 'option', //Is this an 'option' or a 'theme_mod'?
            'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting.
            'transport' => 'postMessage', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)?
         )
      );

           $wp_customize->add_setting( 'mytheme_options[site_title]', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            'default' => '#000000', //Default setting/value to save
            'type' => 'option', //Is this an 'option' or a 'theme_mod'?
            'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting.
            'transport' => 'postMessage', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)?
         )
      );

           $wp_customize->add_setting( 'mytheme_options[site_description]', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            'default' => '#000000', //Default setting/value to save
            'type' => 'option', //Is this an 'option' or a 'theme_mod'?
            'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting.
            'transport' => 'postMessage', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)?
         )
      );


          $wp_customize->add_setting( 'mytheme_options[link_textcolor]', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            'default' => '#0076d1', //Default setting/value to save
            'type' => 'option', //Is this an 'option' or a 'theme_mod'?
            'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting.
            'transport' => 'postMessage', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)?
         )
      );      

          $wp_customize->add_setting( 'mytheme_options[link_hover_textcolor]', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            'default' => '#0066d1', //Default setting/value to save
            'type' => 'option', //Is this an 'option' or a 'theme_mod'?
            'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting.
            'transport' => 'postMessage', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)?
         )
      );

      //3. Finally, we define the control itself (which links a setting to a section and renders the HTML controls)...
      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         'mytheme_bg_color', //Set a unique ID for the control
         array(
            'label' => __( 'Background Color', 'mytheme' ), //Admin-visible name of the control
            'section' => 'colors', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            'settings' => 'mytheme_options[body_background]', //Which setting to load and manipulate (serialized is okay)
            'priority' => 10, //Determines the order this control appears in for the specified section
         )
      ) );

      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         'mytheme_site_title_color', //Set a unique ID for the control
         array(
            'label' => __( 'Site Title Color', 'mytheme' ), //Admin-visible name of the control
            'section' => 'colors', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            'settings' => 'mytheme_options[site_title]', //Which setting to load and manipulate (serialized is okay)
            'priority' => 11, //Determines the order this control appears in for the specified section
         )
      ) );

      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         'mytheme_site_description_color', //Set a unique ID for the control
         array(
            'label' => __( 'Site Description Color', 'mytheme' ), //Admin-visible name of the control
            'section' => 'colors', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            'settings' => 'mytheme_options[site_description]', //Which setting to load and manipulate (serialized is okay)
            'priority' => 12, //Determines the order this control appears in for the specified section
         )
      ) );       
      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         'mytheme_link_textcolor', //Set a unique ID for the control
         array(
            'label' => __( 'Link Color', 'mytheme' ), //Admin-visible name of the control
            'section' => 'colors', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            'settings' => 'mytheme_options[link_textcolor]', //Which setting to load and manipulate (serialized is okay)
            'priority' => 13, //Determines the order this control appears in for the specified section
         )
      ) );

      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         'mytheme_link_hover_textcolor', //Set a unique ID for the control
         array(
            'label' => __( 'Link Hover Color', 'mytheme' ), //Admin-visible name of the control
            'section' => 'colors', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            'settings' => 'mytheme_options[link_hover_textcolor]', //Which setting to load and manipulate (serialized is okay)
            'priority' => 14, //Determines the order this control appears in for the specified section
         )
      ) );


   }

   /**
    * This will output the custom WordPress settings to the live theme's WP head.
    *
    * Used by hook: 'wp_head'
    *
    * @see add_action('wp_head',$func)
    * @since MyTheme 1.0
    */

   public static function header_output() {
      ?>
      <!--Customizer CSS-->
      <style type="text/css">

                         body { color:<?php echo get_theme_mod('mytheme_options[body_background]'); ?>; }
             .site-title { color:<?php echo get_theme_mod('mytheme_options[site_title]'); ?>; }
                         .site-description { color:<?php echo get_theme_mod('mytheme_options[site_description]'); ?>; }
                         #content a { color:<?php echo get_theme_mod('mytheme_options[link_textcolor]'); ?>; }
                         #content a:hover { color:<?php echo get_theme_mod('mytheme_options[link_hover_textcolor]'); ?>; }
      </style>
      <!--/Customizer CSS-->
      <?php
   }

   /**
    * This outputs the javascript needed to automate the live settings preview.
    * Also keep in mind that this function isn't necessary unless your settings
    * are using 'transport'=>'postMessage' instead of the default 'transport'
    * => 'refresh'
    *
    * Used by hook: 'customize_preview_init'
    *
    * @see add_action('customize_preview_init',$func)
    * @since MyTheme 1.0
    */
   public static function live_preview() {
      wp_enqueue_script(
           'mytheme-themecustomizer', // Give the script a unique ID
           get_template_directory_uri() . '/js/theme-customizer.js', // Define the path to the JS file
           array(  'jquery', 'customize-preview' ), // Define dependencies
           '', // Define a version (optional)
           true // Specify whether to put in footer (leave this true)
      );
   }

    /**
     * This will generate a line of CSS for use in header output. If the setting
     * ($mod_name) has no defined value, the CSS will not be output.
     *
     * @uses get_theme_mod()
     * @param string $selector CSS selector
     * @param string $style The name of the CSS *property* to modify
     * @param string $mod_name The name of the 'theme_mod' option to fetch
     * @param string $prefix Optional. Anything that needs to be output before the CSS property
     * @param string $postfix Optional. Anything that needs to be output after the CSS property
     * @param bool $echo Optional. Whether to print directly to the page (default: true).
     * @return string Returns a single line of CSS with selectors and a property.
     * @since MyTheme 1.0
     */
    public static function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) {
      $return = '';
      $mod = get_theme_mod($mod_name);
      if ( ! empty( $mod ) ) {
         $return = sprintf('%s { %s:%s; }',
            $selector,
            $style,
            $prefix.$mod.$postfix
         );
         if ( $echo ) {
            echo $return;
         }
      }
      return $return;
    }
}

// Setup the Theme Customizer settings and controls...
add_action( 'customize_register' , array( 'UnReady_Customize' , 'register' ) );

// Enqueue live preview javascript in Theme Customizer admin screen
add_action( 'customize_preview_init' , array( 'UnReady_Customize' , 'live_preview' ) );

// Output custom CSS to live site
add_action( 'wp_head' , array( 'UnReady_Customize' , 'header_output' ) );

Thanks Peeps :)

share|improve this question
    
Please add your code to the question. A question should never rely on an external page. –  toscho Aug 18 '13 at 14:05
    
Please reduce it to what doesn't work. –  kaiser Aug 18 '13 at 19:01
    
I don't know what's the problem though. –  MegaMan Aug 18 '13 at 21:08
    
I wanted to paste it externally. Not good. you asked me to put in in here. I did. Not good. ?? –  MegaMan Aug 18 '13 at 21:08
    
I need people to see the whole file to be able to find out what's the problem. –  MegaMan Aug 18 '13 at 21:09
add comment

2 Answers

In your function -> get_theme_mod(), skip the option array name and just put the mod name because get_theme_mod() already pulls from the current theme.

So another words change this:

get_theme_mod('mytheme_options[body_background]');

To this:

get_theme_mod('body_background');

share|improve this answer
add comment

My answer might come a bit late for you, but as I had the same problem today, here's what I found out:

1) First of all, if you set 'type' => 'option' for your custom settings, you should use the get_option() function to retrieve the values. If you set 'type' => 'theme_mod' (or don't set a type at all as it defaults to theme_mod), you can retrieve the values using get_theme_mod()

2) Then, if you set your options in an array like my_theme_option[my_option_value], you have to do the following to output the value:

$options = get_option('my_theme_option');
echo $options['my_option_value'];

Thus, for your CSS output, do this:

   public static function header_output() {
      $options = get_option($mytheme_options);
      ?>
      <!--Customizer CSS-->
      <style type="text/css">
          body { color:<?php echo $options['body_background']; ?>; }
          .site-title { color:<?php echo $options['site_title']; ?>; }
          .site-description { color:<?php echo $options['site_description']; ?>; }
          #content a { color:<?php echo $options['link_textcolor']; ?>; }
          #content a:hover { color:<?php echo $options['link_hover_textcolor']; ?>; }
      </style>
      <!--/Customizer CSS-->
      <?php
   }

I hope this helps.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.