Add HTML Tags in Post and Widget Titles

In a recent project, I needed to use <span /> tags to add some styles (just color, actually) to post and widget titles. By default — and there’s no hook to disable this — WordPress strips any HTML tags found in post and widget titles. Here’s my solution to this problem. Please keep in mind that I only needed to add <span /> tags, so if you need to add more tags, you should modify the code to fit your needs :)

First, add the span tags to the desired post and widget titles, replacing the < and > characters with hashes ( # ):

Add fake span tags to post and widget titles

Now, let’s create a tiny mu-plugin to handle our HTML tags. We’ll be using four filter hooks for this:

  • the_title, triggered in post titles
  • the_title_rss, triggered in post titles for feeds
  • wp_title, triggered in HTML document title, and
  • widget_title, triggered in — well, you guessed it right — widget titles

The plugin:

<?php
/*
Plugin Name: Enable HTML tags in post and widget titles
Author: Dzikri Aziz
Author URI: http://kucrut.org/
Version: 0.1
License: GPL v2
*/


function kc_convert_title_html_tags( $string ) {
  global $wp_current_filter;
  $filter = end($wp_current_filter);
  $search = array('#span#', '#/span#');
  $replace = ( in_array($filter, array('wp_title', 'the_title_rss')) || ($filter == 'the_title' && (is_admin() || in_array('wp_head', $wp_current_filter))) ) ? '' : array('<span>', '</span>');
  $string = str_replace( $search, $replace, $string );

  return $string;
}

add_filter( 'the_title', 'kc_convert_title_html_tags' );
add_filter( 'the_title_rss', 'kc_convert_title_html_tags' );
add_filter( 'wp_title', 'kc_convert_title_html_tags' );
add_filter( 'widget_title', 'kc_convert_title_html_tags' );

?>

Take a closer look to the replacement string. We need to strip our fake HTML tags from the post titles when:

  • kc_convert_title_html_tags() is called by wp_title or the_title_rss hook
  • the_title filter hook is triggered from within wp_head action hook (eg. the post title is used by the title attribute of feed links
  • we’re viewing a post table in admin area.

However, when we’re inside the <body />, they need to be converted to the real tags.

That’s it! :)

10 thoughts on “Add HTML Tags in Post and Widget Titles”

  1. Your code is actually wrong above. I think when you pasted your code, it stripped out the span tags… Your array is blank at the end of your $replace which just causes it remove the span code completely. I added in the open and closing span into that array and everything works as it should. Might want to update your code sample.

  2. Thanks for this plugin, I’m converting a site from Drupal and part of my design for the sidebars or widgets in WP was to have the first word a different color so this helped a lot. The only issue I had was that it didn’t work on every widget title, some don’t strip the hashes and one stripped but didn’t read it as HTML. Any help would be greatly appreciated!

    The site:
    http://alaskadarts.com

    Thanks again!

    1. I see that you’re using non-builtin widgets…
      This could be the source of the problem. You need to make sure the all widgets you’re using are actually applying the widget_title filter. For example, the ‘Pages’ widget has this line:

      $title = apply_filters('widget_title', empty( $instance['title'] ) ? __( 'Pages' ) : $instance['title'], $instance, $this->id_base);
      
  3. Thank you! Works fine for me!! I just need change some things to works with BR tag

Comments are closed.