We needed a super small WordPress plugin for a client of ours which allowed us to have control over the CSS of individual words in each page title. We did this by applying a filter to the the_title() function which split each word out and I applied a span tag with a unique class to each one. This plugin is available on the “PixoPoint Add Span Tags to Titles plugin” page.

If you would like to use the functionality of the plugin but prefer to include such functionality in your theme, then simply include the following code in your themes functions.php file:

/**
 * Primary span tag adding function
 * Code from PixoPoint Add Span Tags to Titles plugin (https://geek.hellyer.kiwi/products/add-spans-to-titles/)
 */
function pixopoint_add_spans_around_words( $name ) {

	// Initially check that it doesn't contain HTML as that's bound to mess things up
	$check = strip_tags( $name );
	if ( $check != $name )
		return $name; // Just spit out original string if HTML was included - no sanitization as assumes that user intended to include HTML

	
	$name = explode( ' ', $name ); // Explode inidivual words into array
	foreach ( $name as $number => $key ) {
		$new_name .= '<span class="word-' . $number . '">' . $key . '</span>' . ' '; // Add span tags
	}
	return $new_name;
}
add_filter( 'the_title', 'pixopoint_add_spans_around_words' ); // Filtering the title

PixoPoint Add Spans to Titles WordPress plugin in action