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.

I'm developing a theme that will have two recent posts section on the home page- one section for recent portfolio updates and the other for recent blog posts. I'm struggling with implementing these functions in the theme; I know it's something to do with wp_query, I'm just not entirely sure how to go about this. Any and all help is greatly appreciated.

HTML:

    <div id="recent">
        <div id="recent-work">
                <p><span>Recent Work</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                        <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div>
        </div><!-- end recent-work -->
        <div class="divider">
                <img src="img/divider.png" alt="Section divider" />
        </div><!-- end divider -->
        <div id="recent-blog">
                <p><span>Recent Blog</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                        <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div>
        </div><!-- end recent-blog -->
</div><!-- end recent -->

CSS

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
    padding-bottom: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
    position:relative;
}

#recent #recent-work p {
    padding-bottom: 20px;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-blog {
    display: block;
    float: right;
    position:relative;
}

#recent #recent-blog p {
    padding-bottom: 20px;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent .next {
    position: absolute;
    bottom: -40px;
    right: 0px;
}
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

If the blog / portfolio items are grouped into categories, you can do this at the top of your template file:

<?php
$portfolio_query = new WP_Query('posts_per_page=3&category_name=portfolio'); // note 'portfolio' is the category slug
$blog_query = new WP_Query('posts_per_page=3&category_name=blog'); // note 'blog' is the category slug
?>

Then in your markup:

<?php if ($portfolio_query->have_posts()) : ?>
<div id="recent">
    <div id="recent-work">
            <p><span>Recent Work</span></p>
            <?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?>
            <a href="<?php the_permalink(); ?>"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
            <?php endwhile; ?>
                    <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div>
    </div><!-- end recent-work -->
<?php endif; ?>
    <div class="divider">
            <img src="img/divider.png" alt="Section divider" />
    </div><!-- end divider -->

<?php // repeat the whole if clause here for the blog posts, just replace $blog_query with $portfolio_query ?>
share|improve this answer
    
thank you for your quick response. To be clear- <?php $portfolio_query = new WP_Query('posts_per_page=3&category_name=portfolio'); // note 'portfolio' is the category slug $blog_query = new WP_Query('posts_per_page=3&category_name=blog'); // note 'blog' is the category slug ?> goes after <?php get_header(); ?>? Also, <img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> was meant as a static placeholder for post thumbnails. How do I incorporate post thumbnails into the code you've given me? –  user1255049 Jun 20 '12 at 1:47
    
@user1255049 you can put that code anywhere before you output the markup for the posts, but as a best practice, at the very top before get_header() would be best. As for post thumbnails, you can use the_post_thumbnail(). Full documentation: codex.wordpress.org/Function_Reference/the_post_thumbnail –  jessica Jun 20 '12 at 1:53
    
Perfect, thanks again. –  user1255049 Jun 20 '12 at 2:27
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.