Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Im working on my first wordpress blog and trying to avoid plugins if at all possible for a lot of what doesn't really need to have a plugin. I am slightly familiar with php ( I don't understand it but I know where to put it and what file should go where). I understand the how to change the theme files around, CSS & HTML. So if I can do it with some practice and time I'd rather hand code it then use a plugin.

I'm trying to style my home page sidebar's recent posts and I'm not finding that hard at all, but I'm not sure how to get images into the recent posts. I have an image in each of my posts and now I'm just trying to get a small thumbnail view of the first image into my "RECENT BLOGS" area on my homepage.

enter image description here

Like in my design, here.

Does anyone have a method or snippet of code that would work for what I'm trying to do?

@Tom: This is what my code looks like after placing your suggestion in

<aside id="archives" class="widget">
<h1 class="widget-title"><?php _e( 'Recent Blogs', 'toolbox' ); ?></h1>
<div class="thumbnail">
        <?php
        if(has_post_thumbnail()) {
            the_post_thumbnail();
        } else {
            // show a default image if no featured image is specified
            echo '<img src="'.get_bloginfo("template_url").'http://ambergoodwin.com/averylawoffice/img/SIDEBAR-recentblogimg.jpg" />';
        }
        ?>
    </div>
    <?php
        $args = array( 'numberposts' => '3' );
        $recent_posts = wp_get_recent_posts( $args );
            foreach( $recent_posts as $recent ){
        echo '<h5><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' .   $recent["post_title"].'</a> </h5> ';
     }
    ?>
</aside>

I have made it point to a default image but that's not even showing up. My image is styled

.thumbnail { width: 50px; height: 50px; border: 1px solid #093; padding: 5px;}

And this is the site you can find my sidebar problem at

So I'm not sure what I'm doing wrong..

share|improve this question
    
I'd advise against using timthumb as prescribed in that article you linked to for security reasons –  Tom J Nowell Apr 4 '12 at 8:39
    
You didn't correctly adapt Tom's code. It should be inside the foreach loop. Also call setup_postdata($recent) before showing post content –  onetrickpony Apr 4 '12 at 18:18
    
Could you show me? I'm not really sure what you mean by that. Im trying to put it in the foreach loop bu it's giving me errors on the page.. –  kia4567 Apr 4 '12 at 20:43
    
Maybe Tom can clarify that for you, but essentially it should be something like this –  onetrickpony Apr 4 '12 at 20:50
    
Hmm.. it looks great however it gave me an error. I tried to use it but it was giving me a syntax error. I then placed the aside ID and h1 class outside the <!php> tag. Here is what I did, however it doesn't work. :s Argh... –  kia4567 Apr 4 '12 at 23:01
show 2 more comments

2 Answers

Inside your post loop:

<div class="recent-post">
    <div class="thumbnail">
        <?php
        if(has_post_thumbnail()) {
            the_post_thumbnail();
        } else {
            // show a default image if no featured image is specified
            echo '<img src="'.get_bloginfo("template_url").'/images/img-default.png" />';
        }
        ?>
    </div>
    <div class="title">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </div>
</div>

float the thumbnail div to the left and give the title div an appropriate margin/padding so they don't overlap, and apply some clearfix to the recent-post class and then style to fit.

share|improve this answer
    
It doesn't seem to be working. I can get my formatting right but the image doesn't show up. I've used the "set featured image" function on the posts to give the image I want. Shouldn't this code be pulling that image then? This is what it looks like dl.dropbox.com/u/43287957/sidebar.jpg. –  kia4567 Apr 4 '12 at 2:51
    
have you modified it to show an appropriate 'default'? Even if you have no intention of using one, or that all posts will have an image, it is best for debugging purposes, this way we know if an image was found but is not being shown, vs no image was found –  Tom J Nowell Apr 4 '12 at 8:38
    
Also what is the gray small box in the corner? Is there an image element? I need more information than 'perfect' or 'broken', any technical details such as what the dom looks like for that region etc –  Tom J Nowell Apr 4 '12 at 8:41
    
I believe that was what was happening with the image. The border I set up it showed up but the image didn't. I don't have it there anymore for some reason and I'm not sure why. I have edited my question to give you more information as to what it looks like now. Thanks for you time and I hope you can help me tell me what I'm doing wrong. –  kia4567 Apr 4 '12 at 18:05
add comment

In the end I just downloaded the Advanced Recent Posts plugin. Thanks for all the help guys!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.