Custom Field Template Plugin: Very Handy!

Ok, I know that I said I wouldn’t really be posting so that I wouldn’t get distracted and so I could focus on my portfolio theme development. But, this is just too cool!

I was at the DFW WordPress May Meetup earlier today (at BJ’s) and met some really smart people that know a whole heck of a lot more than I do (and are much further along “the road” than I am).

One guy in particular, Randy Hoyt, was a great resource for what I’m attempting to do with wordpress. After talking with him for about 5 minutes, we got on the subject of Custom Field’s and he said Custom Field Template was a great tool that would help me achieve my goals.

Needless to say, I left the DFWWP Meetup pretty pumped to get back to my computer to start playing around with all the ideas of what I could do bouncing around in my head!

After I got the CFT plugin installed I decided to take it for a test drive so to speak. (*As I’m new to a lot of this, the nomenclature I use may be off a little, as I continue I hope I do a good enough job describing the process I followed. Also, if there is a better/more effective/efficient process than what I’ve followed, please, enlighten me!)

I made a custom field template that I titled “Portfolio” with the plans of handling all of the ‘extra’ data associated with a portfolio piece (i.e. Client Name, Client Quote, Portfolio Image, Skills used, etc…)

There is a great post by Gabriel Serafini (@gserafini) in which he highlights and does pretty good walk through of setting up your own CFT template. I won’t go into it here, check out his post.

Here we go! I had my template all set up and rigged up some test posts to test out the functionality and work out any bugs. All of the ‘simple’ fields worked beautifully (client_name, portfolio_image, etc…) but I had put in a custom field ‘skills_used’ that utilized checkboxes. Since you can click on more than one box it passes an array to that custom field, which I haven’t had to deal with up to this point. I didn’t know if I could parse the array successfully and apply the html tags I wanted to it as well and place it in the wp template I needed it in.

I found some good posts on the net but nothing that really dealt specifically with this particular issue (granted, I’m sure it is out there, I looked for like 5 minutes max…) so I rolled up my sleeves and went to work.

Here is what I came up with, I’m sure it is pretty sloppy (I consider myself a php novice pretty much.) but it works like a beauty. I decided to wrap everything in an unordered list and wrap each skill used in it’s own list item.

<?php //get skills_used (custom field) ?>
<?php $skills = get_post_meta($post->ID, 'skills_used'); ?>

<?php if(empty($skills)) {
	//if $skills is empty DO NOTHING!!!
}
else {

	echo '<ul class="skills-used">

		<li class="skills-used-title"><h4>Skills Used:</h4></li>';

	foreach ($skills as $skill) {
	    echo '<li class="'."$skill".'">'."$skill</li>";
	}

	echo "</ul>";
}
?>

*this code was placed into the single template file for my portfolio category posts* (It can go in any wp template you need it to go into, sidebar.php, single.php, etc…)

Description: I passed the custom field ‘skills_used’ which was part for the template that I created in CFT ( Remember the checkboxes? Ya, those guys.) to a variable $skills. Then I tested this variable to see if it was empty, if it was empty I wanted it to do NOTHING, although, if it had the good stuff, I wanted it. But the question was, how to get all of it. Enter “foreach”, basically, the jist of what is happening here is that I’m splitting the array apart and labeling each part it pulls off as the variable $skill (not plural!) echo’s it after wrapping it in the li tag, then forgetting it and moving to the next one, until there is nothing left. Tack on the close ul tag and wrap up the php.

An astute student would notice two ‘$skill’ varables being used each foreach. Very good padawan, I want css control over each one, so I’m listing the class of the list item as $skill. This way, if I use Photoshop CS4 for a particular project, I can place a sexy little blue square with “Ps” carved into it.

That, my friends, is what was so cool that it got me blogging at 1:30 am (pardon my spelling!). There is a whole lot of cool stuff you can do with custom fields and similar implementations to this, it just takes a little imagination and experimentation. Enjoy!

This entry was posted in personal, wordpress and tagged , , , , . Bookmark the permalink.
  • Karl
    Thanks, helped me to retrieve some code from the CFT plugin, which I just didn't manage to do with the sparse details on the plugin page.
  • There are a couple of notes that should be made after further testing and some time to reflect.

    1. The get_post_meta function ( In the article we used: ID, 'skills_used'); ?> ) has a parameter that is by default turned off. "$single" to be precise, I should have noted this as this necessary knowledge to understanding how you actually pull in the array. So, if you were playing around with similar code but only getting it to display one value in the array, that is why. Most of the code I saw around other posts I was investigating looked like ID, 'someCustomFieldKey', true); ?> ...

    2. There are possible issues with placing the $skill as the css class for the list items. Firstly, if you name the custom field key, oh let's say, "Photoshop CS4" or "Illustrator CS4" or any other variation of a pair of words, it looks pretty when the php echo's it, but it will apply two css classes. Since you can add multiple css classes by merely separating the class names by a 'space'. In my example you'd end up having:

    <.li class="Photoshop CS4"> // Take out the '.'. Apparently my plugin for pre and code doesn't work in comments... - I NEED to finish my theme! =) -.

    Which applies classes of "Photoshop" and "CS4" to that list item.

    After some further thought, I've come to the conclusion that this is a good and bad thing. Good, because you can apply a uniform left margin to all of list items with the class of "CS4" (The adobe suite has those lovely uniformed icons for all of their wonderful tools.) and a particular background image/icon for "Photoshop" or "Illustrator". This is a pleasant happenstance, but ultimately I think slightly unnecessary as it will save you a handful of lines of CSS code.

    Bad, because there are "certain" browsers out there that still have a good chunk of user basis that do not recognize/accept the web standard of multiple classes. Also, I'm pretty sure this "certain" browser will still flag an html element with the initial class declared (so, "Photoshop CS4" would apply "Photoshop" but ignore CS4). I'm not 100% on this though, so if anyone knows, please feel free to clarify. If, "Photshop" would be applied it would ultimately render the previously stated benefits moot. So, ya...

    Anyways, if anyone else sees any holes in my post please go ahead and poke em. I'm by no means an expert and I'm also a rookie blogger so my tutorial skills still need work for sure! I'd hate for misinformation to go unchecked. Thanks.
blog comments powered by Disqus