I'm trying to make my widget titles two-colored; the first word white and the second one yellow. I have no idea how I can insert a span before the second word of every widget title so that I can put a color to the span.

3 Answers 3

 * Wraps the first half of the provided string inside a span with the class lol_class.
 * @param  string  $title  The string.
 * @return string          The modified string.
function wpsa_82312_widget_title($title) {
    // Cut the title into two halves.
    $halves = explode(' ', $title, 2);

    // Throw first word inside a span.
    $title = '<span class="lol_class">' . $halves[0] . '</span>';

    // Add the remaining words if any.
    if (isset($halves[1])) {
        $title = $title . ' ' . $halves[1];

    return $title;

// Hook our function into the WordPress system.
add_filter('widget_title', 'wpsa_82312_widget_title');

On a recent project, my client wanted graphical headers for the widgets on her WordPress blog. Unfortunately, widgets are not that easily themed. Nor can you do this in CSS.


If it is a text widget, it supports HTML tags (like span). You can use span and other tags in the heading of that widget. Just declare the span CSS of that heading tag in your stylesheet/CSS file.

  • Please use proper upper-/lowercase letters. This is no chat. Thanks.
    – kaiser
    Jan 19, 2013 at 20:35
  • He probably wants to do it programmatically Jan 19, 2013 at 21:37
  • yes, I'm not sure if only text widgets will be used. programmatically seems to be the better solution. Jan 20, 2013 at 14:21

For just the page title, edit page.php and replace the_title(); with:

$words = explode(' ', the_title('', '',  false));
$words[0] = '<span>'.$words[0].'</span>';
$title = implode(' ', $words);
echo $title;

or for generally all titles (this will add the span around the first word in any title, such as post titles, page titles, and the_title is also used for instance in page lists) - add something like this to functions.php of your theme:

add_filter('the_title', 'span_first_word');
function span_first_word($title) {
$words = explode(' ', $title);
$words[0] = '<span>'.$words[0].'</span>';
$title = implode(' ', $words);
return $title;
  • The OP was asking for widget titles... Sep 27, 2013 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.