[resolved] How to replace a post title with an image (9 posts)

  1. sisterdawn477901822
    Posted 4 years ago #

    Hi all,

    I would like to replace a post title for an image (note: not the blog title).

    I'm having problems achieving this and can't find anything on the forums for this specific scenario.

    I have managed to suppress the post title, however I cannot figure out how to insert the image into the 'title' area of the post. So for the meantime I have inserted the image into the main body of the post, however this isn't ideal, as the image actually has the post title in it.

    The url for the post in question is:

    I'm using the 'Imbalance 2' theme by WPSHOWER.

    Any thoughts? Many thanks.

  2. zex2911
    Posted 4 years ago #

    in your page.php and single.php find a line that display's the title of a post 'the_title()', and change it to <img src="PathToYourImage.png" alt="">

  3. sisterdawn477901822
    Posted 4 years ago #

    Hi Zex, thanks for your response. I think this would change every post title to be the image however, wouldn't it?

    It's just one isolated post that I want to change the title to an image for. Sorry I didn't specify that.

  4. popper
    Posted 4 years ago #

    You could set the "title image" as the featured image of the post and then replace the_title() for:

        if ( has_post_thumbnail() ) {
        // check if the post has a Post Thumbnail (featured image) assigned to it.
        } else {
  5. sisterdawn477901822
    Posted 4 years ago #

    Hi Popper, thanks for your response! However I prefer not to use this 'title image' as the featured image, as it won't look good in the thumbnail on the home page.

    Any other ideas?

    Is it possible to specify in the style.css to insert an image there? This is where I put the code to suppress the post title. My attempt to incorporate the image was:
    .postid-5 .entry-title { display: none; background: url(http://sketchofshanghai.net/wp-content/themes/imbalance2/images/harbin_title_edit2.gif) no-repeat; }

    but it didn't work (of course! I have no idea what I'm doing)

  6. mukesh panchal
    Posted 4 years ago #

    .postid-5 .entry-title {
    background: url("http://sketchofshanghai.net/wp-content/themes/imbalance2/images/harbin_title_edit2.gif") no-repeat scroll 0 0 transparent !important;
    height: 221px;

  7. Michael
    Forum Moderator
    Posted 4 years ago #

    small adjustment to your idea:

    .postid-5 .entry-title { display:block; text-indent:-9999px; background: url(http://sketchofshanghai.net/wp-content/themes/imbalance2/images/harbin_title_edit2.gif) no-repeat; height:260px; width:100%; }

    i.e. set a fixed height; set it to display: block; and use text-indent to push the text off the screen

  8. sisterdawn477901822
    Posted 4 years ago #

    that worked! thank you both!!

  9. zcamine
    Posted 3 years ago #

    Hi sisterdawn477901822

    I notice on your website you managed to put a logo instead of blog title.

    Actually I want to keep my title but i want to put some small social network icons beneath it.

    do you have any idea?
    I looked all everywhere including wpshower forum which is actually full of spam.

    PS: i'm a noob

Topic Closed

This topic has been closed to new replies.

About this Topic