Adding a Text Block via the Customizer in WordPress

This guide takes you through adding an editable text block via the Customizer in WordPress, this tutorial uses the Genesis Sample theme and will set the footer text which is normally changed via a filter in the functions.php file in a number of StudioPress themes, using the Customizer will easily allow a non-technical user to change it.

You can build on this example and add a number of text blocks that you may need a client to edit throughout the Site.

Add a New Panel, Section, Setting and Control for the Customizer

<?php
add_action( 'customize_register', 'genesischild_register_theme_customizer' );
/*
* Register Our Customizer Stuff Here
*/
function genesischild_register_theme_customizer( $wp_customize ) {
// Create custom panel.
$wp_customize->add_panel( 'text_blocks', array(
'priority' => 500,
'theme_supports' => '',
'title' => __( 'Text Blocks', 'genesischild' ),
'description' => __( 'Set editable text for certain content.', 'genesischild' ),
) );
// Add Footer Text
// Add section.
$wp_customize->add_section( 'custom_footer_text' , array(
'title' => __('Change Footer Text','genesischild'),
'panel' => 'text_blocks',
'priority' => 10
) );
// Add setting
$wp_customize->add_setting( 'footer_text_block', array(
'default' => __( 'default text', 'genesischild' ),
'sanitize_callback' => 'sanitize_text'
) );
// Add control
$wp_customize->add_control( new WP_Customize_Control(
$wp_customize,
'custom_footer_text',
array(
'label' => __( 'Footer Text', 'genesischild' ),
'section' => 'custom_footer_text',
'settings' => 'footer_text_block',
'type' => 'text'
)
)
);
// Sanitize text
function sanitize_text( $text ) {
return sanitize_text_field( $text );
}
}

So here a new panel is created which can hold any future text blocks, a section, the actual footer setting and a control to control what type of data we are dealing with.

The panel and section are optional, you can append the setting and control to an existing section which should belong to a panel.

In the add_setting array I am using a sanitize callback sanitize_text which is declared further down in the code, the text which the user enters via the Customizer is run through a sanitize filter which essentially strips out code, but allows some html as I want the ability to use links, alternative sanitize functions include sanitize_text_field or esc_textarea, here is a reference to all of them. It is considered best practice to make sure that data being input and output is validated and stripped of any malicious code.

How it looks in Customizer

So our Customizer will now have new panel and section…

genesis-sample-customizer-text

New Top Level Panel

 

 

genesis-sample-customizer-text-panel

New Section

 

 

genesis-sample-customizer-text-sanitize

New Setting and Control

 

Displaying in the Front End

To display the text in the front end we need to call the add_setting name (which in this case is ‘footer-text-block‘) with the get_theme_mod() function.

<?php
// Change the footer text in Genesis with a back up if blank
add_filter('genesis_footer_creds_text', 'genesischild_footer_text');
function genesischild_footer_text() {
if( get_theme_mod( 'footer_text_block') != "" ) {
echo get_theme_mod( 'footer_text_block');
}
else{
echo 'Copyright &copy; 2016 · Genesis Sample Theme on Genesis Framework · WordPress · Log out'; // Add you default footer text here
}
}
// Regular WordPress theme just add in the footer template
<?php if( get_theme_mod( 'footer_text_block') != "" ): ?>
<p class="footer-text">
<?php echo get_theme_mod( 'footer_text_block'); ?>
</p>

So in the above I am using the Genesis filter genesis_footer_creds_text to change the text to the Customizer set text if it’s not empty – if that field is blank then I am calling in a default text line.

If the theme is not Genesis then just add the code directly where you want it output.

9 Comments

  1. Andy on May 18, 2016 at 1:05 am

    Hi Neil,

    Is there a way to do this with images instead of text blocks? I’m using genesis and there isn’t much out there on how to insert simple images into the customizer options. Thanks!

    • Neil Gowran on May 18, 2016 at 2:56 am

      Here is a recent tutorial I did on using a background image on a widget via the Customizer – https://wpbeaches.com/add-background-image-widget-customizer-wordpress/

      • Andy on May 20, 2016 at 4:56 pm

        Awesome. I’ll try that out. One more thing as I can’t seem to find much on the theme customizer with Genesis. Is there a way to add dynamic links to these images and text blocks?

        • Andy on May 25, 2016 at 10:51 pm

          Do you know of a good article that add dynamic inks to text fields in the customizer at all Neil? I’m just stuck on this final thing.

  2. Amber on May 11, 2016 at 9:47 pm

    This is a GREAT tutorial and I’m so glad I found it after an hour of trying to search how to do this on my own with no luck! Thank so much for this!

    There is one thing I’m seeming to be having troubles with and that’s to have the text and styling updates appear real time as it I update it in the theme customizer. It doesn’t seem to be updating (so not applying the text changes until after I hit the “Save & Publish” button. I’ve copied your code exactly as I see here so not sure what might be happening?

    • Neil Gowran on May 13, 2016 at 12:48 am

      Hi Amber, my sanitize function was incorrect, change it from return wp_kses( $text ); to return sanitize_text_field( $text ); and then it should refresh normally

      • Amber on May 18, 2016 at 12:39 am

        Awesome! Thanks so much Neil!

  3. Clay on April 12, 2016 at 4:15 am

    Thank you for the great tutorial. However, I think you need

    add_action( 'customize_register', 'genesischild_register_theme_customizer' );

    in order to get it to show up in the customizer.

    • Neil Gowran on April 12, 2016 at 4:31 am

      Of all the things to leave out! Thanks for letting me know – gist updated

Leave a Comment





%d bloggers like this: