Custom Fields & Custom Metaboxes Overview

November 18, 2012

EastBayWP.com

Our Meetup.com Page

http://www.meetup.com/Eastbay-WordPress-Meetup/

Ongoing Sponsor: Page.ly

http://page.ly/

Today’s Sponsor

http://www.woothemes.com/

Intro to Custom Fields

& Custom Metaboxes Sallie Goetsch

November 18, 2012

CUSTOM FIELDS http://codex.wordpress.org/Custom_Fields

What Is a Custom Field?

“Arbitrary extra information”—not part of your regular post or page content

What Can You Put in a Custom Field?

ANYTHING

• Text

• Images

• Media

• Embed codes

• Links

• Dates

How Do I Add Custom Fields?

• Right in your post or page UI, below the content box.

Don’t See them? Check Screen Options

How Do Custom Fields Work?

• KEY, a.k.a. NAME: The name of the custom field

• VALUE: The content of the custom field

How Does WP Store Custom Fields?

How Do I Display Custom Fields?

THE BASIC WAY

<?php the_meta(); ?>

within the loop will display the key, followed by the value.

http://codex.wordpress.org/Template_Tags/the_meta

Displaying Custom Fields, with Parameters This Time

<?php get_post_custom_values

($key, $post_id); ?>

Lets you choose which custom fields to display.

Displaying Custom Fields in Genesis Themes

if( $post->post_content != "" ) {

echo "<div class='testimonial-story'>";

echo "<h3>How the WLC System Worked for " . genesis_get_custom_field( 'wlc_success_name' ) . "</h3>";

the_content( __( '[Read more...]' , 'genesis' ) );

echo "</div>";

}

CUSTOM METABOXES http://codex.wordpress.org/Function_Reference/add_meta_box

What’s a Metabox?

Also known as a “write panel,” a “metabox” is one of those nice little boxes in the back end of WordPress that you use for entering or controlling content.

Metaboxes let you use radio buttons, date pickers, file uploads, and other handy UI elements that custom fields don’t. They make life easier for your clients.

Function: add_meta_box

<?php add_meta_box

( $id, $title, $callback,

$post_type, $context,

$priority,

$callback_args ); ?>

Code for a Twitter Metabox

What That Metabox Looks Like

Coding Metaboxes Is Easier With…

• Meta Box Plugin

or

• Advanced Custom Fields Plugin

or

• WPAlchemy MetaBox PHP Class

If You Don’t Want to Code…

http://wordpress.org/extend/plugins/types/

Metaboxes Created by Types Plugin

WYSIWYG

URL

Multiple Lines

Display by API

Display as Normal Custom Fields

// display speaker bio

echo "<h3>About the

Speaker</h3>";

echo "<div class='speaker-

bio'>";

echo "<p>" .

genesis_get_custom_field( 'wpcf-

speaker-bio' ) . "</p>";

Display with Views Plugin http://wp-types.com/home/views-create-elegant-displays-for-your-content/

Note—I didn’t actually find compiling all these shortcodes a lot easier than building the templates myself. You still have to style the templates. So after a little tinkering, I gave up and used Method 2.

More Stuff

As always, you’ll find links to related resources, plus a copy of these slides, on the EastBayWP.com site.

You can find me, your humble presenter and harried meetup organizer, @salliegoetsch on Twitter or at WPFangirl.com.