WordPress Custom Fields:Control your content presentation by breaking out of the_content box

(An introductory prelude to Custom Post Types)

I’m Denise Williams and I can be found at @lettergrade.

What we will cover:

Awhy

Customize

What can our pages gain?

Bhow to

Customize

a case study using page

templates and custom fields

Cplugins

for easy fields

add a friendly admin area

Dnext steps

roadmap to custom post

types

Custom Post Types! Why not TODAY?

It’s kind of like building a whole car when you could start by riding the bike you already have.

Factory photo by Roger Wollstadt (http://www.flickr.com/photos/24736216@N07/)Bike photo from the LOC: LC-B2- 2463-13

Denise WilliamsProject director and WordPress developer at Odeler Services in Montréal.

Can be found at:www.lettergrade.ca @lettergrade

15 years working in publishing and marketing, directing and production managing content projects.

Started using WordPress in 2007, as the backend for magazine websites.

AWhy Customize

whyCustomize

A

Place contextual information for highest impact.

whyCustomize

A

Case Study:

Designing a catalogue of films.

AWhy

Customize

–film title–release year–language–genre–running time–official site url–description

–production credits–list of awards–media reviews–press kit download–trailer–related news–’More like this’

Domino’s film pages require many distinct content areas:

AWhy

CustomizeHow site content is made

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1>

<?php the_content(); ?> <?php endwhile; ?><?php else : ?><?php endif; ?>

This code can go in index.php, single.php, page.php, etc...

Bhow to

Customize

AIEEE! We’ve overstuffed the content field.

Bhow to

Customize

Final ‘Film Page’ layout

Bhow to

Customize

Film Title

Release Year

Genre

Film Poster

Production Credits

Cast

Trailer

‘More like this’

Film News

Language Running Time Director

Awards Received

Media Reviews

Press Kit Download

Link to Official Site

Still Image

Film Description

BHow to Customize

Bhow to

Customize

step 1

Create a page template with custom design elements

<?php/*Template Name: Film Page*/?>

Bhow to

Customize

release-year

genre

film-poster

production-credits

cast

trailer

more-like-this

film-news

language running-time director

awards-received

media-reviews

press-kit

offical-site

still-image

film-description

step 2a

Plan your content areas

film-title

What exactly ARE custom fields?

“Key/Value Pairs”

Think of custom fields as:

– the ability to create your own post template tags. (Make some room, the_content!)

– empty buckets in which you can store any piece of information that you might want to retrieve later.

Bhow to

Customize

step 2b

Add custom field data to pages

make sure custom fields are checked in your screen options tab

see custom fields appear below the body content field

Bhow to

Customize

Bhow to

Customize

Bhow to

Customize

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1>

<?php the_content(); ?> <?php endwhile; ?><?php else : ?><?php endif; ?>

How site content is made

This code can go in index.php, single.php, page.php, etc...

Bhow to

Customize

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?>

<?php echo get_post_meta($post->ID, 'key-value', true); ?>

How site content is made

This code can go in index.php, single.php, page.php, etc...

Bhow to

Customize

step 3

Code custom fields into page template

<?php echo get_post_meta($post->ID, 'key-value', true); ?>

funCTiOn ThAT reTrieves YOur

DATA fOr YOu

The iD Of The CurrenT POsT

Or PAge

The nAme Of The vAlue YOu wAnT

TO reTrieve

True = single vAluefAlse = ArrAY Of mulTiPle vAlues

OuTPuTs YOur vAlue

Bhow to

Customize

step 3

Code custom fields into page template

<?php echo get_post_meta($post->ID, 'key-value', true); ?>

Note: the key-value is the ONLY item we need to change!

<?php echo get_post_meta($post->ID, 'film-director', true); ?>

Bhow to

Customize

HOORAY!Our final film page layout works.

Now, how can we make it better and more flexible?

Bhow to

Customize

extra tip!

Add conditional code to hide or display a whole content section

<h4 class = "credits">Awards</h4> <div class = "doubleline"></div> <?php echo get_post_meta($post->ID, 'film-awards', true); ?>

Before:

Bhow to

Customize

extra tip!

Add conditional code to hide or display a whole content section

<?php if ( get_post_meta($post->ID, 'film-awards', true) ) { ?>

<h4 class = "credits">Awards</h4> <div class = "doubleline"></div> <?php echo get_post_meta($post->ID, 'film-awards', true); ?>

<?php } else { ?><?php } ?>

after:

Bhow to

Customize

extra tip!

Add ‘else’ to publish default info if no new value exists

<h4 class = "credits">Awards</h4><div class = "doubleline"></div>

<?php if ( get_post_meta($post->ID, 'film-awards', true) ) { ?> <?php echo get_post_meta($post->ID, 'film-awards', true); ?><?php } else { ?> <p>No awards yet. Please petition <a href = "http://www.oscars.org/">the Oscar committee</a>.</p><?php } ?>

But what about posts?

The layout concepts are the same when adapting posts, but post templates are not created the same way as page templates. The difference is that the syntax for ‘single-{typename}.php is reserved for Custom Post Types.

options:— adapt existing templates by adding custom code to

single.php, index.php, archive.php, and category.php

— add conditional code to current template files, so certain custom fields display for certain categories

— use one of the many post template plugins to recognize and apply your post templates: http://wordpress.org/plugins/search.php?q=post+template

Content Entry Plugins

C

Think about the backend your user will see.

Photo from the LOC: LC-B2- 2457-5

Bplugins

for easy fields

C

Bplugins

for easy fields

CAdvanced Custom Fields

Bplugins

for easy fields

CCreate new sets of fields

Bplugins

for easy fields

CAssign a format for the type of field you want to show

Bplugins

for easy fields

C

You can add titles and instructions and rules to the fields you’ve chosen.

PLuGIN SETTINGS PAGE

Bplugins

for easy fields

CYou can add titles and instructions and rules to the fields you’ve chosen.

PLuGIN SETTINGS PAGE ADD/EDIT PAGE SCREEN

Bplugins

for easy fields

CADD/EDIT PAGE SCREEN

Cplugins

for easy fields

Custom Fieldshttp://wordpress.org/plugins/custom-fields/

Developers Custom Fieldshttp://wordpress.org/plugins/developers-custom-fields/

Search for more plugins:http://wordpress.org/plugins/search.php?q=custom+fields

suggestions?

Other Custom Fields plugins

Next Steps

D

Dnext steps

1. Start thinking endlessly about content presentation options.

2. Look at lots of examples. I’ve started collecting some sites from WP Showcase for you at this page on my blog (your contributions are welcome!):

http://blog.lettergrade.ca/custom-site-library/

3. Have fun with it! Practice for a year. (Six months if you’re really into it.)

4. Combine all the elements you’ve practiced into planning and building a Custom Post Type.

Where do we go from here?

I’m Denise Williams and I can be found at @lettergrade.

thanK you.Questions?