WordPress and the custom fields, a overlooked feature

2007-09-25 13:34 | Categories » English, Webb, Wordpress,

Wordpress logoI’ve been using WordPress for about two years and I really like the possibilities with the system. This site is built from scratch, and my theme has gotten a few small upgrades over the years. The AJAX search, custom RSS feeds and so on. It is very common that WordPress users get stuck in the ”plugin hell”. They want a feature, but since they can’t find a suitable plugin for WordPress they just ignore the need.

Sure, plugins sure make the customization of WordPress easier, but many things can easily be fixed with one row of PHP. The thumbnails I have in the article listing are a solution of that kind.

I am talking if the custom fields in WordPress, sadly often overlooked.

In my WordPress install I have created a custom field for the thumbnail picture, let’s say it is called ”thumbnail”. For all posts where I wish to use a custom thumbnail I just enter the path to the desired thumbnail image in my custom field. The path is obtained from the WordPress edit-pane for the image; the part that I use is ”/wp-content/uploads/2008/08/image.gif”. I know that it is possible to make the script to only need the filename, but that will require some extra code.

In the article listing (or wherever I wish to use it) I just use the following row of PHP:

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

That will print the value from that posts custom field named ”thumbnail”. I combine that with some more code to get a valid img-tag:

<?php if(get_post_meta($post->ID, "thumbnail", true)) {
$size = getimagesize($_SERVER["DOCUMENT_ROOT"].get_post_meta($post->ID, "thumbnail", true)); ?>
<img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" />
<?php } ?>

So, what does the code do? The if-statement checks if the thumbnail custom field has a value at all. If so the size variable gets initiated with the array from the getimagesize function. Then the img tag is printed, filled with the path to the image and gets the width and height values from the size array we initiated earlier.

The custom fields really are a very powerful feature of WordPress. Use your Imagination, think outside the box! You can use it for metadata related to the post, you can manage different language versions of the same post and so on.

If you have any questions or want to contribute in some way, use the comment form.

Digg it if you like it! =)

Don’t miss the other english articles.

Gravatar
|
Add extra features to your Wordpress blog with custom fields « Blogs — 2007-10-31 01:22

[...] read more | digg story [...]

Gravatar
|
FeralPundit — 2007-11-24 20:23

Sounds like a good idea

Gravatar
|
Wolly’s Delicious » Blog Archive » links for 2007-11-26 — 2007-11-26 01:39

[...] WordPress and the custom fields, a overlooked feature that (tags: wordpress thumbnail) [...]

Gravatar
|
Link notes del 4 2 2008 » Sapientone — 2008-02-05 01:31

[...] WordPress and the custom fields, a overlooked feature – [...]

Gravatar
|
Ryan — 2008-02-06 02:11

Excellent. Thanks for the tips.

This worked perfectly for me :)

Gravatar
|
Kristoffer — 2008-02-06 13:24

Ryan: You’re welcome! :)

I’m glad it helped you!

Gravatar
|
Sean — 2008-02-08 00:12

Is there any way to associate thumbnails with the NEXT and PREVIOUS links in posts? I’m using:

<?php previous_post_link(‘PREVIOUS EPISODE: %link’) ?>

<?php next_post_link(‘NEXT EPISODE: %link’) ?>

but can’t figure out how to include the corresponding thumbnail with each link.

Gravatar
|
Charles — 2008-02-19 19:08

Do you know how to make the custom field.. say an image.. show up in the RSS feed? I am using custom fields for thumbnails but I don’t know how to make the custom thumbnails appear in the RSS feeds!

Thanks so much!

Charles

Gravatar
|
Kristoffer — 2008-02-19 21:04

Charles: I guess that the quickest way is to edit the php files that serves the feeds. They can be found in the folder wp-includes.

  • feed-atom.php
  • feed-rss.php
  • feed-rss2.php
  • feed-rdf.php

The part you should edit is the one where summary/description is printed out. If you need more help, don’t hesitate to use my contact form.

Gravatar
|
63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats | Speckyboy - Wordpress and Design — 2008-03-09 08:13

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
Krissy — 2008-03-13 04:05

I’m going to use this technique on an upcoming magazine site. I’m wondering if there’s a way to alter the PHP code so that you can direct link an image from another site? I’m attempting to link the image from another domain of mine and it’s giving me an error message stating that it didn’t come out of ”document root” even though the image itself actually displayed.

What would you suggest as a fix?

I know direct-linking is bad, trust me. But I don’t consider it wrong when you’re linking off of another domain that you own – heh.

Gravatar
|
63 essenziali Wordpress Hacks, Tutorials, Help Files e Cheats : technorati.it — 2008-03-13 08:41

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
Wordpress Tutorials/Hacks « The house of software freeware — 2008-03-13 09:52

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats | Speckyboy - Wordpress and Design » 쟈스민(JASMIN) — 2008-03-23 15:43

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
Tim — 2008-04-12 23:14

Great article thank you. I used your tips to add functionality in my plugin that thumbnails from images attached to a post (by passing the custom field) to now allow users to define an alternative image using a custom field in the way you describe. Thanks again

Gravatar
|
155 Wordpress Resources, Tutorials, Plugins, Themes, AJAX, Podcasting…WP Monster List | Speckyboy - Wordpress and Design — 2008-04-27 18:50

[...] Menu (Pop-Up). 107. How to Protect CSS Mods for ANY WordPress Theme. 108. WP Contact Manager. 109. WordPress and the custom fields, a overlooked feature. 110. DiggProof your WordPress. 111. WordPress Ajax Commenting revisited. 112. Widgetizing Themes. [...]

Gravatar
|
155个 WordPress 资源、指导、插件、主题、AJAX、播客…… —— WP 详细清单(译) | 晴天里的一道光 — 2008-05-16 11:29

[...] Menu (Pop-Up) 107. How to Protect CSS Mods for ANY WordPress Theme 108. WP Contact Manager 109. WordPress and the custom fields, a overlooked feature 110. DiggProof your WordPress 111. WordPress Ajax Commenting revisited 112. Widgetizing Themes [...]

Gravatar
|
155个 WordPress 资源、指导、插件、主题、AJAX、播客…… —— WP 详细清单 | Awesomer — 2008-06-06 13:39

[...] Hover Menu (Pop-Up)107. How to Protect CSS Mods for ANY WordPress Theme108. WP Contact Manager109. WordPress and the custom fields, a overlooked feature110. DiggProof your WordPress111. WordPress Ajax Commenting revisited112. Widgetizing Themes [...]

Gravatar
|
jean — 2008-06-27 20:15

Great site, and thanks for posting this tutorial. I just have one question – when you say that you paste the code in the ‘article listing’, do you mean that you paste it in the page.php file?

Gravatar
|
IndoProTech.com — 2008-07-07 08:27

[...] 40. WordPress and the Custom Fields, an Overlooked Feature [...]

Gravatar
|
elbandito.us » Blog Archive » Tutoriale si hack-uri pentru wordpress ( lista mare ) — 2008-07-11 15:33

[...] WordPress and the custom fields, a overlooked feature ( Sursa: Gate [...]

Gravatar
|
63 correções, tutoriais, arquivos de ajuda e dicas essenciais para Wordpress | Rafael Bernard Araújo — 2008-07-12 04:32

[...] Visão sobre campos personalizados do WordPress (Fonte: Gate [...]

Gravatar
|
摩摩诘 — 2008-07-28 09:13

Very useful tip,I’ll have a shoot.I also wonder how i can make the thumbnail associated with specific categories automatically without editing the custom field everytime.Is there any plugin or tricks for that?

Gravatar
|
boilr — 2008-09-09 20:13

this is very helpful. is there anyway to incorporate the custom image variable into a sidebar recent posts list? in other words, can you show the 10 most recent post titles with a custom image in front of it on the sidebar?

thanks in advance!

Gravatar
|
Popular Post - Image - DIY Themes Forums — 2008-09-11 12:13

[...] if I use WordPress custom field as suggested in this article – WordPress and the custom fields, a overlooked feature will I achive what I want? How? __________________ Satish Talim [...]

Gravatar
|
Wordpress ile ilgili 155 kaynak « YEAH28 - Her Şey Sizin İçin — 2008-09-20 09:36

[...] Menu (Pop-Up). 107. How to Protect CSS Mods for ANY WordPress Theme. 108. WP Contact Manager. 109. WordPress and the custom fields, a overlooked feature. 110. DiggProof your WordPress. 111. WordPress Ajax Commenting revisited. 112. Widgetizing Themes. [...]

Gravatar
|
Webinfotain — 2008-10-14 22:53

Do you know how to add thumbnail images to my wordpress articles from import rss feed with images? Please check http://www.webinfotain.com/
As you will find that the RSS feeds from other sites have images but its not appearing in thumbnail boxes. Please help me out.
Thanks
Kingshuk

Gravatar
|
Wordpress ile ilgili 155 kaynak : ZDaYLaN.CoM — 2008-10-23 18:05

[...] (Pop-Up). 107. How to Protect CSS Mods for ANY WordPress Theme. 108. WP Contact Manager. 109. Wordpress and the custom fields, a overlooked feature. 110. DiggProof your WordPress. 111. WordPress Ajax Commenting revisited. 112. Widgetizing [...]

Gravatar
|
Jon — 2008-10-25 22:43

This is great, and so easy! Thanks for the tip.

Gravatar
|
Wordpress ile ilgili 155 kaynak | — 2008-10-30 06:08

[...] Menu (Pop-Up). 107. How to Protect CSS Mods for ANY WordPress Theme. 108. WP Contact Manager. 109. WordPress and the custom fields, a overlooked feature. 110. DiggProof your WordPress. 111. WordPress Ajax Commenting revisited. 112. Widgetizing Themes. [...]

Gravatar
|
155 Wordpress Resources, Tutorials, Plugins, Themes, AJAX, Podcasting…WP Monster List | Kênh Thông Tin Chuyên Nghệp — 2008-10-30 07:44

[...] Menu (Pop-Up). 107. How to Protect CSS Mods for ANY WordPress Theme. 108. WP Contact Manager. 109. WordPress and the custom fields, a overlooked feature. 110. DiggProof your WordPress. 111. WordPress Ajax Commenting revisited. 112. Widgetizing Themes. [...]

Gravatar
|
20 hacks para Wordpress simplesmente fantásticos | Wordpress Themes — 2008-10-30 23:19

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
Albert — 2008-11-10 14:30

Kristoffer,

It’s possible to show an image custom field into my RSS feed using your technique??

Thanks in advance!!

Gravatar
|
Alex — 2008-11-14 21:05

Hello ,

Can you please explain me how to : manage different language versions
of the same post ?what I have to put in the custom fiels
I m a newbie !!!.

Many Thanks ,

Alex

Gravatar
|
Ben — 2009-01-07 15:43

Great article – thanks

Gravatar
|
JohnieO — 2009-01-13 21:11

hello all,

i am setting up a classfieds type site in wordpress, and i want to have the author who posted an ad. Be able to come back to the site once item is sold and mark it as sold or still for sale.

I also want to be able to have another custom field for authors to put in there asking price for the item being posted for sale.

would custom fields achieve this?

I have no idea how to make it work for my needs.

Anyone able to help?

Gravatar
|
Wordpress Hacks Guide | CSS Experiments — 2009-01-28 21:51

[...] 19. Wordpress and the custom fields, a overlooked feature (Source: Gate 303) [...]

Gravatar
|
Images, thumbnails and custom fields in WordPress | Wordpress Garage — 2009-02-09 16:06

[...] 303 also explains how he used custom fields to add thumbnails to his posts. Check out his blog (or Blogg as he calls it) homepage to see how nice it looks – he has [...]

Gravatar
|
Wordpress ile ilgili 155 kaynak : Spaksu Blog — 2009-02-17 19:16

[...] Menu (Pop-Up). 107. How to Protect CSS Mods for ANY WordPress Theme. 108. WP Contact Manager. 109. WordPress and the custom fields, a overlooked feature. 110. DiggProof your WordPress. 111. WordPress Ajax Commenting revisited. 112. Widgetizing Themes. [...]

Gravatar
|
John Nasta » Blog Archive » Wordpress tips & tutorials — 2009-02-17 21:47

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
Good Php Developer — 2009-03-21 06:53

This is great, and so easy!

Gravatar
|
Good Php Developer — 2009-03-21 06:55

thanks for this tutorial

Gravatar
|
Robin — 2009-06-17 05:24

Kristoffer,

Where exactly do I put the coding. Have looked at your site and was wondering how you use thumbnails on main page listings and full pictures in your post.

I’m new to wordpress and really want to learn this stuff.

Many thanks,

Robin

Gravatar
|
155 Wordpress Resources, Tutorials, Plugins, Themes, AJAX, Podcasting, WP Monster List | Sayagi Project* — 2009-06-22 09:46

[...] Menu (Pop-Up). 107. How to Protect CSS Mods for ANY WordPress Theme. 108. WP Contact Manager. 109. WordPress and the custom fields, a overlooked feature. 110. DiggProof your WordPress. 111. WordPress Ajax Commenting revisited. 112. Widgetizing Themes. [...]

Gravatar
|
Student’s Home » Blog Archive » 63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats — 2009-08-09 06:57

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
Elaine- — 2009-08-17 06:04

i figured out how to put the url to the thumbnail in a custom field, but i have no idea where to put that line of php to make some kind of gallery page work!!! i’m sorry i don’t know much, but could you help me?

Gravatar
|
WordPress Tips and Tricks | WordPress eCommerce — 2009-08-29 05:43

[...] Read More [...]

Gravatar
|
155个最好的Wordpress资源、教程、插件、主题、AJAX技术、播客。。收集 | Fation小网虫 — 2009-09-06 16:23

[...] Menu (Pop-Up). 107. How to Protect CSS Mods for ANY WordPress Theme. 108. WP Contact Manager. 109. WordPress and the custom fields, a overlooked feature. 110. DiggProof your WordPress. 111. WordPress Ajax Commenting revisited. 112. Widgetizing Themes. [...]

Gravatar
|
shoaib — 2010-01-10 02:54

thus is really helpful,thnx

Gravatar
|
WBCOM by vapvarun » wordpress » Wordpress Tutorials/Hacks — 2010-01-14 19:16

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats « MalarVizhi — 2010-05-13 07:18

[...] WordPress and the custom fields, a overlooked feature (Source: Gate [...]

Gravatar
|
WordPressハッカーズ — 2010-05-28 10:44

WordPress and the custom fields, a overlooked feature…

この記事は以下サイトで紹介されています。 WordPressハッカーズ…

Gravatar
|
lassegw — 2010-08-25 22:21

Jag inventerar gammal kommentarspam.

Gravatar
|
63 Essential WordPress Hacks, Tutorials, Help Files and Cheats : Lake of Web — 2011-09-04 23:38

[...] 19. WordPress and the custom fields, a overlooked feature (Source: Gate 303) [...]

Leave a comment


Regler för kommentarer på Gate 303

Creeper MediaCreeper