How to Put an Image Before the Post Title in WordPress

Sometimes you might want to place an icon or an image before the post title. This might be a different image for each post, depending on your requirements. Here’s a simple step by step guide with screenshots on how to accomplish this.

Step 1: Upload your Image to WordPress

The first step is to get the URL of the image for the particular post you’re interested in. You can upload it either to WordPress, or some other external service. The only important part is that it should be a publicly available URL.

Step 2: Enable Custom Fields

WordPress has a feature called “custom fields”, which allow you to store stuff unique to each post. It’s hidden by default, so you need to enable it by going to your WordPress editor and clicking “Screen Options” at the top of the screen. Then place a check mark next to “Custom Fields” as shown here:

This will create a new area at the bottom of the post editor called “Custom Fields”.

Step 3: Create a new Custom Field for the Post

Open the post for which you want to add an image before the post title in the WordPress editor. Now scroll down till you see the “Custom Fields” section. Click “Enter New” like this:

Now you’ll have two boxes. In the left hand box type “image_before_title_url”, and in the right hand box, type the URL of the image you just uploaded:

Save the changes to your post.

Step 4: Add Code to your functions.php

The final step consists of adding code to your functions.php file, or wherever you place custom PHP code. If you don’t know how to do this, read my earlier tutorial on adding code snippets to WordPress. Here’s the code you need to insert:

function insert_image_before_title( $title, $id = null ) {

    if(get_post_meta($id, 'image_before_title_url', true)) {
        $img_source = get_post_meta(get_the_ID(), 'image_before_title_url', true);
        $title = '<img class="icon_title" src="'. $img_source .'" />' . $title;

    return $title;
add_filter( 'the_title', 'insert_image_before_title', 10, 2 );

Once added, save functions.php and you’re done!

The next time you view your post, you will see the icon or image you uploaded next to it like this:

Repeat Step 3 for each entry for which you want to place an image before the post title. You can even modify the above code to have a default image by changing the code to the following:

function insert_image_before_title( $title, $id = null ) {

    if(get_post_meta(get_the_ID(), 'image_before_title_url', true) {
        $title = '<img class="icon_title" src="<?php echo get_post_meta(get_the_ID(), 'image_before_title_url', true);?>" />' . $title;
   } else {

        $title = '<img class="icon_title" src="[URL of Default Image]" />' . $title;


    return $title;
add_filter( 'the_title', 'insert_image_before_title', 10, 2 );

In the above code, replace [URL of Default Image] in bold with the URL of the default image you want to prepend to every post title. There’s a lot of flexibility here, and you can restrict it to specific categories or tags, or post types, or whatever!


  1. Ridagold says:

    Hi, very nice example of code. But, at this time I need to insert a text before a post title, how can I do that?
    Thank you for your help


Speak Your Mind