WordPress Tip: 3 Awesome Custom Field Tricks
Here are 3 awesome ways to use WordPress’s custom fields.
FYI: If you want an easy way to include default custom fields into your Write panel, try Rhymed Code’s Custom Field GUI. If you have trouble with the download on his site, check out this comment for the fix.
1. A Custom Read More
Bryan Veloso’s new Avalonstar design is a true work of art. While looking around the new site I saw that he has custom “Read More” messages. I thought this would be cool to have it change on a per-post basis, so I found a quick way to do this using custom fields in WordPress (Bryan uses Django, not WordPress).
<?php $custommore = get_post_meta($post->ID, 'custom_more', true); ?>
<?php if (!$custommore) { $custommore = 'Read More »'; } ?>
<?php the_content($custommore); ?>All you need to do is replace your usual the_content template tag with this code. Then when you write a post, create a new custom field with the key of custom_more.
2. Awesome Thumbnailed Recent Posts
Gizmodo has a very cool feature within their header that shows their recent posts that can be replicated in WordPress using custom fields.
First, create a thumbnail for each of your last 5 posts (and every subsequent post going forward). Upload it and then paste it’s location into a new custom field with a key called post_thumbnail.
Next, create a new Loop somewhere in one of your template files that pulls this thumbnail in and displays it in an unordered list. Something like this:
<ul class="thumb_recent" >
<?php query_posts('showposts=5'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $thumbnail = get_post_meta($post->ID, 'post_thumbnail', true); ?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php echo $thumbnail; ?>" alt="<?php the_title(); ?>" />
<span><?php the_title(); ?></span></a>
</li>
<?php endwhile; endif; ?>
</ul>;This example also requires a little bit of CSS to make it look right, so add this to your stylesheet and you’ll be all set!
View the Awesome Thumbnailed Recent Posts Example
ul.thumb_recent {
list-style:none;
margin:30px 0 0 0;
padding:0;
}
ul.thumb_recent li {
float:left;
margin:0 5px 0 0;
position:relative;
}
ul.thumb_recent li img {border:3px solid #7BA2C7;}
ul.thumb_recent li a:hover img {border:3px solid #666;}
ul.thumb_recent li span {
text-decoration:none;
display:none;
text-align:left;
position:absolute;
top:-15px;
left:0px;
width:400px;
color:#666;
text-transform:uppercase;
font-family:arial;
font-size:11px;
}
ul.thumb_recent li a:hover span {display:block;}3. Post Specific CSS Overrides
A Brief Message definitely has a unique look and feel to it. Each page has subtle differences that are done by including a unique stylesheet for each post. WordPress can offer the same type of flexibility by using a custom form to create an internal style sheet for each post.
Firstly, create a custom field called post-css. For its value, paste your new CSS. Here is an extremely simple example:
body { background:#333333 !important; }Note the !important. Some have argued that it is not necessary, but I feel that it is better to be safe than sorry in this case. The fact is that if the new CSS is declared below the one you are trying to overwrite in the same document, the last declared value should always take precedence.
The next step is to insert that custom field CSS into the header.php file. In that template file, find the line that declares your CSS stylesheet, and paste this code below it.
<?php if (is_single()) { ?>
<?php while (have_posts()) : the_post(); ?>
<?php $newcss = get_post_meta($post->ID, 'post-css', true); ?>
<style type="text/css">
<?php echo $newcss; ?>
</style>
<?php endwhile; ?>
<?php rewind_posts(); ?>
<?php } ?>
May 16th, 2008 @ 11:34 am
This post is awesome! I’ve been looking for a way to make a Thumbnailed Recent Posts list like this. I tried it out on my site, but in firefox, when you mouse over the thumbnails, they move a little. Any advice on what may be causing this?
You can see it under the post on my homepage here http://www.justastupidgirl.com/
Its been driving me bonkers, I’d really appreciate any thoughts you may have.
May 17th, 2008 @ 2:51 pm
I am really glad it helped!!
if I had my guess, it would be that you specified a padding or margin in a different part of the CSS. My best bet would be that it is this in your style.css:
May 17th, 2008 @ 5:33 pm
hrmmm no luck. i deleted that entry. didnt work. then i deleted all the contents of the two stylesheets that control my theme, except for the thumbnail list styles, and it still shifts. replaced my alterations with your exact css, still does it. maybe its styles from a plugin i have. i know its something on my end, because your demo behaves perfectly for me.
my issue is only in firefox, so im trying to think of a firefox specific issue…..
i dont know. ive taken enough of your time anyways, thanks for looking at it. im so glad to have found this article!
May 17th, 2008 @ 6:49 pm
@Brooke – I do see you have a lot of plugins that place stylesheets on your site. If you find it is a particular plugin, let me know – it may end up being something I need to change on my end…
Thanks!
May 18th, 2008 @ 12:11 pm
It was a plugin
http://guff.szub.net/2006/04/12/welcome-visitor/
its what i used to display the three category image at the top of my index page(technology, fun, politics). when i remove the php for it in the index file, my thumbnail list works like it should. strange.
May 18th, 2008 @ 12:25 pm
ok, i fixed it by putting the php for the plugin in a different spot. i dont know what the problem was, but i fixed it for now! thanks! you can delete my useless comments if you want! ;)
August 25th, 2008 @ 5:33 am
RE: Tip #3 –
This works great for my posts, but could the HEADER code be modified to account for pages as well?
August 25th, 2008 @ 5:36 am
@Shawn – Sure, all you need to do is remove the first and last line of the code — that is the if statement to check to see if it is a post or not. I fyou remove that check, it will work for any post or page.
August 27th, 2008 @ 11:23 am
No good. I get a parsing error. Here’s my edit:
ID, 'post-css', true); ?>
October 2nd, 2008 @ 12:15 pm
[...] WordPress Tip: 3 Awesome Custom Field Tricks [...]
October 24th, 2008 @ 6:06 am
Hi, this is a great post! But that Gizmodo thing is not showing their recent posts, but it’s showing their “Top of the week” posts. Do you know how to do it? I’ve searching around for a while for this solution but still no luck on it.
I believe a lot of guy like me are thirsty of this solution because it’s so cool. Showing thumbnail image (either by getting the first image of the post or through getting data from wordpress custom field) of Top Posts and Related Posts will become a great feature for each site/blog.
I believe too, if you can make a post about the detail tutorial about it, your post will hit a big wave and your will get a tsunami of traffic. well, if you have a change to make that kind of great code or “plugin”, I will absolutely bring it to the front page of digg and stumble upon. ;)
October 26th, 2008 @ 12:10 pm
Thanks Charles.
I probably could do it – but I am not sure right now off the top of my head. I guess we could maybe combine this with something like I have in the post WordPress Tip: The Easy Way to Show a Popular Post List — just use a new category called “TopPosts” and limit it to only posts in the last week or so.
October 27th, 2008 @ 1:57 am
Thanks for your reply, Chris.
That’s is one solution, but manual type of solution. What I was searching is a automatic solution.
The post you refer to is about the same type of featuring a post as the hot stuff. But require us to meddle within the category thingy to make it work.
things like, for example: technabob.com single permalink view. You’ll see a list of related posts with image below their comment box. At first, I thought it’s a random post listing. But later I found they really related to the current post (if the post if about ps3, the related is all about sony and ps stuff).
More example: Gizmodo or Slipperybrick.com sidebar popular post listing. slipperybrick.com even have their own popular page with the listing of the current month popular stuff.
Well, I’ve search for this solution long time ago. I know there is somebody who can do it (like hiring a coder to code it out), but it’s not something a small business owner could afford it! and the maintenance fee is also something pretty headache if you find some incompatibility thingy….
November 10th, 2008 @ 10:20 pm
[...] WordPressGarage.com Cagintranet Web Design [...]
January 20th, 2009 @ 10:13 pm
Thanks a lot, the recent posts thumbs is JUST what I was looking for ! thanks for sharing !!
February 19th, 2009 @ 12:33 pm
@ Dgold, there is a plugin that is purely custom fields and creates a custom field check box for multiple values on a single key. “Custom Field Template” by Hiroaki Miyashita… even has your fruit example in the default template.
I have a separate question that has stumped me for a longtime. I am wondering if i can use the custom fields for static pages (not posts) and then return the fields in a newly-created static page. For example, i’ve created 10 static pages, one for each type of surfboard. The keys are builder, color, type, etc. Now, I’d like to return all 10 pages in a table of contents page. How would i do this since this is outside the loop as i understand it? Sample code to drop into me index.php file would be awesome.
Thank you!!
April 1st, 2009 @ 4:04 am
Hi,
Thanks for the tips!!!!
Can the tip #3 be modifed to include category?
Say category id 3 should be different and all articles in it with same style?
Thank you!
May 1st, 2009 @ 2:48 pm
How would you make tip three work for pages?
May 6th, 2009 @ 1:11 pm
Nice post – well written and really helpful. I gotta love those Custom Fields, very useful!
May 13th, 2009 @ 7:42 am
[...] WordPress Tip: 3 Awesome Custom Field Tricks [...]
June 19th, 2009 @ 2:36 am
[...] to Chris Cagle for this very usefull trick! If you enjoyed this article, please consider sharing it! [...]
July 6th, 2009 @ 10:32 am
[...] Allright, you’re done. Now, if you create a custom field named custom_more, its value will be displayed instead of the classic “Read more” link. Source : http://www.cagintranet.com/archive/wordpress-tip-3-awesome-custom-field-tricks/ [...]
July 20th, 2009 @ 9:30 pm
[...] Cagintranet has 3 custom field tricks that operate per post: custom read more tags, thumbnails of related posts and post-specific css overrides. [...]
August 12th, 2009 @ 9:17 am
[...] Custom ‘Read More’ and Thumbnailed Recent Posts [...]
August 22nd, 2009 @ 5:03 am
The Awesome Thumbnailed Recent Posts plugin looks great, but is there a way to create thumbnails automatically?
August 26th, 2009 @ 8:57 am
[...] Source: A Custom Read More [...]
August 30th, 2009 @ 1:47 am
[...] 16. 3 Awesome Custom Field Tricks [...]
September 30th, 2009 @ 10:59 pm
Awesome.. post..
maybe the recent post thumbnail cropped using YARPP plugin… instead stretch the images….
TQ for the this …
October 17th, 2009 @ 1:16 pm
Hi,
I have just added #2 to my site, but now whenever I click on a link, category etc, only the latest post shows on my site?
October 23rd, 2009 @ 7:33 am
Hmm…thumbnailed recent posts. Sounds like an awesome idea I could use for my blog. Thanks for the heads up!
December 24th, 2009 @ 12:12 pm
[...] to Chris Cagle for this awesome [...]
December 29th, 2009 @ 11:21 am
[...] From Cagintranet Web Design [...]
January 15th, 2010 @ 12:19 pm
[...] <?php $readmore = get_post_meta($post->ID, 'readmore', true); ?> <?php if (!$readmore) { $readmore = 'Read More »'; } ?> <?php the_content($readmore); ?> Source [...]
July 13th, 2010 @ 5:54 am
Love the post specific CSS tutorial – this is going to be really handy. Thanks!
October 18th, 2010 @ 12:21 am
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/
November 23rd, 2010 @ 4:30 pm
Your post helped me to show download icon on marked posts. single.php was slightly modified and info is shown.
Thank you!
January 6th, 2011 @ 3:45 am
Awesome Thumbnailed Recent Posts – is one of my fav tute, thanks. I tried to tweek the script you provided above and messed with that, hehehe.. am not great scripter as you are….thanks anyways :)