0

I'm having some trouble using the Theme Customization API for the first time. I'm following a tutorial, but I seem to be doing something wrong. I'm trying to allow users to change text on a page through the WordPress Theme Customization options.

I've added all the hooks to my functions.php file and a separate .js file called theme-customizer.js.

My current setup looks like this:

functions.php

<?php

function tcx_register_theme_customizer( $wp_customize ) {

  $wp_customize->add_section(
    'tcx_display_options',
    array(
      'title'     => 'Display Options',
      'priority'  => 200
    )
  );

  $wp_customize->add_setting(
    'tcx_footer_copyright_text',
    array(
      'default'            => 'All Rights Reserved',
      'sanitize_callback'  => 'tcx_sanitize_copyright',
      'transport'          => 'postMessage'
    )
  );

  $wp_customize->add_control(
    'tcx_footer_copyright_text',
    array(
      'section'  => 'tcx_display_options',
      'label'    => 'Copyright Message',
      'type'     => 'text'
    )
  );
}

add_action( 'customize_register', 'tcx_register_theme_customizer' );

function tcx_sanitize_copyright( $input ) {
  return strip_tags( stripslashes( $input ) );
}

function tcx_customizer_live_preview() {
  wp_enqueue_script(
    'tcx-theme-customizer',
    get_template_directory_uri() . '/library/js/theme-customizer.js',
    array( 'jquery', 'customize-preview' ),
    '1.0.0',
    true
  );
}

add_action( 'customize_preview_init', 'tcx_customizer_live_preview' );

theme-customizer.js

(function( $ ) {
  "use strict";

  wp.customize( 'tcx_footer_copyright_text', function( value ) {
    value.bind( function( to ) {
      $( '.hero-content header h2' ).text( to );
    });
  });

})( jQuery );

page-landing.php

<div class="hero-content">
  <header>
    <h2><?php echo get_theme_mod( 'tcx_footer_copyright_message' ); ?></h2>
  </header>
</div>

When I go to customise the theme, firstly I can't see the 'default' text. When I type in the input field, the typed text appears on the page. When I hit Save however, and refresh the page, the changes don't appear to have been saved. And the text area is blank.

Any idea of what I'm doing wrong. Any help is appreciated. Thanks in advance!

1

Well, first problem:

$wp_customize->add_setting(
    'tcx_footer_copyright_text',

...

echo get_theme_mod( 'tcx_footer_copyright_message' );

Those aren't the same setting names.

Note sure why you don't see the default value in the input field, as there's nothing wrong there. Although you should also define the same default in the second parameter of the get_theme_mod() call.

  • Ahh, thanks for pointing out the obvious. That seems to have done the trick! In regards to the second parameter you mention, would that be something like echo get_theme_mod( 'tcx_footer_copyright_message', default ); ?? – realph Jan 15 '15 at 23:30
  • That would be something like echo get_theme_mod('tcx_footer_copyright_message', 'All Rights Reserved'); – Otto Jan 16 '15 at 5:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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