Insert a span inside widget title to give a different color to the second word

Question

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.

Answer 1

add_filter('widget_title', my_title);

function my_title($title) {
    // Cut the title to 2 parts
    $title_parts = explode(' ', $title, 2);

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

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

    return $title;
}

Source: Coders Eye - Modifying Widget Titles in WordPress

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.

Answer 2

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.