Support » Theme: Coraline » Adding thumbnails to post page

  • Hi
    I need some help with the featured images on Coraline for my website – I usually use the More tag to have just the first paragraph of each post appear on the post page. I’d like to use the featured images as thumbnails that appear to the left of this text, preferably just on the post page and not on the actual post itself.
    I know this is not how the featured images work in Coraline and that I’ll have to edit the theme. I’ve done enough research to know that this is possible – but not how to do it.
    So far I’ve used the Edit CSS tool for the modifications that I’ve made to the theme but as far as I can tell I’m going to need to set up a Child theme. I’ve added a Coraline-child folder and got as far as creating the header for the style sheet as detailed in the Child theme codex.
    But I’ve no idea what to do next so I’d appreciate any suggestions, preferably with detailed instructions as I’m learning as I go.
    Thanks in advance,

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn


    Automattic Happiness Engineer

    I’d strongly suggest you consider swtiching over to Coraline’s successor, Colinear, which displays featured images on the blog page, as you can see on this demo:

    Coraline is a super old theme and isn’t responsive, so it’s not easily readable on mobile devices. Switching to Colinear will give you all the benefits of a contemporary, responsive theme with updated typography that looks right on modern devices. You’ll also get the featured images built in. 🙂

    Once Colinear is set up, we could modify the placement of the featured images if you wanted them smaller and to the left of a post excerpt.

    Let me know how you’d like to proceed and we’ll take it from there.

    Hi Kathryn,
    Thanks for your answer. I did look at Colinear but was not happy with the responsiveness. It seems to me that Coraline is responsive in its own way, in so far as the design adjusts as the browser window is re-sized. I use Coraline with three columns including two sidebars on the right. So the way that it resizes preserves the integrity of the design and seems to work on a computer and tablet regardless of the screen and browser window size. The theme also works very well on a mobile, showing the main posts column with just one of the sidebars underneath that, which is good for me.
    Colinear, on the other hand, is responsive in a different way, with the entire design changing according to the width of the browser window. It’s only able to display the three column layout with a wide browser window. The sidebars disappear when I make the browser window smaller – but this happens much too early in my opinion, meaning that readers will only see the full three column design if they have a very wide browser window, much wider than I would normally use myself, and much wider than is necessary for the majority of other websites that I use.
    I understand your earlier point about newer themes having more up to date support and that seems like a sensible long term goal for me. But I concluded that I would be better off sticking with Coraline in the short term until I was ready to move to a simpler layout with fewer columns or had learned how to adapt other current three column themes to my needs.
    Actually, that was why i wanted to learn how to adapt the Post thumbnails – I realised that it would give me a bigger choice of suitable themes to start with since I don’t want the pictures to dominate the text. I’m assuming that if I can work out how to set up the post thumnbnails in Coraline, then I’ll be able to use the same principles to tinker with other themes.
    Does that make sense?



    Hey @nessan

    I’d definitely agree with Kathryn on this one – while it’s possible to make changes to Coraline, an updated theme with modern functionality would provide a lot of benefits.

    For example, if I open your site as it is now on my phone I get three columns on a narrow screen so everything is really small – I have to zoom in to read comfortably. This isn’t the best experience as a visitor because it also requires scrolling horizontally to see a full line of text.

    Modern, responsive themes like Colinear shift the layout, so the items on the screen can be reasonably sized and easy to view. Much better for people visiting the site 🙂

    If you wanted to add featured images to the posts on the home page, you can.

    Your child theme will need a copy of the parent theme’s loop.php file.

    In that copy, you’ll need to add the following line of code just before the_content() gets called on line 187:

    <?php the_post_thumbnail('thumbnail',array('class' => 'alignleft')); ?>

    That will insert the smallest version of your post thumbnail, aligned to the left so text can wrap around it. There won’t be much space for the text to wrap, especially as the screen size decreases, so it may only be a word or two per line as the text wraps.

    Nessan Cleary


    Hi Chad,
    Thanks for your help. You were right – the mobile view does default to the full layout unless you reload it, which of course most readers won’t think to do. So I’ve spent a bit of time rethinking the layout and have looked at a number of responsive themes but nothing seems to quite do what I want.
    I’ve also tried adding the code that you suggested for the Child theme to see what I could do with Coraline but got confused by the enqueuing process. I realised that I should spend some time learning more about WordPress before mucking around with bits of code that I don’t understand.
    I concluded that the best short term solution would be to follow yours and Kathryn’s advice and switch to Colinear but to use a simpler layout, which I’ll do over the next week or so when I get some more time.
    So, thanks for taking the time to reply to my query – no doubt I’ll have more questions when I get stuck into Colinear!



    Sounds like a learning curve I know very well 😉 Enjoy Colinear, and pop open a thread if/when you need a hand!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding thumbnails to post page’ is closed to new replies.