Skip to content

Instantly share code, notes, and snippets.

@westonruter
Last active Aug 24, 2016
Embed
What would you like to do?
<?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;
}
<?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>
// 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 );
/*
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