Set title of the WordPress page with two different colors

2 Views

The title in my WordPress is of two words (say “The Company” for example). Right now the default color is Blue. But I want the “The” portion in the above example to be Grey. I used the font tag and set it as <font color="grey">The</font> Company in the site title Input box. In the preview page it is showing correctly, but when I visit my page , it is showing as

<font color="grey">The</font> Company

Read More

including the tags. How to modify? I’m using mindfulness theme in WordPress
(similar kind of) if someone throws a light on option two of this page.

A briefly describing image:

The Company - site title

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. How to target specific words in the blog title of the Twenty Twelve theme?

    You can try the following, it works for the Twenty Twelve theme:

    /**
 * Wrap the first word of the blog title with the <span>...</span> tag.
 * Assumes the Twenty Twelve theme.
 *
 * @see http://stackoverflow.com/a/25096093/2078474
 */

add_filter( 'body_class', 
    function( $class )
    {
        add_filter( 'bloginfo', 'so_25094932_modify_first_word', 10, 2 );
        return $class;
    }
);

function so_25094932_modify_first_word( $output, $show )
{
    static $counter = 0;

    // Target the "name" part:
    if( 'name' === $show )
    {
        // Target the second instance:
        if( 2 === ++$counter )
        {
            remove_filter( current_filter(), __FUNCTION__ );

            // Modify the first word of the blog title:
            $title = explode( ' ', $output );
            if( count( $title ) > 0 )
            {
                $title[0] = sprintf( '<span>%s</span>', $title[0] );
            }
            $output = join( ' ', $title );                      
        }
    }
    return $output;
}

    where we use the bloginfo filter to target only the second instance of the blog name, counted from the <body> tag.

    Then we can target the span tag with CSS:

    h1.site-title span{
    color: red;
}

    Example:

    Here’s a screenshot:

    Blog title modified

    It should be possible to adjust our code snippet to other themes as well.

    I hope this helps.

  2. To do so you have to change the style.css that controls your design | theme.

    Edit CSS from wordpress:

    Login to WordPress, not sure which version you’re running, but you should have a section called Themes or Design. From there choose Theme Editor. There will be a list of all the files you can edit, the CSS stylesheet should be named style.css.

    You will have to have write access in order to edit it from within WP admin.

    Otherwise you will have to find the file via FTP on your website, download it to your computer, edit it, and then upload it back to your site.

    Edit CSS the way you want it:

    <span id="the">The</span>
<span id="company">Company</span>
<style>

#the{color: #0033CC;} //refers to blue.
#company{color:#CCCCCC;} //refers to grey.

</style>

    There is also a fiddle for you to test it:

    JSFIDDLE Demo

    GoodLuck!