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

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.

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.