I’m sure you’ve seen the front page of this site ( click here if not ) so you’ve seen how we display images along with our posts. This theme was originally designed by Darren Hoyt so firstly I’d like to recognise his efforts and show you how a stripped down version can be created.
Let’s say we want to build the same module that displays the latest post from our ‘General’ category.
First things first we need to create the PHP that will call for the information we need:
These two lines call query the database for the latest post in category 1 (in our case that’s General). The second line starts the loop that will run until all data asked for have been displayed.
This line ends the loop:
We could build in a small error message, but it won’t be needed in this case as we can be sure we’ll always have a post in this category.
Building the Module
The PHP calls you’ll need are below along with a brief explanation;
-
<a href="http://www.designprophet.co.uk/wp-admin/%3C?php%20the_permalink%28%29%20?%3E" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="http://www.designprophet.co.uk/wp-admin/%3C?php%20echo%20get_option%28%27home%27%29;%20?%3E/wp-content/themes/your-theme/images/%3C?php%3Cbr%20/%3E$values%20=%20get_post_custom_values%28" />" alt="" id="leadpic" /></a>
-
This chunk of code calls for the story image to be displayed next to the text and makes it a link to the post. For now all you need to know is the path to the image needs to be changed to the location you’ll be using.
Calling the Post Title
-
<a href="http://www.designprophet.co.uk/wp-admin/%3C?php%20the_permalink%28%29%20?%3E" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"></a>
This line creates a link to the post and uses post title as the text;
Display the Excerpt (either automatic or one defined while posting)
Finally a ‘Read More’ link to take the visitor to the story
-
<a href="http://www.designprophet.co.uk/wp-admin/%3C?php%20the_permalink%28%29%20?%3E" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read More</a>
This is the full code with a small bit of CSS to get you started
-
<p id="”module”">//Display Image
-
-
<a href="http://www.designprophet.co.uk/wp-admin/%3C?php%20the_permalink%28%29%20?%3E" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="http://www.designprophet.co.uk/wp-admin/%3C?php%20echo%20get_option%28%27home%27%29;%20?%3E/wp-content/themes/your-theme/images/%3C?php%20$values%20=%20get_post_custom_values%28" />" alt="" id="leadpic" /></a>
-
-
//Post Title
-
-
<a href="http://www.designprophet.co.uk/wp-admin/%3C?php%20the_permalink%28%29%20?%3E" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"></a>
-
-
//The Excerpt
-
-
// Read More Link
-
-
<a href="http://www.designprophet.co.uk/wp-admin/%3C?php%20the_permalink%28%29%20?%3E" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read More</a>
-
-
//End the Loop
-
-
#module {
-
height: 300px;
-
width: 500px;
-
background: #fff;
-
border: 1px solid #ccc;
-
}
Getting it to Work
When we called the story image we included the following code:
-
‘Image‘ is the Key name we need to give to a new custom field. This can be found below the post editor when making a new post.
-
-
The value should be the filename of the image you wish to use i.e. Myholiday.jpg
-
-
Hopefully you’ve remembered to upload the image to the folder we specified earlier!
-
-
Now all you need to do is post!
-
-
Recap
-
-
Change the image path to the folder you plan to use
-
-
Find the ID of the category you want to use and include it here:
-
-
[code lang="php"]
Create a custom field called Images and specify your image filename in ‘Value’
Post and Enjoy!
November 22nd, 2007 at 6:35 pm
If you’d like to modify this slightly to display the latest post from a handful of categories change this line:
< ?php query_posts(’showposts=1&cat=1′); ?>
To this:
< ?php query_posts(’showposts=1&cat=1, #, #′); ?>
Where # is your category ID.
This will determine if, say, your general category has been posted to last and display that instead of the latest in the other categories.
December 6th, 2007 at 4:24 pm
Hi Tom, this is something I’ve wanted to implement for a very long time. I want to try this out soon. Could you please let me know how I can also apply it to search results - so that thumbnails display for each page within the results (and the same behavior for when someone clicks a tag, and sees the results page)?
Thanks!