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!

Comments

  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

    Reply

  2. Total newbie re: editing WordPress code, but I’ve been asked to make this happen for someone’s site. Does this method work for pages too (the site is almost entirely pages)? Would any of the terminology have to change?
    Also, here you say to add to functions.php, then in your advice about adding snippets you have other suggestions like creating a custom plugin. Can this be done via any of your suggested methods for adding code, or does this have to be added to the existing functions.php? I’m terrified of crashing this website!

    Reply

    • WPTweaks Admin says:

      Hmmm…I think it should work fine with just pages. Try it out. If it doesn’t, you can just delete the code!

      It will work fine either in functions.php or with a custom plugin. The only reason I would be hesitant with putting it into functions.php is if the theme author has or hasn’t closed his < ?php tags. For this reason, I suggest you use a custom plugin exactly as per the earlier tutorial. It's safer that way!

      Reply

  3. Noob here: If I wanted to add an icon/image after the title do I just change before to after in the code and such?

    Reply

  4. If i do this, in admin mode – editing website my titles of post are title. It works, but it looks bad. Fix please?

    Reply

Speak Your Mind

*