WordPress Custom Fields; laying text over your lead graphic

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.

Generic WordPress default theme

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.

Sample lead WordPress title

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.

Custom Field Screenshot

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); ?>
<img src="<?php echo $image; ?>" />
</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.

Discuss - 59 Comments

  1. [...] January 3, 2009 Nice tutorial on using custom fields in wordpress. I think I will be able to use them for the ‘used marina lifts’ section.  http://5thirtyone.com/archives/875 [...]

  2. [...] a little flair to your blog and add some text to your flagship images by only using WordPress custom [...]

  3. Jay says:

    Great tip. Custom fields are an important feature in wordpress. I use it all the time.

  4. [...] a little flair to your blog and add some text to your flagship images by only using WordPress custom [...]

  5. [...] WordPress Custom Fields: Laying Text Over Your Lead Graphic [...]

  6. [...] WordPress Custom Fields: Laying Text Over Your Lead Graphic [...]

  7. trotter says:

    This is exactly what I needed.

    Thank you.

  8. Avangelist says:

    This is good, but is it not possible to make the entry fields more user friendly like making the custom field for an image permanent and set to file browser so you can search for the image instead of having to open it in media and copy the url which from a user perspective not only takes time, but is open to errors.

    • Derek says:

      There are plugins for WordPress available that you can use to make the post editor window more convenient. Check the WordPress plugins list. You can change the layout of the editor page – putting more emphasis on the custom fields. There are also a few media uploader plugins that you can use instead of the baked in version offered with WordPress.

  9. Avangelist says:

    Thanks Derek. I found a plugin last night called more-fields, which seems to be along the right lines, I think I may end up writing my own hooks to get what I have in my head.

    Cheers for replying.

  10. jn122 says:

    Hi

    Is it possible to apply this mod to the post title itself rather than the index page?

    Cheers

  11. Cas says:

    Perfect! I just used your method to tame the text overlay on a Featured Posts slider on a site I’m working on – worked like a charm. Thank you so much!

  12. Nate says:

    YOU FORGOT TO ECHO THE IMAGE! Why don’t you edit your post so when someone with no PHP experience finds it in a search, they don’t WASTE 2 HOURS FIGURING THAT OUT!?

    ID, "lead_image", true); ?>
    <img src="" alt='' />

  13. [...] WordPress Custom Fields: Laying Text Over Your Lead Graphic A great way to improve the look of your theme by taking advantage of custom fields. [...]

  14. [...] 82. Laying text over your lead graphic/Images [...]

  15. Jermaine says:

    I would mostly rate custom fields for its ability to create a portfolio site with ecommerce capabilities.

    Learning how to split and categorise values within the same custom field is an awesome trick:

    http://www.graphicbeacon.com/how-to-split-and-categorize-wordpress-custom-field-values/

  16. Off the subject but, I like the way the nav follow the viewer down the post. cool.. Thanks for the great tut!.

  17. Corey says:

    Thank you so much for this tip, it really helped me out after a good deal of fruitless research.