Tag: custom fields

New WordPress-based Site: AnnyChih.com

Two weekends ago my sister-in-law Anny Chih asked for some help sprucing up her WordPress blog. She wanted to apply for The Best Job in the World – the Tourism Queensland online video contest where you post a 1 minute video application to become the island caretaker of the beautiful Hamilton Island in Australia – and use the blog to showcase her talents and provide information about both herself and the islands.

Her blog was running the default theme but she wanted something that reflected the contest and also her own sunny disposition. She sketched up a rough draft in PhotoShop and let me get to work on it. I set aside one day to finish the entire redesign (totally crazy) and here is the result.

WordPress as CMS

Off the top you’ll notice I switched the front page to a static one to showcase the video and some info about the contest and Anny herself. The blog portion of the site has been moved to the back end and is accessible from the main menu and also from the Recent Posts box on the bottom right hand side.

Custom Field Boxes

At the bottom of the front page there are three boxes containing from left to right info on the contest, Anny’s 4 most recent tweets and the titles of the 5 most recent posts. The three fields are populated using custom fields from within the WordPress admin area so that they can easily be changed later. In the case of the Twitter box it is populated using the technique outlined in my Create a Twitter Box in Your Sidebar tutorial.

I used this site as an example during WordCamp Whislter last weekend to demonstrate how you can use custom fields for advanced layouts. The entire talk with code examples will be posted over the weekend.

Subtle Graphic Effects

I usually spend a lot of time making sure the sites I design have compelling and interesting graphics. In the case of Design is Philosophy I took the principle to the extreme but on AnnyChih.com I focused more on subtlety. For example, the background graphic with the bubbles is separated from the header image so that if you change the size of the browser window you’ll see the two images moving independently of each other. It’s a very subtle effect but it means that even people using smaller screens see the circle graphic Anny came up with.

Within the pages and posts I’ve also added graphic elements like the glowing underlines using CSS. It’s a simple trick that makes the content look more refined than simple solid lines.

Threaded Comments

One of the major upgrades in WordPress 2.7 was the inclusion of threaded comments. By activating and styling this fucntionality the visitors to the site now have the ability to carry on conversations without being confused by the comment order. Again it’s a subtle effect that greatly enhances the experience for the visitor.

January 30, 2009
Code snippets from my WordCamp presentation
Here are some code snippets from my WordCamp Whistler presentation. This article will be expanded in the coming week but in the meantime here they are for anyone wanting to play around with them:

Custom Page Templates in 5 lines of code
Custom Fields in one line of code
```
ID, '$key', true); ?>
```
Custom Field that parses PHP code
```
ID, 'centerBox', true); ?>
'.$boxContent); ?>
```
January 24, 2009
Using Conditional Custom Fields for Advanced Layouts
An often overlooked function in the WordPress arsenal is Custom Fields. Overlooked because to most it makes no sense: What do you use a custom field for? And how do you use it? The answers to these questions differ depending on how the WordPress theme has been set up: Custom fields can be used for everything from passing information to plug-ins like Next Gen Gallery to feeding custom areas in the template with information. But it goes way beyond that. Custom Fields can also be used to create advanced layouts and design variances that can be triggered on a page by page or post by post basis. And this tehcnique can be edhanced further by adding conditions to the scripts so that the changes only appear when the field is actually activated.

Understanding custom fields

You can add custom fields to any WordPress post or page through the custom fields interface found right underneath the main text area. The custom field contains two elements; a name and a value. These are pretty self explanatory: When the template asks the server for the name, the value is returned. But this also means that unless the template actually asks for the field by name, nothing is returned. An example to show how this works in real life:

A web site for an art gallery requires each artist page to have a series of sub-pages containing an artists statement, bio, CV and image gallery. Although adding an unordered list directly to the text body of the page would work, it would require the addition of style elements and tags – something WordPress doesn’t like very much. Not to mention it’s also cumbersome and messy. A better solution is to place all the style tags in the template and then just feed the menu in the form of a standard unordered list from a custom field, in this case with the name “artistMenu”. Then all that’s left is to get the template to call for the info in the custom field like this:
```
	ID, "artistMenu", true); ?>		
```
When the template is opened, the content of the custom field named “artistMenu” is placed as a string inside the artistMenu div. (To understand exactly how the php code works you can read about the get_post_meta template tag in the WordPress Codex.)

Making the custom fields conditional

The problem with the example above is that even if there is no custom field defined, the div is still placed in the page taking up space. Not a big problem when it’s just a horizontal menu but if you use a custom field to populate something larger, like an image gallery or a text box, it will look weird if the box is left empty. One way of avoiding this is to make two separate templates, one with the custom field code and one without, but that can quickly become complicated. And the whole idea here is to make things simpler, not more complicated. A better way is to make the code and the call for the custom field conditional on whether the custom field has been defined in the first place. This can be done with a simple if statement:
```
ID, "artistMenu", true))) { ?>
	
		ID, "artistMenu", true); ?>		
	
```
Using conditional custom fields as design elements

Now for the really cool stuff: Because we can make custom fields conditional, and because we can populate them with pretty much anything, we can use them not only to add images or text but also to add all new design and layout elements. In the site I built for Sablok & Salbok Notaries Public I used this technique to create a header element that only appears if the custom field is populated by an image or text. The actual appearance of the element is controlled by standard CSS. You can see this layout element as the blue horizontal area in the image and on the front page of the site.

In this particular example the custom field can be populated by an image. Rather than forcing the user to input all the image code in the custom field manually I added some extra code in the template that gathers the width and height of the image and creates the proper element code. As a result all the user has to do is provide the URL for the image. There is also an or condition in the if statement so that the custom field code in the template is triggered either when an image field or a text field is defined:
```
ID, "image", true)) || (get_post_meta($post->ID, "text", true))) { ?>
	

		ID, "image", true)) {
		$size = getimagesize(get_post_meta($post->ID, "image", true)); ?>
		" alt="" width="" height="" />
		
		
		ID, "text", true)) {?>
		ID, "text", true); ?>
		

	
 
```
December 19, 2008