Follow kevinlearynet on Twitter!

kevinleary.net

Advanced Content Management with WordPress Custom Field Templates

Custom Field Template Result

Custom Field Template Result

WordPress is great for dynamically managing the content of a website, but sometimes you encounter situations that require advanced management to handle different sections of a single page. It’s would be great if we could manage separate chunks of content with more than one WYSIWYG. Well guess what, you can, and it’s easier than you may think.

View a Demo

The best solution I’ve found for this situation is the Custom Field Template plugin. With this plugin you can add multiple WYSIWYG managed areas to one WordPress page or post. You can even use select boxes, radio buttons, and checkboxes to dynamically control the content of a page. Here’s how:

Setup Your Template

  1. Download and activate Custom Field Template
  2. Go to Settings > Custom Field Template
  3. Customize Your Template. The template I’ll be using in this example is simplified and will give you two added WYSIWYG areas. Notice I’ve set the title to Template Title: Additional Content. This will set the custom field title, similar to the way “Discussion” is the title for pingback and comment options.
Custom "Additional Content" Field Collapsed

Custom Additional Content Field Collapsed

Custom "Additional Content" Field Expanded

Custom Additional Content Field Expanded

Template Code

[Block #1]
type = textarea
rows = 8
tinyMCE = true
 
[Block #2]
type = textarea
rows = 8
tinyMCE = true
custom field template settings 300x212 Advanced Content Management with WordPress Custom Field Templates

Settings > Custom Field Template

Settings > Custom Field Template

Settings > Custom Field Template

Add The getCustomField() Function to Functions.php

Open up your theme’s functions.php file. If you don’t have one, create it. Add the following PHP function to the file.

// Get Custom Field Template Values
function getCustomField($theField) {
	global $post;
	$block = get_post_meta($post->ID, $theField);
	if($block){
		foreach(($block) as $blocks) {
			echo $blocks;
		}
	}
}

Load The Content into Your Theme

Next we need to take the content created by these new fields and add it to our template. To do this we’ll need some basic PHP.

<div id="block-1" class="content-box">
	<h2>Block #1</h2>
	<div class="entry">		
		<?php getCustomField('Block #1'); ?>			
	</div>
</div>
<div id="block-2" class="content-box">
	<h2>Block #2</h2>
	<div class="entry">		
		<?php getCustomField('Block #2'); ?>			
	</div>
</div>

I’ve chosen to use a Custom Template to display these new content blocks only in the Pages I want to. You can easily include these fields on every post, page or both. All you have to do is select an option in the plugin settings page (there’s a small radio button labeled “Post Type:”).

For the purpose of presentation I’ve added some basic styles into the mix. Nothing fancy.

Add Some Basic CSS

/* Disposable Styles */
*.content-box
{
	padding:12px;
	background:#e5e5e5;
	width:281px;
	float:left;
}
*.content-box h2
{
	margin-top:0;
	padding-bottom:6px;
	border-bottom:1px solid #ccc;
}
#local
{
	margin:0 0 0 20px;
	display:inline; /* For IE6 */
}

View a Demo

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

41 Comments ↓

  1. Alex / 5.22.09 / 9:52 AM

    This is fantastic and seems like a pretty straightforward way to extend Wordpress to new levels of customization.

  2. cdawg / 7.27.09 / 9:31 PM

    Great post! Thanks!

    I have something I've been trying to figure out the last few days – I am using TDO Mini Forms to allow users to post from the website. Their post is used as their profile page. I cannot figure out how to link custom fields to post author and retrieve the info on a page template. Any ideas? Any help would be much appreciated! Thanks!

  3. kevinlearynet / 7.27.09 / 11:54 PM

    Hi cdawg, I've heard good things about TDO Mini Forms, but unfortunately have never used it. I'm holding off until Gravity Forms is released which looks like a better alternative in my opinion.

  4. Jonathan D. Baker / 8.10.09 / 6:16 AM

    I appreciate you taking the time to write the tutorial!

    I followed the tutorial verbatim (by copy and pasting) and keep getting this error returned: "Warning: Invalid argument supplied for foreach()". I'm using WP v2.8.3, a Thematic child theme, and the most recent upgrade to the plugin. Ideas?

  5. Jonathan D. Baker / 8.10.09 / 6:19 AM

    Edit: I suppose it does help to actually have some sample text entered into the WYSIWYG before I attempt to view the page. Again though, thanks for the tutorial.

  6. kevinlearynet / 8.10.09 / 12:11 PM

    Hey Jonathan,

    Nice to hear your using Thematic, how do you like it?

    I haven't used the Custom Field Template with 2.8 yet, I'll upgrade the install used for the demo and check it out for you. It looks like the documentation recommends using Shortcodes:

    http://wordpress.org/extend/plugins/custom-field-...

    But that isn't always Ideal. Expect a post back this with with a better answer.

  7. Jonathan D. Baker / 8.10.09 / 2:48 PM

    Thematic has been great so far – the forums are resourceful and the community appears healthy so far. Out-of-the-box the theme is incredibly powerful, and as a first-time child theme developer I haven't had any problem using filters or action hooks to sculpt it to my liking.

    I suppose I should have clarified a little more in my second comment – the problem was being caused by having the PHP and Custom Fields Template #? setup, but not having any actual content inserted just yet. Rather simple, but I can see situations where it may be advantageous to already have the code in place for a user to insert content in the future, when they are ready. Wishful thinking?

  8. 6 Ways To Create Custom Write Panels in WordPress | kevinleary.net / 8.13.09 / 4:08 PM

    [...] your interested in how you can setup the Custom Field Template on your site, check out my Advanced Content Management with WordPress Custom Field Templates tutorial [...]

  9. @egordin / 9.19.09 / 11:22 PM

    Thanks for the great tutorial kevin! I'm having trouble because the custom fields I'm using for my posts aren't showing up in my RSS feed. Do you know how to fix that?

    Thanks!

  10. kevinlearynet / 9.20.09 / 1:06 AM

    Hey egordin,

    I've found a two things I think you should checkout. One is a plugin by Justin Tadlock called Custom Fields For Feeds: WordPress Plugin. That may be helpful to you.

    Another is an addition that can be made to the WordPress core (/wp-includes/). Originally it was posted by ericc in the WordPress support forums:

    http://wordpress.org/support/topic/241387

    Without an existing plug-in that works for you, modifying the wp-includes/feed-rss2.php is not that big a deal. Add something like:

    <pre lang="php">
    <nww:source>
    <?php
    if (get_post_custom_values('Source')) :
    foreach (get_post_custom_values('Source') as $sourcename) {
    echo $sourcename; }
    else :
    echo '~';
    endif;
    ?>
    </nww:source>
    </pre>

    Note that in this case, I know that I will always have only one value, but if you have more, I think you need to put the enclosing custom tags <nww:source>…</nww:source> inside the foreach loop to enclose each value separately (then you could dispense with the "else" statement, too. "Source" in this example is, of course, my custom field.

    As far as I know, rss readers will generally ignore this tag. I added it for a newsletter, for which the xml parser does in fact read it (and for which reason I put in a "~" instead of not writing the tag if the custom field doesn't exist — because the newsletter expects it).

    Since this is creating a nonstandard rss tag, you also have to provide a the namespace file (for "nww" in this case) in the <rss> code near the top:

  11. kevinlearynet / 9.20.09 / 1:08 AM

    Hey egordin,

    I've found a two things I think you should checkout. One is a plugin by Justin Tadlock called Custom Fields For Feeds: WordPress Plugin. That may be helpful to you.

    Another is an addition that can be made to the WordPress core (/wp-includes/). Originally it was posted by ericc in the WordPress support forums.

    Without an existing plug-in that works for you, modifying the wp-includes/feed-rss2.php is not that big a deal. Add something like:

    <nww:source>
    <?php
    if (get_post_custom_values('Source')) :
    foreach (get_post_custom_values('Source') as $sourcename) {
    echo $sourcename; }
    else :
    echo '~';
    endif;
    ?>
    </nww:source>

    Note that in this case, I know that I will always have only one value, but if you have more, I think you need to put the enclosing custom tags <nww:source>…</nww:source> inside the foreach loop to enclose each value separately (then you could dispense with the "else" statement, too. "Source" in this example is, of course, my custom field.

    As far as I know, rss readers will generally ignore this tag. I added it for a newsletter, for which the xml parser does in fact read it (and for which reason I put in a "~" instead of not writing the tag if the custom field doesn't exist — because the newsletter expects it).

    Since this is creating a nonstandard rss tag, you also have to provide a the namespace file (for "nww" in this case) in the <rss> code near the top:

    xmlns:nww="http://www.thedomain.org/namespace.php"

  12. Steve / 9.23.09 / 1:14 PM

    Hi Kevin,

    Good work and I know I am just an inch away from getting this right, from your notes above;

    "I’ve chosen to use a Custom Template to display these new content blocks only in the Pages I want to. You can easily include these fields on every post, page or both."

    that's what I would like to do but I am struggling to associate a page templates to Custom Field Templates, I can't seem to switch between Custom Field templates when switching page templates, both pages default to TEMPLATE #0. My Page1 is set to TEMPLATE #0 and Page2 is set to TEMPLATE #1 in the 'Page Template file name(s) (comma-deliminated):' field. Looks OK but need some help understanding this better. Any idea's to keep me sane!

    Steve

  13. Steve / 10.4.09 / 6:28 AM

    Sorted it, thanks for the above coding and tips. Shame the documentation with the plugin itself isn't newbie proof.

  14. tin_soldier / 10.15.09 / 3:14 AM

    I've come across the same problem as Jonathan D. Baker above using the Hybrid theme framework and WP 2.8.4.
    If there's no content in the custom field you get "Warning: Invalid argument supplied for foreach()".

    I assume we can write a conditional statement in the template to avoid this.

    Can anyone let us know how to write it? It needs adding to:

    <?php
    $block = get_post_meta($post->ID, 'Block #1');
    foreach(($block) as $blocks) {
    echo $blocks;
    }
    ?>

  15. kevinlearynet / 10.15.09 / 11:52 AM

    Give this a try:

    <?php
    $block = get_post_meta($post->ID, 'Block #1');
    if($block){
    foreach(($block) as $blocks) {
    echo $blocks;
    }
    }
    ?>

  16. xSEOn / 10.28.09 / 5:55 PM

    Hi, I'm so happy I found this post as the plugin's homepage doesn't actually explain the part with the template codes needed to load the Custom fields into the theme. Thanks a lot.

    What I am still missing is how the above code should look like if I'd like to enter a number of my custom fields one after the other separated just with some symbol.

    Thanks again!

  17. kevinlearynet / 10.29.09 / 3:35 AM

    You could use a re-usable PHP function to access multiple Custom Field Template's easier. Give this a try, it's worked OK for me:

    <?php
    function getCustomField($theField) {
    global $post;
    $block = get_post_meta($post->ID, $theField);
    if($block){
    foreach(($block) as $blocks) {
    echo $blocks;
    }
    }
    }
    getCustomField('Block #1');
    ?>

  18. xSEOn / 10.29.09 / 12:04 PM

    Thanks a lot kevinlearynet, I'm really happy now. :)

  19. Casey / 10.29.09 / 4:59 PM

    Kevin, when above you say, "Next we need to take the content created by these new fields and add it to our template. To do this we’ll need some basic PHP." are you referring to a WordPress PAGE THEME template or the Custom Field Template's template (eg. Template #0)?

    I cannot get the data entered into my Custom Field Template's "options" to show up in the actual theme page. I added the php you wrote above (modified for MY options in my layout markup) and I have indicated the Page template to use for the display of the content… and it is using it — I can tell because the_content() is displaying as required from my template.

    But the block of content for data inserted via the CFT options aren't. Do I have to echo the values? Help!

  20. Casey / 10.29.09 / 5:06 PM

    Is your tutorial outdated now? You don't cover the format and other options of the CFT plugin's settings. Can I assume (since the plugin author STILL hasn't created documentation in English) that the stuff I would have put (per your tutorial above) into my theme's custom page template now goes into the "format" field for the associated CFT Template?

  21. Casey / 10.29.09 / 5:20 PM

    Nevermind. I just used the c2c_get_custom() function to pull the data into my WordPress custom Page template. Thanks, though!

  22. xSEOn / 10.31.09 / 3:45 PM

    Kevin, I'd appreciate an example of using [cft format=0] into a template (single.php). By the way your example code above produces an error because of the '$post-&gt;ID' instead of '$post->ID'.

  23. kevinlearynet / 11.1.09 / 6:43 PM

    Sorry about that xSEOn, one of these days I need to find a better code parser for the site, occasionally the visual editor throws some issues on publish like that.

    I don't know much about the [cft format=0] method, but if you think it could add to this post please point me in the direction of some resources, I'd be happy to add a section to this post for you.

  24. kevinlearynet / 11.1.09 / 6:44 PM

    Actually, is the [cft format=0] just a quicktag format allowing you to insert content within the WYSIWYG editor?

  25. Jean / 11.4.09 / 12:57 PM

    Very interesting technique, this seems like a good fit for my website's home page http://tinyurl.com/yzz4zsd as you can see I have two content boxes very similar to your example, right now they are just taking the content from two separate posts. If I were to convert that to the method you are describing here, would I also be able to let users select the title for that content box? i.e. enable them to enter "Wine Cellar" for the block title.

  26. kevinlearynet / 11.4.09 / 1:24 PM

    You could do this with the Custom Field Template plugin or the More Fields plugin. Here are some screens of a recent setup I created for portfolio management using the More Fields plugin:

    http://work.kevinleary.net/screens/captains-entry...
    http://work.kevinleary.net/screens/captains-homel...

    The live site can be seen online at:

    http://www.captainsofindustry.com/portfolio/homel...

  27. kevinlearynet / 11.4.09 / 1:24 PM

    You could do this with the Custom Field Template plugin or the More Fields plugin. Here are some screens of a recent setup I created for portfolio management using the More Fields plugin:

    http://work.kevinleary.net/screens/captains-entry...
    http://work.kevinleary.net/screens/captains-homel...

    The live site can be seen online at:

    http://www.captainsofindustry.com/portfolio/homel...

  28. Jean / 11.4.09 / 7:22 PM

    excellent thanks Kev understood that, really excited to start working with these plugins from now on.

  29. Jean / 11.4.09 / 8:41 PM

    Am I correct in saying that all these techniques and plugins such as more fields, flutter etc. just add more fields to a post or page content type? If that is so then Pods CMS would be more flexible in that it lets you create completely new content types, if I understand correctly.

  30. kevinlearynet / 11.5.09 / 3:26 PM

    You know, I'm really not too familiar with the way Pods works but I have heard great things. Have you ever used it? Do you have any working examples you could show? Call me simple minded but I found the admin interface difficult to use.

  31. Jean / 11.5.09 / 3:32 PM

    I've just installed it and followed the simple intro video, but am looking at it and the other alternatives I mentioned for an upcoming website, I'll let you know if I use it. I agree that it is a bit more difficult to use than the other plugins, probably because it introduces a new way of working , but I dont think its terribly hard to grasp if one is determined to work with it.

  32. kevinlearynet / 11.5.09 / 3:51 PM

    Let me know how it goes, from what I've heard about it (on the WordPress Weekly podcast) it claims to be better than other custom field options by stores information in the database in a more efficient way.

  33. Russell / 11.25.09 / 9:05 PM

    Great tutorial — I found it very useful.
    Thanks!

  34. xSEOn / 11.26.09 / 8:02 AM

    Yes, there is a possibility to create different formats and to use them whenever you need them within a post or page using the shortcode [cft format=1] where 1 is the number of your form (see the plugin settings page). It's the same with the [cft search=0] for searching. But It's not written how those functions could be used outside a post or page that's why I thought you might know that.

  35. @oblik / 12.11.09 / 9:04 AM

    Great post! Thanks!

  36. Adam / 1.14.10 / 5:34 PM

    Is it possible to create more than 2 custom fields using the Custom Field Template plugin? Thanks!

  37. kevinlearynet / 1.14.10 / 9:49 PM

    Yeah man, that's the whole point?

  38. Graham / 1.15.10 / 11:37 PM

    Great Tutorial.

    I have had a problem with using shortcodes with it. If I use your above code, I can't use NextGen gallery shortcodes e.g. [nggallery id=1] within the additional fields. Any ideas why this might be? It works fine in the main text area.

  39. Devin / 2.7.10 / 7:21 AM

    Awesome. Just used this to add a sidebar meta box for pages. If content is entered in the meta_box, it will display that in place of the standard widgetized page sidebar. Lot's of other solutions out there, but this seemed easiest since a TinyMCE editor was required. Thanks so much.

  40. Devin / 2.7.10 / 7:23 AM

    In the plug-ins setting there's a field that says: "Check here in case that you would like to use shortcodes in the widget". Check that box.

  41. kevinlearynet / 2.8.10 / 1:16 PM

    That's Great Devin! I've used it for similar situations. Currently all I use for added fields is Flutter or Pods, depending on the situation.

Leave a comment

will not be published

Wrap code blocks with <pre lang="LANGUAGE" line="1"> and </pre> where LANGUAGE is a GeSHi supported language syntax.