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. kristin says:

    To anyone who posted above me..

    There are two things going on here.

    First, check your quotes when you paste the code into your index template, mine were copied wrong. If you want a plain text solution of what your code should look like, check here:
    http://snipplr.com/view/4867.6518/

    Also, he forgot to echo out the image

    For a complete working code snip check here:
    http://snipplr.com/view/4867.6519/

  2. Gray says:

    whoah there, i just noticed: “In the standard K2 theme included with WordPress, …” i just downloaded WP 2.3.3 and it doesn’t use K2. does Derek know something we don’t?

  3. […] WordPress Custom Fields; laying text over your lead graphic Como usar custom fields de WordPress para mostrar texto sobre imagenes como encabezado de un post. (tags: wordpress custom fields images text hack webdev) […]

  4. Upekshapriya says:

    What I would like to see is a field right under the Title field for the image address, so that it would prominent and hard to forget about rather then down at the bottom in the Custom Fields section.

    I’ve recently discovered the More Fields and Fresh Post plugins, either of which might help you do what you want.

  5. […] and prominent in my mind is Derek Punsalan’s, which uses custom fields. I’ll leave the explanation of that technique […]

  6. […] 2)WordPress Custom Fields; laying text over your lead graphic- Adding a photo or image behind a posts title can help to lure a reader into viewing the main excerpt / permalink of your post. […]

  7. […] use a custom field and handler code to highlight a feature post with a related image, or even to add a caption to a feature image. You can do all this either to the single most recent post, or to the X most recent posts, where […]

  8. Epic Alex says:

    Even though I’m subscribed to your feed, I didn’t read this post until now! Its a good post, very informative, but as others have noticed, I think you are missing your img tag on the custom field.

    I recently wrote about creating something similar, but where the posts use a crossfading script to rotate through them.

    I also made my image clickable by wrapping the custom field in an a and img tag, so that clicking the image takes you to the post as well. This seems more natural to me, after all, we’re using the images to pull people in right?

    You can check out my code here: http://epicalex.com/creating-dynamic-crossfading-recent-posts/

    Alex

  9. Hi Derek,
    Your theme made me decide to move to independent-hosted WP. It is the best thing I have seen so far in my 7 months in the blogosphere and two months of blogging. So cooool. I know very little coding and html. My bgrd is in healthcare. I managed to do all the uploading and installations, but I keep getting this error when I try to use any of the sidebar items. Also trying to widgetize the theme has been impossible for me. Please help me. Below is the error code:

    Parse error: parse error, unexpected T_STRING in /home//wp-content/themes/unstandard/index.php on line 13

    These are the first few lines of my index.php:

    <div class=”post” id=”post-“>

    <a href=”” rel=”bookmark” title=”Permanent Link to ”>
    ID, ‘lead_image’, true); ?>

    <?php the_tags(’Tags: ‘, ‘, ‘, ‘’); ?> Posted in |

    Please be kind enough to edit this post as I know your blog is not a forum and should not have this kind of code. Forgive me.

  10. Thanks. That is sorted. I screwed something up when I was tweaking around. I deleted and re-installed it. That aspect is fine now. Are you soon to release the widgetized version. I am unable to do it even with all the guidance (not much) on the Automattic website. Or does anyone know of any plugin that does it automatically?Thanks.

  11. Lawrence says:

    Just a quick point-out – K2 is not built in to WordPress, it’s Kubrick.

    Thanks for the great tutorial though- I hadn’t even got round to thinking about custom fields. Will it will Sync with Live Writer?

  12. Nash says:

    does this work with your grid focus themes?

  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. […] 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. […]

  15. Nithin says:

    I am using a template and added image.i had configured custom fields correctly.Now I can see a box which is inscribed with lead image(writn as text) inplace of image
    http://www.headlineskerala.com

  16. […] WordPress Custom Fields; laying text over your lead graphic […]

  17. […] WordPress Custom Fields; laying text over your lead graphic WordPress Custom Fields; laying text over your lead graphic […]

  18. […] 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. […]

  19. Charlotte says:

    I’ve tried your technique here, and I can’t get it to work. The picture just never shows up.

  20. Aha, nice one Derek. Just what I needed.