Expanding Accepted HTML Tags in the Theme Blvd WordPress Theme Framework

If you’ve been working with one of my themes built on my new Theme Blvd WordPress theme framework, you may have noticed that I’m a bit stingy with the things that I actually allow you to put in all of the textareas throughout your admin panel in sections such as the Slider Manager, Layout Builder, and your Theme Options page. In this article I’ll explain why this happens and how you can go about modifying this functionality from your child theme.

Option sanitization and what it means

All option handling throughout my theme framework was built using Devin Price’s theme options plugin at the core of everything. It started with the immense amount of time and effort he put into his default methods of sanitization, which I’ve expanded on a bit. When I originally started building this framework last year, it was Devin’s plugin that taught me so much about this topic and pushed me to research it more.

All right, so what the heck is sanitization? Let’s start with some words of wisdom from the WordPress codex.

Untrusted data comes from many sources (users, third party sites, your own database!, …) and all of it needs to be validated both on input and output.
WordPress Codex

So, when we talk about sanitization, we’re basically just referring to how we handle the options after you submit them and then how we filter the result to ensure that only the things we allow get passed through to your database. This is all in place to provide you with a certain level security.

How textareas within the framework work

When you submit textareas within the framework, your text for each textarea goes through a sanitization process. First, it scans for anything that isn’t just plain ‘ol text, and if it finds any things like HTML tags, it’ll check them against a list of accepted HTML tags that both WordPress allows and the theme framework allows. Any thing that is not on this list of accepted tags, will get stripped out.

Then the sanitized option gets saved to your database, and when it’s displayed on the frontend of your site, the standard WordPress content filter is applied.

This means that shortcodes get processed along with WordPress’s automatic formatting of adding paragraph tags and breaks.

This is a random tidbit sort of irrelevant to this article, but remember that this theme framework comes with the

shortcode which you can use to escape WordPress automatic formatting at any time. Here's an example:
This
will end up
appearing exactly
as you see it here.

[raw]
This
will all
end up still
on a single line.

Currently allowed tags

So what HTML tags can you currently use? Here’s a list.

  • <a>
  • <img>
  • <br> <p>
  • <h1> <h2> <h3> <h4> <h5> <h6>
  • <script>
  • <div>
  • <ul> <li>
  • <iframe>

How to extend the framework to allow additional tags

As with most aspects of this framework, I’ve ensured to apply on a filter here and allow you to edit the accepted tags from your child theme.

NOTE: Remember that this is a pretty robust framework and you should never edit any theme files directly. Always use a child theme or plugin to make your edits. For more information on child themes and the sample child theme that came with your Theme Blvd theme, check out this video: Theme Blvd Child Themes

Let’s go through this by working with an example. Let’s say that you want to add the HTML <span> to the list of accepted tags. There’s really no harm in that, I suppose. After all, I provided support for script tags, so why not add support for spans, as well?

Some stuff...

So, it’s decided. We’re going to add <span> tags to be inputted into all the textareas throughout the Theme Blvd theme framework. But what about attribute we need to put into the span tags themselves? What I mean by that is what if you want to add an ID or a class to your spans, or maybe some custom stylings?

Some stuff...
Some stuff...
Some stuff...

Once you understand how all this works and with some basic knowledge of how the WordPress filter API system works, this customization is quite easy. You’d simply utilize the themeblvd_allowed_tags filter of the framework and put something like this into the functions.php of your child theme:

function my_allowed_tags( $tags ) {
	// Add  tag
	$tags['span'] = array(
		'id' 	=> array(), // Allow ID's in those spans
		'class' => array(), // Allow classes in those spans
		'style' => array() // Allow style in those spans
	);
	return $tags;
}
add_filter( 'themeblvd_allowed_tags', 'my_allowed_tags' );

And then what if you wanted to remove support for one of these allowed tags? Let’s say, for example, you think it’s too much of a security risk that I allow <script> tags to be inserted by default in the framework. In that case you could remove this from being allowed like this:

function my_allowed_tags( $tags ) {
	// Remove support for