Oct 11
We have been aware of WordPress’ Post Thumbnail Feature for a while now, but in some cases one is just not enough. This tutorial was inspired by a blog post by David Leggett of Tutorial9.net. This is an advanced tutorial in expanding WordPress’ post thumbnail output with the help of custom fields to add more thumbnails. Although there are plugin alternatives, this is a very quick method for something simple, short and sweet.
Scenario 1
So lets say you have a portfolio page and you want to display a couple of thumbnails, say 4(or more). This is what you can do:
STEP 1
Download this plugin Create a custom field value of Images and in the textarea insert the links to your images. Each link MUST be on a new line.
Before we create an array containing the images, we have to make sure that the linebreaks are properly recognised as at this moment linebreaks are converted to white space when placed within the WordPress custom fields box.
STEP 2
In the WordPress loop place this code:
<?php $images = get_post_meta($post->ID,‘Images’); $images = nl2br($images[0]); $images = explode(‘<br />’,$images); ?>
The code above uses WordPress’ get_post_meta function to retrieve the custom field key. It then converts the linebreaks to html’s <br /> tag using PHP’s nl2br() function. We then create an array with the explode() function using the <br /> tag as the separator of the different lines of data. Using the print_r() php function we can see the array as such:
print_r($images); //Lists the result below /* Array ( [0] => http://localhost/path/to/file/treeinfall.jpg [1] => http://localhost/path/to/file/treecover.jpg [2] => http://localhost/path/to/file/yellowflower.jpg [3] => http://localhost/path/to/file/sunflowers.jpg ) */
STEP 3
We done the main bit, but as you’ve guessed by now, we now have to echo our results. To do that simply add this code below the previous:
foreach($images as $src)
{ echo "<img src=\"".trim($src)."\" />";
}
And that’s pretty much it. The trim() function simply chops off any spaces surrounding the image.
View output.
Scenario 2
So you are sorting out a mini item display linking to your bigcartel store online and you want something simple to display, linking to the main product page. You are intending to display:
- Item Name
- Item Image
- Price
- Link to Main Item Page
STEP 1
Create a couple of custom fields with the key ItemInfo and enter your information in the same order as the bulleted list above.
STEP 2
We can start by simply adding this code to our single.php file:
$items = get_post_meta($post->ID, 'ItemInfo');
Using the print_r() function will echo out the results as follows:
/* Array ( [0] => Treeinfall Photo http://localhost/path/to/uploads/treeinfall.jpg £10.00 This is brilliant Photography. Purchase! [1] => Treecover Photo http://localhost/path/to/uploads/treecover.jpg £8.00 Strong Photography. Purchase Now! [2] => Yellow Flower Photo http://localhost/path/to/uploads/yellowflower.jpg £12.00 Brighten up your day. On Sale!! [3] => Sunflowers http://localhost/path/to/uploads/sunflowers.jpg £10.00 Millions of Sunflowers. All Yours ) */
STEP 3
Like I stated before the linebreaks are masked as spaces, which we will have to convert to linebreaks like the previous function. This time we are going to introduce the list() function, which allows us to assign variable names to our array keys.
foreach($items as $item) {
$item = nl2br($item);
list($name,$src,$price,$desc) = explode('<br />',$item);
echo "<div class=\"item\">";
echo "<h2>$name</h2>";
echo "<img src=\"".trim($src)."\" />";
echo "<br />Price: $price";
echo "<br />Description: $desc";
echo "</div><br />";
}
What we have done is simply used a foreach loop to display our results.
And VOILA!!!
An idea you could utilise is creating some custom write panels that will have these fields displayed already instead of creating them from scratch. It will be more user friendly and easier for the client to utilise.
If this post has helped you, please leave a comment. I will try to answer any questions you may have or problems you experience.
Further Reading:
- http://codex.wordpress.org/Function_Reference/get_post_meta
- http://php.net/manual/en/function.nl2br.php
- http://uk2.php.net/manual/en/function.trim.php
- http://php.net/manual/en/function.list.php
- http://wefunction.com/2008/10/tutorial-creating-custom-write-panels-in-wordpress/
- http://www.tutorial9.net/web-tutorials/add-thumbnails-to-wordpress-with-custom-fields/
27 Comments to “How to Split and Categorize WordPress’ Custom Field values”
Subcribe
Recommended
October 12th, 2010 at 8:49 pm
This. Is. Awesome. I’ll be implementing it on my site in a moment to provide attribution for CC licensed images. Thank you so very much for providing me with an array example!
October 12th, 2010 at 8:53 pm
you’re welcome Julie
October 14th, 2010 at 3:45 am
[...] from: How to Split and Categorize WordPress’ Custom Field values [...]
October 16th, 2010 at 4:27 pm
It took a little bit of doing, but here’s what I did to my custom functions page. I added an if/else to check that I actually had the custom field filled in. Also, the insertion is a bit different because I use the Thesis theme but that’s easily changed.
function images_sources() {global $post;
$sources = get_post_meta($post->ID, 'ImageSource');
if($sources[0]=="") {
echo '<!-- no image sources to list, show nothing-->';
}
else {
echo 'Image credit(s): ';
foreach($sources as $source) {
$source = nl2br($source);
list($name,$src) = explode('',$source);
echo '<a href="' .$src. '" rel="nofollow">' .$name. '</a> | ';
}
echo '';
}
}
add_action('thesis_hook_after_post','images_sources');
I also did another one to list any link parties my tutorials are listed in.
Again, thank you for the array break-apart. I really wanted to do this but didn’t know how.
October 16th, 2010 at 5:05 pm
@Julie
nice work. Glad it helped.
October 19th, 2010 at 12:49 pm
[...] How to Split and Categorize WordPress’ Custom Field values [...]
October 21st, 2010 at 7:43 pm
Nice work. I was faced with a project last month were I needed to store an array of values in a custom field. I ended up using pipes “|” and PHP’s explode() function. I like your solution better.
October 21st, 2010 at 11:34 pm
@Brian
Thanks. You can use this to handle your array values now
October 22nd, 2010 at 12:20 am
Can i make it work with wp_list_pages for subtitles to the pages?
eg:
start about contact
homepage my story keep in touch
“start” is the page and the “homepage” is the subtitle.
October 22nd, 2010 at 12:39 am
@schiwe
If you’re referring to controlling the way that subtitle pages are listed, then probably not. But if you’re thinking of doing something manually with custom fields, similar to the scenarios I’ve introduced, this might help.
October 22nd, 2010 at 12:10 pm
[...] is the original post: How to Split and Categorize WordPress’ Custom Field values « graphicbeacon Tags: custom-field, php, [...]
October 22nd, 2010 at 12:42 pm
In your second scenario do you not have to pass ‘true’ as a third parameter to the get_post_meta function to get all the ItemInfo custom fields as an array? Thanks.
October 22nd, 2010 at 12:44 pm
Actuallly I think it should be ‘false’ but you get the question I think!
October 22nd, 2010 at 1:24 pm
@graphicbeacon
Thanks, I’ll give it a try…
October 22nd, 2010 at 4:37 pm
@Mark Roberts
the default is ‘false’ so i don’t need to set that parameter.
October 22nd, 2010 at 4:46 pm
The nl2br() conversion to then explode on br tags seems redundant. Just explode on new lines (which would be the nl in nl2br):
explode( "\n", $content ).October 22nd, 2010 at 4:52 pm
@Andrew Nacin
The nl2br() conversion is not redundant, because the new lines ‘\n’ is converted to spaces and not processed as desired. In other terms that does not work because I have tried doing that at first before using the nl2br() conversion.
The nl2br() solves this. Check out the ‘Examples’ panel on this page
October 22nd, 2010 at 6:30 pm
In the second example, these display in the order that the custom fields were created, correct? Am I right in concluding these examples do not allow reordering the order of “iteminfo” groups?
October 22nd, 2010 at 10:39 pm
I usually don’t post in Blogs but your blog forced me to, amazing work.. beautiful!
October 23rd, 2010 at 9:33 am
@Ray Gulick
Reordering is a simple matter of swapping the values between the custom field boxes.
If you can find a plugin that allows a jQuery style reordering of custom fields, then you can do this easily.
October 24th, 2010 at 11:36 am
@Andrew Nacin
The nl2br is a fine workaround for “\n” vs. “\r\n”, it simply does them both.
@Julie
For other who read that snippet, be sure to note that the blog-comments processor took out the
inexplode('',$source). Be sure to put it back in like:explode('',$source)/me hopes it wont be taken out of his comment
October 24th, 2010 at 11:37 am
the “<br />” that is…
October 26th, 2010 at 12:12 pm
As a Newbie, I am always searching online for articles that can help me. Thank you
October 26th, 2010 at 6:28 pm
It was very interesting for me to read the blog. Thank you for it. I like such topics and anything connected to them. I definitely want to read a bit more soon. BTW, pretty good design your site has, but how about changing it every few months?
November 14th, 2010 at 8:02 am
Give thanks to you for such a educational weblog. Where else could one get this kind of details composed in such a fantastic way? I have a presentation that I am currently working on, and I have been on the look out for such info.
November 15th, 2010 at 3:01 am
[...] Direct Link to Article — Permalink on DiWLike the article? Get the book! [...]
November 20th, 2010 at 11:23 am
[...] Read the original: How to Split and Categorize WordPress’ Custom Field values – graphicbeacon [...]