Re: Content Blocks In WordPress?

[davesgonebananas]

I have recently done something similar (I think) for the reworking of a client’s website. You can see on this page http://preview.fraserhouseclinic.co.uk/about/our-team/ that there are six blocks. NB This site is not yet live. There are a few rough edges. All constructive criticism is welcome.

Each block has an image, a title and a description. Each block represents a ‘child page’ of the Our Team page – if you add another page under Our Team another block automatically appears. The title of the block is the title of the child page. The image is actually derived from the title as well. The description is a custom field.

The first thing I did was create an ‘Our Team’ template. This template drives the Our Team page. Inside the template I created a loop using query_posts to find all the child pages of the current page. Inside this loop I created my block, adding title, image and description.

<?php query_posts("post_type=page&post_status=publish&post_parent=$post->ID&orderby=menuorder&order=asc&showposts=99"); ?>

This selects only pages that are published who’s parent is the current page. We order them by menuorder to allow us to tweak the ordering manually in the admin. We also show up to 99 posts to override the site’s default limit of 5 posts per page.

<?php if (have_posts()) : while(have_posts()) : the_post(); ?>

This is (in WordPress lingo) "The Loop"! Inside we have access to all the standard post tags like title, permalink and content.

<a href="<?php the_permalink() ?>" title="<? the_title_attribute() ?>">
<img src="<?php bloginfo(‘template_url’) ?>/style/images/team/<?php echo $post->post_name ?>.jpg" alt="<?php the_title_attribute() ?>" />
</a>

Here I cheated and used the page slug (the bit that makes up the url) as the name of image. This saved me from having to use an attachment.

<h4><a href="<?php the_permalink() ?>" title="<? the_title_attribute() ?>"><?php the_title() ?></a></h4>

Nice and simple. This is the title with a link to the sub page.

<p><?php echo get_post_meta($post->ID, ‘role’, true) ?></p>

The last bit of magic, I used a custom field on the child pages to allow the client to specify the person’s role. It is also used in the child pages themselves, as they also have a (different) custom template.

<?php endwhile; endif; ?>

Finally, close the loop. That’s it your template is done! Hope you are able to understand that and make use of it in your WordPress theme. One of the reasons I have come to love using WordPress is it’s flexiblity and I think this is a good demonstration of it.

Regards
Dave