Question

I am trying to create a dynamic wordpress front page template that has a five column section in it. I am building my theme using the Reverie framework (based on ZURB’s Foundation (http://foundation.zurb.com/docs/)). In the image below you can see the five columns with icons, an h tag and a paragraph below them. I can build this statically but was hoping someone could point me in the right direction on how to do this dynamically in wordpress so the icons can be changed along with the h tag and paragraph text. Any direction or guidance would be great.

http://crothersenvironmental.com/images/crothers.jpg

Thanks in advance.

Answer 1

This is interesting, I’d recommend using a custom post type for that. Others would argue to use widgets, others would say keep it simple and use a category in posts, while others still would say to just add admin panel options to change it.

With my personal option, you’d install a plugin called Custom Press. Configure a new post type (call it services or something, and make sure Title, Editor, and Thumbnail are checked under “Supports”.

Now in your home page you’d query the custom posts (limiting it to 5), the image would be the post’s featured image, the description would be the post’s content, and the post’s title would be the service’s name.

Create the five posts in the newly created section (should show up right under Comments in the admin panel).

To query the posts on your home page, try something like:

<?php
$query = new WP_Query(array('post_type'=>'services','posts_per_page'=>'5'));
while ($query->have_posts()) : $query->the_post();
?>
<!-- Post Start -->
<?php the_post_thumbnail(array(150,150), array("class"=>"service-image")); ?>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>

<?php endwhile; wp_reset_query(); ?>

What that does is query the five newest posts in the post type ‘services’ (that is what you set in custom press) and loops through each one printing out first the image, then the title, then the content. You’ll need to style this and change it’s structure to match yours.

I hope this points you in the right direction, feel free to ask for any clarifications.
Max