How To Put An Image In The WordPress Title

Most blog titles will be plain text. That’s what users expect generally and it’s what they like to see on Google. It’s a fine line between standing out in the SERPS and being seen as spam. It’s possible if you do it carefully. Sometimes you may have seen additional character sets in the titles of some blog posts. Emoticons for example, or emojis. ASCII art etc, are all possible.

In this article, I’ll show you how to put an image in the WordPress title – either before or after. You’ll have to take care of the sizing of the image and make sure that it’s not too large or too small compared to the font of the title. So let’s get started!

1. Upload the Appropriate Image

First, make sure that the image you choose is compact and will fit nicely next to the title. This code won’t automatically resize the image to fit your title. You can size it either before or after you upload it. But if you choose the latter via the WordPress interface, the URL will change.

Use the media editor to upload your image and make a note of the URL at which you can access it. We’ll need this later in step 3.

2. Enable Custom Fields in WordPress Gutenberg

Gutenberg switched up a few interface elements. One of them is the old “Screen Options” bar that used to display at the top of every WordPress editor. This used to control the display of various meta boxes below the post. Now that’s been replaced by a new menu.

Go to the post for which you want the image in the title. Click the three vertical dots on the top righthand side and choose “Options” as shown here:

In the pop up dialog box, make sure that you check the “Custom Fields” box like this:

That’s it – we’ve now enabled custom fields in Gutenberg.

3. Specify the Image URL for the Post with a Custom Field

Custom fields are made up of two pieces of information – a name, and a value. In the screenshot below, you can see that I’m using the name of “title_image”, and the value is the URL we got in step 1:

The “name” is the value we’re going to use to retrieve the image URL. Make sure that it’s the same for all future posts where you need an image in the title as well. Save your post changes.

4. Add the Custom PHP Code

To add custom code to WordPress, follow this tutorial. You can also just add it to your theme’s functions.php file, but I don’t recommend that for several reasons mentioned in the tutorial.

Here’s the code you need to paste:

function image_in_title( $title) {
    if(get_post_meta(get_the_ID(), 'title_image', true)) {
        $img_source = get_post_meta(get_the_ID(), 'title_image', true);
        $title = '' . $title;
    }
    return $title;
}

add_filter( 'the_title', 'image_in_title');

This code takes the “title_image” value and adds it in front of the title. Save your PHP changes and when you preview your post, you’ll see the image appear in front of it like this:

If you want, you can also make it appear after the image. Change this line:

        $title = ‘<img class=”icon_title” src=”‘. $img_source .'” />’ . $title;

Into this line:

        $title = $title. ‘<img class=”icon_title” src=”‘. $img_source .'” />’;

And you’re done!

If you know a bit of PHP coding, you can also add conditional statements so that the image only shows up on single pages and not on the home page, or archives. Or you can use this as an inspiration to add image tags next to your category names. The possibilities are endless!