Sallie Goetsch provides an overview of custom fields and custom metaboxes in WordPress at the November 2012 East Bay WordPress Meetup. (These are the slides that never reached Oakland.)

1. November 18, 2012

2. EastBayWP.com

3. Our Meetup.com Page
http://www.meetup.com/Eastbay-WordPress-Meetup/

4. Ongoing Sponsor: Page.ly
http://page.ly/

5. Today’s Sponsor
http://www.woothemes.com/

6. Intro to
Custom Fields
& Custom Metaboxes
Sallie Goetsch
November 18, 2012

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

8. What Is a Custom Field?
“Arbitrary extra information”—not
part of your regular post or page
content

9. What Can You Put
in a Custom Field?
ANYTHING
• Text
• Images
• Media
• Embed codes
• Links
• Dates

10. How Do I Add Custom Fields?
• Right in your post or page UI, below the
content box.

11. Don’t See them?
Check Screen Options

12. How Do Custom Fields Work?
• KEY, a.k.a. NAME: The name of the
custom field
• VALUE: The content of the custom field

13. How Does WP Store Custom Fields?

14. 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_Tag
s/the_meta

15. Displaying Custom Fields,
with Parameters This Time
<?php get_post_custom_values
($key, $post_id); ?>
Lets you choose which custom fields to
display.

16. 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>";
}

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

18. 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.

19. Function: add_meta_box
<?php add_meta_box
( $id, $title, $callback,
$post_type, $context,
$priority,
$callback_args ); ?>

20. Code for a Twitter Metabox

21. What That Metabox Looks Like

22. Coding Metaboxes Is Easier With…
• Meta Box Plugin
or
• Advanced Custom Fields Plugin
or
• WPAlchemy MetaBox PHP Class

23. If You Don’t Want to Code…
http://wordpress.org/extend/plugins/types/

24. Metaboxes Created by Types Plugin
WYSIWYG
URL
Multiple Lines

25. Display by API

26. 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>";

27. 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.

28. 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.