WordPress.org

Make WordPress Core

Changeset 21411


Ignore:
Timestamp:
08/02/12 22:10:03 (3 years ago)
Author:
lancewillett
Message:

Twenty Twelve: Add postMessage support in Customizer for fonts, site title and description, and background color body_class value updates.

Props obenland for first patch and testing. Fixes #21443.

Location:
trunk/wp-content/themes/twentytwelve
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentytwelve/functions.php

    r21404 r21411  
    112112     */ 
    113113    $options = $twentytwelve_options->get_theme_options(); 
    114     if ( $options['enable_fonts'] ) { 
    115         $protocol = is_ssl() ? 'https' : 'http'; 
    116         wp_enqueue_style( 'twentytwelve-fonts', "$protocol://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" ); 
    117     } 
     114    if ( $options['enable_fonts'] ) 
     115        wp_enqueue_style( 'twentytwelve-fonts', $twentytwelve_options->custom_fonts_url() ); 
    118116 
    119117    /** 
     
    375373} 
    376374add_action( 'template_redirect', 'twentytwelve_content_width' ); 
    377  
    378 /** 
    379  * Bind JS handler to make Theme Customizer preview reload 
    380  * custom background `body_class` value changes asynchronously. 
    381  * 
    382  * @since Twenty Twelve 1.0 
    383  */ 
    384 function twentytwelve_customize_preview_js() { 
    385     wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120725', true ); 
    386 } 
    387 add_action( 'customize_preview_init', 'twentytwelve_customize_preview_js' ); 
  • trunk/wp-content/themes/twentytwelve/inc/theme-options.php

    r21280 r21411  
    3838            $this->option_key = get_stylesheet() . '_theme_options'; 
    3939 
    40         add_action( 'admin_init',         array( $this, 'options_init'       ) ); 
    41         add_action( 'admin_menu',         array( $this, 'add_page'           ) ); 
    42         add_action( 'customize_register', array( $this, 'customize_register' ) ); 
     40        add_action( 'admin_init',             array( $this, 'options_init'         ) ); 
     41        add_action( 'admin_menu',             array( $this, 'add_page'             ) ); 
     42        add_action( 'customize_register',     array( $this, 'customize_register'   ) ); 
     43        add_action( 'customize_preview_init', array( $this, 'customize_preview_js' ) ); 
    4344    } 
    4445 
     
    204205     */ 
    205206    public function customize_register( $wp_customize ) { 
     207 
     208        // Add postMessage support for site title and tagline 
     209        $wp_customize->get_setting( 'blogname' )->transport        = 'postMessage'; 
     210        $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; 
     211 
    206212        // Enable Web Fonts 
    207213        $wp_customize->add_section( $this->option_key . '_enable_fonts', array( 
     
    216222            'type'       => 'option', 
    217223            'capability' => 'edit_theme_options', 
     224            'transport'  => 'postMessage', 
    218225        ) ); 
    219226 
     
    225232        ) ); 
    226233    } 
     234 
     235    /** 
     236     * Bind JS handlers to make Theme Customizer preview reload changes asynchronously. 
     237     * 
     238     * @since Twenty Twelve 1.0 
     239     * @access public 
     240     * 
     241     * @return void 
     242     */ 
     243    public function customize_preview_js() { 
     244        wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120725', true ); 
     245        wp_localize_script( 'twentytwelve-customizer', 'twentytwelve_customizer', array( 
     246            'option_key' => $this->option_key, 
     247            'link'       => $this->custom_fonts_url(), 
     248        ) ); 
     249    } 
     250 
     251    /** 
     252     * Create path to load fonts CSS file with correct protocol. 
     253     * 
     254     * @since Twenty Twelve 1.0 
     255     * @access public 
     256     * 
     257     * @return string Path to load fonts CSS. 
     258     */ 
     259    public function custom_fonts_url() { 
     260        $protocol = is_ssl() ? 'https' : 'http'; 
     261        return $protocol . '://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700'; 
     262    } 
    227263} 
  • trunk/wp-content/themes/twentytwelve/js/theme-customizer.js

    r21343 r21411  
    1 ( function( $ ){ 
     1/** 
     2 * Theme Customizer enhancements for a better user experience. 
     3 * 
     4 * Contains handlers to make Theme Customizer preview reload changes asynchronously. 
     5 * Things like fonts, site title and description, and background color changes. 
     6 * 
     7 * See related settings in Twenty_Twelve_Options::customize_preview_js() 
     8 */ 
     9 
     10( function( $ ) { 
     11    // Site title and description. 
     12    wp.customize( 'blogname', function( value ) { 
     13        value.bind( function( to ) { 
     14            $( '.site-title a' ).html( to ); 
     15        } ); 
     16    } ); 
     17    wp.customize( 'blogdescription', function( value ) { 
     18        value.bind( function( to ) { 
     19            $( '.site-description' ).html( to ); 
     20        } ); 
     21    } ); 
     22 
     23    // Custom fonts. 
     24    wp.customize( twentytwelve_customizer.option_key + '[enable_fonts]', function( value ) { 
     25        value.bind( function( to ) { 
     26            if ( to ) { 
     27                $( 'head' ).append( '<link rel="stylesheet" id="twentytwelve-fonts-css" href="' + twentytwelve_customizer.link + '" type="text/css" media="all" />' ); 
     28            } else { 
     29                $( '#twentytwelve-fonts-css' ).remove(); 
     30            } 
     31        } ); 
     32    } ); 
     33 
    234    // Hook into background color change and adjust body class value as needed. 
    335    wp.customize( 'background_color', function( value ) { 
Note: See TracChangeset for help on using the changeset viewer.