customizing recent posts

by

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

2 Answers
2

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.

Leave a Comment