How to Put an Image Before the Post Title in WordPress

Last updated on

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!

If you use your site primarily for WordPress, you may consider switching to WordPress specific web hosting. It comes with a host of benefits. Here’s a pricing comparison between the various vendors to get you started, along with an explanation of the benefits of WordPress web hosting.

About Bhagwad Park

I've been writing about web hosting and WordPress tutorials since 2008. I also create tutorials on Linux server administration, and have a ton of experience with web hosting products. Contact me via e-mail!


  1. 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


  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!


    • 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!


  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?


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


  5. Hallo ,
    if i want to move the image to the right side , what i should to add to your function ?


  6. Hello, thank you for this patch. Can I add an image after the title? What should I change in code?


    • Sure, you can! In the step 4 code, replace:

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


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

      Hope this helps! If you’re feeling generous, I’d love a link back from your site 🙂


  7. I need a lot of help I know how to create a child theme and add the code to the fuction.php file.

    I also want to add text over the image. Because the text will change with each post I can work out the css if needed to make it the way I want it. the custom filed and php is what i cant figure out.


  8. Roger Politis says


    This is great code, thanks! It solved my problem exactly.

    I had one “small” request: I’m using the feature for pages, and every time the page title appears somewhere in the WP admin section (the pages list, the menu creation dialog, etc….), instead of just the title the whole html line is displayed each time ( Mytitle).

    This is harmless of course, but kind of messy. Do you think there would be a way to fix this?

    Thanks a lot for the tips and the good work!



  9. How do you keep the icon from repeating itself with all the other post title urls?


  10. Bro We Want Some Help
    We Want add an image after the title? but
    whan i replace Code

    $title = ‘’ . $title;
    $title = $title . ‘ ’;

    Than Come
    The snippet has been deactivated due to an error on line 5:
    syntax error, unexpected ‘class’ (T_CLASS)

    Please Help Me Bro


  11. Hey Rahul,

    I’ll need to go into your site to find out why it’s not working!


  12. Hi,
    This is very nice, thanks.
    Would it be possible to make the image conditional of the post category? So for all posts in category ‘news’ the image inserted would be ‘news.jpg’ and all posts in category ‘fun’ would automatically get ‘fun.jpg’?


  13. This is really effective and just what I’m looking for . I’ve used a custom plugin approach to using on a site I’m building.

    How would you modify your code to put the icon/image in front of category titles as opposed to post titles?

    I also like Niels idea above asking how to make the image conditional of the post category.

    Appreciate any help you can give!

    Cheers, Derek


  14. Hi
    Thanks – great function. Helped me a lot. A kind of related question:
    now on my landing page where I show the latest post entries the image looks a bit of in the title (i.e. not a nice line break). Any easy way to omit the picture in the recent/latest post overview and only show it in the post itself?


  15. it great…. how to give separate or space between the image and post title ..because with your code they’re too close each other


Speak Your Mind