Last active
August 24, 2016 19:43
-
-
Save westonruter/c9b9cf597e9e9129070d67b68920168e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Ticket 30529: "Customizer: Settings with type 'option' not saved before refresh" | |
// Theme setup | |
add_action( 'after_setup_theme', 'testtheme_setup' ); | |
function testtheme_setup() { | |
// Register a nav menu | |
register_nav_menus( array( | |
'main-menu' => __( 'Main Menu', 'testtheme' ), | |
) ); | |
} | |
// Enqueue stylesheet | |
add_action( 'wp_enqueue_scripts', 'enqueue_style' ); | |
function enqueue_style() { | |
wp_enqueue_style( 'stylesheet', get_stylesheet_uri() ); | |
} | |
// Defaults for options | |
function testtheme_get_options_defaults() { | |
$defaults = array( | |
'logo' => false, | |
'header_background_color' => '#ffffff', | |
'site_background_color' => '#f4f4f4', | |
'content_align' => 'align-left', | |
); | |
return $defaults; | |
} | |
function testtheme_get_theme_mods() { | |
return wp_parse_args( | |
array( | |
'logo' => get_theme_mod( 'logo' ), | |
'header_background_color' => get_theme_mod( 'header_background_color' ), | |
'site_background_color' => get_theme_mod( 'site_background_color' ), | |
'content_align' => get_theme_mod( 'content_align' ), | |
), | |
testtheme_get_options_defaults() | |
); | |
} | |
// Customizer | |
add_action( 'customize_register', 'testtheme_customize_register' ); | |
function testtheme_customize_register( $wp_customize ) { | |
$defaults = testtheme_get_options_defaults(); | |
// Live preview title and tagline | |
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; | |
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; | |
// Section, setting, and control for logo | |
$wp_customize->add_section( 'logo-section', array( | |
'title' => __( 'Logo', 'testtheme' ), | |
) ); | |
$wp_customize->add_setting( 'logo', array( | |
'default' => $defaults['logo'], | |
'transport' => 'postMessage', | |
'sanitize_callback' => 'esc_url_raw', | |
) ); | |
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo-control', array( | |
'label' => __( 'Upload your logo', 'testtheme' ), | |
'section' => 'logo-section', | |
'settings' => 'logo', | |
) ) ); | |
// Setting, and control for header background color | |
$wp_customize->add_setting( 'header_background_color', array( | |
'default' => $defaults['header_background_color'], | |
'transport' => 'postMessage', | |
'sanitize_callback' => 'sanitize_hex_color', | |
) ); | |
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header-background-color-control', array( | |
'label' => __( 'Header background color', 'testtheme' ), | |
'section' => 'colors', | |
'settings' => 'header_background_color', | |
) ) ); | |
// Setting, and control for site background color | |
$wp_customize->add_setting( 'site_background_color', array( | |
'default' => $defaults['site_background_color'], | |
'transport' => 'postMessage', | |
'sanitize_callback' => 'sanitize_hex_color', | |
) ); | |
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'site-background-color-control', array( | |
'label' => __( 'Site background color', 'testtheme' ), | |
'section' => 'colors', | |
'settings' => 'site_background_color', | |
) ) ); | |
// Section, setting, and control for content alignment | |
$wp_customize->add_section( 'content-section', array( | |
'title' => __( 'Content', 'testtheme' ), | |
) ); | |
$wp_customize->add_setting( 'content_align', array( | |
'default' => $defaults['content_align'], | |
'transport' => 'postMessage', | |
'sanitize_callback' => function ( $input ) use ( $defaults ) { | |
$accepted = array( 'align-left', 'align-center' ); | |
if ( ! in_array( $input, $accepted ) ) { | |
$input = $defaults['content_align']; | |
} | |
return $input; | |
}, | |
) ); | |
$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'content-align-control', array( | |
'label' => __( 'Content alignment', 'testtheme' ), | |
'section' => 'content-section', | |
'settings' => 'content_align', | |
'type' => 'select', | |
'choices' => array( | |
'align-left' => __( 'Left', 'testtheme' ), | |
'align-center' => __( 'Center', 'testtheme' ), | |
), | |
) ) ); | |
} | |
// Enqueue the script for the live preview | |
add_action( 'customize_preview_init', 'live_preview_script' ); | |
function live_preview_script() { | |
wp_enqueue_script( | |
'customize-live-preview', | |
get_template_directory_uri() . '/live-preview.js', | |
array( 'jquery' ), | |
false, | |
true | |
); | |
} | |
// Add custom style to the <head> | |
add_action( 'wp_head', 'custom_style' ); | |
function custom_style() { | |
$testtheme_options = testtheme_get_theme_mods(); | |
$style = '<style id="custom-style-css">'; | |
$style .= '.header { background:' . $testtheme_options['header_background_color'] . '; }'; | |
$style .= '.site { background:' . $testtheme_options['site_background_color'] . '; }'; | |
$style .= '</style>'; | |
echo $style; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Ticket 30529: "Customizer: Settings with type 'option' not saved before refresh" | |
$testtheme_options = testtheme_get_theme_mods(); | |
?> | |
<!DOCTYPE html> | |
<html <?php language_attributes(); ?>> | |
<head> | |
<meta charset="<?php bloginfo( 'charset' ); ?>"> | |
<title><?php wp_title(); ?></title> | |
<?php wp_head(); ?> | |
</head> | |
<body <?php body_class(); ?>> | |
<div class="site"> | |
<header class="header"> | |
<div class="logo-placeholder"> | |
<?php | |
$logo_url = $testtheme_options['logo']; | |
if ( $logo_url ) : | |
?> | |
<img src="<?php echo $logo_url; ?>" alt="logo" class="logo"> | |
<?php | |
endif; | |
?> | |
</div> | |
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="Home"><?php bloginfo( 'name', 'display' ); ?></a></h1> | |
<?php | |
$site_description = get_bloginfo( 'description', 'display' ); | |
if ( $site_description ) : | |
?> | |
<p class="site-description"><?php echo $site_description; ?></p> | |
<?php | |
endif; | |
if ( has_nav_menu( 'main-menu' ) ) : | |
?> | |
<nav> | |
<?php | |
wp_nav_menu( array( | |
'theme_location' => 'main-menu', | |
'container' => false, | |
'fallback_cb' => false, | |
) ); | |
?> | |
</nav> | |
<?php | |
endif; | |
?> | |
</header> | |
<main class="content <?php echo $testtheme_options['content_align']; ?>"> | |
<?php | |
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> | |
<article <?php post_class(); ?>> | |
<?php | |
if ( is_single() || is_page() ) { | |
the_title( '<h1>', '</h1>' ); | |
} else { | |
the_title( '<h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); | |
} | |
the_content(); | |
?> | |
</article> | |
<?php | |
endwhile; else : | |
_e( 'Oops. Nothing found.', 'testtheme' ); | |
endif; | |
?> | |
</main> | |
</div> | |
<?php wp_footer(); ?> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Ticket 30529: "Customizer: Settings with type 'option' not saved before refresh" | |
( function( $ ) { | |
'use strict'; | |
// Site title | |
wp.customize( 'blogname', function( value ) { | |
value.bind( function( newval ) { | |
$( '.site-title a' ).text( newval ); | |
} ); | |
} ); | |
// Site tagline | |
wp.customize( 'blogdescription', function( value ) { | |
value.bind( function( newval ) { | |
$( '.site-description' ).text( newval ); | |
} ); | |
} ); | |
// Logo | |
wp.customize( 'logo', function( value ) { | |
value.bind( function( newval ) { | |
if ( newval ) { | |
$( '.logo-placeholder' ).html( | |
'<img src="' + newval + '" alt="logo" class="logo">' | |
); | |
} else { | |
$( '.logo' ).remove(); | |
} | |
} ); | |
} ); | |
// Content alignment | |
wp.customize( 'content_align', function( value ) { | |
value.bind( function( newval ) { | |
$( '.content' ).removeClass( 'align-left align-center' ); | |
$( '.content' ).addClass( newval ); | |
} ); | |
} ); | |
// Header background color | |
wp.customize( 'header_background_color', function( value ) { | |
value.bind( function( newval ) { | |
$( '.header' ).css( 'background', newval ); | |
} ); | |
} ); | |
// Site background color | |
wp.customize( 'site_background_color', function( value ) { | |
value.bind( function( newval ) { | |
$( '.site' ).css( 'background', newval ); | |
} ); | |
} ); | |
} )( jQuery ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Theme Name: Test Theme | |
Text Domain: testtheme | |
*/ | |
html, | |
body { | |
font-family: sans-serif; | |
margin: 0; | |
height: 100%; | |
} | |
.site { | |
min-height: 100%; | |
} | |
.header, | |
.content { | |
padding: 2em; | |
} | |
.logo { | |
max-height: 100px; | |
} | |
h1, | |
p { | |
margin: 0 0 1em; | |
} | |
ul { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
li { | |
display: inline-block; | |
margin-right: 1em; | |
} | |
.align-left { | |
text-align: left; | |
} | |
.align-center { | |
text-align: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment