Support » Fixing WordPress » change location of post thumbnails

  • Hello to everyone,
    I just joined the community and regret not having it done earlier!

    i would like to change where the auto thumbnails are generated and change their size.
    Actually they appear next to the preview of the article , i would like to place them next to each title so that in the home page i have my recent articles with the thumbnails next to the title.
    I am using the theme built in page template options where i can set generate auto thumbnails.

    Thanks in advanced

Viewing 15 replies - 1 through 15 (of 20 total)
  • Here is the Codex page on changing post thumbnail sizes

    and here is an article explaining how to use that

    You have to change the location of the thumbnails by adjusting the page’s CSS. You will have to post a URL if you want someone to help with that. The CSS required is specific to your site. First change the thumbnail sizes, then ask for help with the CSS.

    Thanks for your answer,
    i followed your link and tried adding those few lines in functions.php
    as well as the code in the home.php and single.php
    But even though after doing that, the thumbnails are still the same.

    Here is my blog if it can help,

    i would also like to add, it may help.

    my original theme was “aggregator” and i think it already has the function added but not sure how. All i know is that i activated auto thumbnails using the blog-page template and then under the template option i checked a box called generate auto thumbnails.



    Its hard to tell without seeing the theme’s code but it looks like your current theme is not using post thumbnails and is making the post images appear in its own, non-standard way. If that is true the theme would need to be changed a bit to use the smaller thumbnails.

    ok i see, thanks for your answer.
    I tried opening the page template file under the theme’s folder: called page-blog.php
    i found a php scipt;

    <?php $thumb = '';
    					$width = 100;
    					$height = 100;
    					$classtext = '';
    					$titletext = get_the_title();
    $thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext);
    							$thumb = $thumbnail["thumb"]; ?>
    							<?php if ( $thumb <> '' && !$et_ptemplate_showthumb ) { ?>
    								<div class="et_pt_thumb alignleft">
    									<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>
    									<a href="<?php the_permalink(); ?>"><span class="overlay"></span></a>
    								</div> <!-- end .thumb -->
    							<?php }; ?>

    i changed the size on the beginning to 100×100 the problem is that only changes the picture, what about the box which holds the image?

    Requires resizing an image and some CSS changes

    The background box that surrounds the image is this file
    its 199 x 199px – make it smaller – resize to exactly surround the new thumbnail size.

    In this file

    on line 21 is this

    div.et_pt_thumb {
        height: 191px;
        margin: 0 20px 0 0;
        padding: 8px 0 0 8px;
        position: relative;
        width: 191px;

    On line 22 is this

    div.et_pt_thumb span.overlay {
      background: url("images/blog-image-overlay.png") no-repeat scroll 0 0 transparent;
      display: block;
      height: 199px;
      left: 0;
      position: absolute;
      top: 0;
      width: 199px;

    Change the height and width in both to match the new thumbnail image size, and the new height and width of the surrounding box

    Keep in mind when you change the theme’s core files, when the theme upgrades the changes you make will be written over by the new theme version. Most themes have a way to customize the theme, either with a CSS panel in the theme options section, or by making a child theme and customizing it.

    Thank you very much for your help,
    i have managed to change the size but i still have a little problem. The thumbnail doesn’t seem to fit in the box anymore. or it doesn’t position itself correctly in the center.
    Do i have to take count of the border? if yes in which setting?

    i think this will help:

    its not in the panel setting because i disable all thumbs in the theme panel.
    i was thinking could it be the post thumbnail php file outside the themes folder who is generating them?

    in the section that starts on line 21 in CSS adjust the padding
    padding: padding: 8px 0 0 8px;

    Start with this
    padding: padding: 5px 0 0 5px;
    and adjust until you are satisfied with the look

    Thank you so much after a few adjustments i seem to have found the correct padding and sizes.

    Could i just bug you with one last question: actually my first question.
    How can i put those thumbnails next to the title.

    I guess it has to been modified in the css file.


    In that code from page-blog.php that you posted earlier. You need to move the location of the block of code you posted, that displays the thumbnail.

    In a normal WP theme the post content is displayed using the_content() or the_excerpt(). Most likely the thumbnail display code is now just before or after that. You need to move it so it displays just before the_title() which is what causes the post title to display. Most likely its going to need some CSS tweaks after you reposition it there.

    that worked! and doesn’t look that bad but a few switches will make it better.

    Thank you for help! 🙂


    in this on line 21, change the first margin number to 7px as I have below, to vertically center the thumbnail with the title

    div.et_pt_thumb {
        height: 41px;
        margin: 7px 20px 0 0;
        padding: 0 0 0 0;
        position: relative;
        width: 40px;

    if i may ask you one last question…

    how do you think i could make it so the thumbnails are aligned to the title and not just in the same line

    You answered me before i even asked. thanks 🙂

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘change location of post thumbnails’ is closed to new replies.