WordPress Custom Fields: Add Excerpts And Post Thumbnails To Theme

jaredwilli — Mon, 18 Jan 2010 04:51:22 +0000

I have been working on making a new theme lately, and since it is the first WordPress theme I’ve made from scratch, design to development, I’ve been trying to incorporate a number of features that I wish this website’s theme had. I could easily hack this site’s theme up and add anything to it, but I’ve learned it would be far more easy to build a new theme from scratch, after hacking the free theme this site started out with up into pieces, and making the code a huge mess.

One thing thing I would like to implement here that I have included in the new theme I’m making is post thumbnails. If you haven’t noticed the index page of this site has a post thumbnail but it isn’t displayed using custom fields. I simply include the image html code in the Excerpt field along with the post description. The post excerpt is all that shows.

I talked about how to use excerpts in your theme here, and wanted to Using the excerpt to display just the post description, and custom fields to display the post thumbnail, you can have more control over the appearance, and it’s just a better way to do it.

Adding excerpts with thumbnails to your theme

In your WP admin on the post write page you will see the Custom Fields box. You may have to expand it if it is collapsed, but it looks like this.

For adding post thumbnails, you can just upload an image the way you normally would add images to your posts by clicking above the post panel then copy the image url and paste it in the Value textarea of the custom fields, and set the Name to Thumbnail.

You will need to edit the index.php template of your theme. If you want to show the post excerpt with the thumbnail image on your blog homepage you will need to add the the code to show excerpts and to get and display the custom fields. First find the code the_content(); in your index.php file, and replace it with this.

1	the_excerpt('Read the rest of this entry »');

This will show the post excerpt instead of the whole post.

Below that add this code.

1	echo get_post_meta($post->ID, "Thumbnail", true);

The get_post_meta() function gets the value of the custom field that has the name “Thumbnail”. For more information on the usage of this and other functions that have to do with custom fields, you can find it here on WordPress.org.

You can do this for many other things too besides images. Imagine the possibilities!!

Entire Code

This is the code I used in index template for the new theme I’m making, including the HTML.

1
2
3
4
5
6

the_excerpt('Read the rest of this entry »'); ?>

the_permalink(); ?>">
echo get_post_meta($post->ID, "Thumbnail", true);?>" alt=" the_title(); ?>" title=" the_title(); ?>" />

Here is the CSS I used for styling it.

1
2
3
4
5

.post .excerpt {
width: 325px;
float:left;
padding:0 20px 0 0;
}

With this you should be able to make a nice looking index page complete with excerpts and post thumbnails. If you have any questions let me know.

UPDATE

Here is my updated code which will show a default image if you do no have a post thumbnail defined in your post custom fields.

1
2
3
4
5

$thumbnail = get_post_meta($post->ID, 'thumbnail', true); if ($thumbnail) { ?>
echo get_post_meta($post->ID, "thumbnail", true); ?>" alt=" the_title(); ?>" title=" the_title(); ?>" />
} else { ?>
bloginfo('template_directory'); ?>/default.jpg" alt=" the_title(); ?>" title=" the_title(); ?>" />
} ?>

You can also learn how to set up category thumbnails and how to show them as your post thumbnails instead from a post I wrote on New2WP.com here as well.

A Fresh New WordPress Theme Design By Tweeaks

jaredwilli — Sat, 09 Jan 2010 08:09:55 +0000

This is a new project I am working on, and it’s about time too! I have been meaning to start making WordPress custom themes and designs for a while now, and never had the time to with all the other things I have going on. I had a reason to do it this time, and was motivated to make it the best I could, but within some requirements.

The site I am designing this for is New2WP.com, which is owned by my friend Antonio, a Web Developer and WordPress guru. We are combining forces to bring this site together. Between my design knowledge and his development knowledge, you can be sure this will be a fantastic combination. If you are interested in learning WordPress and all that it has to offer, or just love awesome websites then subscribe to the RSS feed to stay updated on the launch of the site and all the future news and information we will bring you.

There is just so much you can do using WordPress and it’s very flexible and easy to work with even for people with no knowledge of PHP or blogging software. Most people who have a WordPress blog don’t utilize it to its full capabilities. We want to help change that, and show you that it’s not only simple to do, but that it takes no time at all to do it.

Here is a view of the entire home page design.

Here is the posts page layout

If you have any feedback about this theme please post a comment and tell me what you think. It is my first theme, and definitely not the last.

Don’t forget to check out New2WP.com and see this theme in action once it is live!!

Tweeaks Design » Themes