5ThirtyOne

For WordPress users, there are certain scenarios when the typical reverse chronological presentation of content is just not enough. I have experimented with different methods of presenting content on 5thirtyone.com each time a redesign is uploaded – from the text-centric to the image heavy version in use right now. With hundreds of WordPress driven blogs being published on a daily basis, it’s difficult to stand out; even more so if you stick to the standard two-column blog layout. 

The general consensus or recommendation is for users to either a) invest some time into learning the underlying architecture of WordPress in order to create or modify a theme, or b) invest some money for a one-off custom theme. The latter may not sound too appealing for the beginner or casual blogger, so modifying an existing theme like Grid Focus or October Special might be a good place to start.

How can I create a blog without the typical blog layout?

A typical blog landing page is comprised of noticeably sized chunks of text differentiated by a catchy titles and [possibly] a few inline images.

The typical two-column blog layout works but is used so often that new visitors may slowly blur the lines differentiating your blog from the previous. Sure, you could brighten the page with a few inline post images, but why not step it up a little with WordPress Custom Fields.

What are WordPress Custom Fields?

A WordPress post is comprised of the following:

• Title
• Content – text & images
• Categories
• Tags (if you’re running WordPress 2.3+)

Think of WordPress Custom Fields as extra "containers" of data that can be associated with a post – content that can be called and used within The Loop. 

Custom post title with lead graphic background

The first step to setting yourself apart from the rest of the typical title + content blogs is a little style. Adding a photo or image behind a posts title can help to lure a reader into viewing the main excerpt / permalink of your post.

You can achieve a similar effect using WordPress Custom Fields. 

First, create the image / photo that you want to use. For the example above, I create a photo of Boo, our Mini Rat Terrier, titled boo-lead-title.gif. Upload the image to your server and save the URI. If you would like the image and post title to span the entire width of your main content column, you’ll want to create a lead image with a width to match that of your main column. In the standard K2 theme included with WordPress, that width is 450px.

Second, compose a new post. Before saving, scroll towards the bottom of the editor pane and add a new Custom Field in the ‘Key’ field. In the example, I created a Custom Field titled lead_image. Paste the previously saved URI in the ‘Value’ field. Save the post – do not publish yet.

Third, open the index.php file in your themes directory and find the line beginning with <?php if (have_posts()) : ?>. If you are using the default theme, the area of the file we will be editing can be found below:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('Read the rest of this entry'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
</div>
<?php endwhile; ?>

Having previously created a Custom Field called lead_image, we can now call that image from within The Loop. Changes to the above code are in bold below:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="lead-image-wrapper">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php $image = get_post_meta($post->ID, "lead_image", true); ?>
</div>
<div class="entry">
<?php the_content('Read the rest of this entry'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', ', ' | '); ?> <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
</div>
<?php endwhile; ?>

Notice that both the php function and post title are wrapped by a new div with a class lead-image-wrapper. Also notice that the title h2 is loaded before the image.

Fourth, add the following to your style.css.

.lead-image-wrapper { background: #000; position: relative; }
.lead-image-wrapper h2 { font-size: 28px; line-height: 30px; position: absolute; top: 90px; left: 12px; z-index: 1; }
.lead-image-wrapper h2 a { color: #fff; text-decoration: none; }
.lead-image-wrapper img { height: xxxpx; width: xxxpx; }

In order to ensure that the styles are applied, you can either a) remove any previous styles associated with the h2 tags loaded on the index page, or b) place the code at the bottom of the stylesheet overriding any previous code – Cascading Style Sheets. 

• A background color is specified for .lead-image-wrapper in case your image fails to load. Because the title link is white, you want to ensure that the parent element has a background color for readability.
• The title link is positioned absolute relative to the parent element .lead-image-wrapper. Adjust the positioning accordingly for your image.
• Always set a height or width for images – make .lead-image-wrapper img match the dimensions of the lead_image you have uploaded.

Fifth, experiment, experiment, experiment. Part of the learning process is learning by trial and error. Feel free to use the comments for help or feedback.