WordCamp Denver 2012 - Custom Meta Boxes

WordCamp Denver 2012
October 13, 2012

Jeremy Green
WordPress Developer at Endo Creative
Organizer of the Fort Collins WordPress Meetup

@greenhornet79

Developing with
Custom Meta Boxes

It allows you to add a custom piece of
data to a post or page in the
administrative interface.

Could use custom ﬁelds, but they’re
ugly and not user friendly.

Dropdown
Radio Buttons
Select

Text Box

How to add a custom meta
box to your plugin or theme

$id
(required)

HTML ‘id’ attribute of the edit screen section

$title
(required)

Title of the edit screen section, visible to the user

$callback
(required)

Function that prints out the HTML for the edit screen section

$post_type
(required)

The type of Write screen on which to show the edit screen
section (post, page, link or cpt)

$context
(optional)

The part of the page where the edit screen section should be
shown (normal, advanced, or side)

$priority
(optional)

The priority with the context where the boxes should show
(high, core, default, low)

$callback_args
(optional)

Arguments to pass into your callback function

Custom Meta Boxes for
Baseball Card Collection

WordPress
1. Title
2. Description
3. Featured Image

Additional Info Required
1. Sports Team
2. Card Condition
3. Is it a rookie card?

Sports Team
- use a text box

Card Condition
- use a dropdown

Rookie Card
- checkbox

Overview of Code
1. Add actions
2. Create custom meta box
3. Create input ﬁelds
4. Save data

// Deﬁne the custom meta box

add_action( ‘add_meta_boxes’, ‘card_meta_box’ );

// Do something with the data entered

add_action( ‘save_post’, ‘card_save_postdata’ );

// Add box to edit screen

function card_meta_box() {
add_meta_box(
‘card_meta_box’, // $id
‘Card Details’, // $title
‘card_inner_custom_box’, // $callback
‘sports_cards_cpt’ // $post_type
);
}

// Print the inner box contents

function card_inner_custom_box( $post ) {

// get the post meta and display it in our input
// the actual ﬁelds for data entry
// use nonce for veriﬁcation

}

// get the post meta and display it in our input

$team = get_post_meta($post->ID, ‘_team_name’, true);

$condition = get_post_meta($post->ID, ‘_card_condition’,
true);

$rookie = get_post_meta($post->ID, ‘_rookie_card’, true);

get_post_meta( $post_id, $key, $single);

// returns the values of the custom fields with the
specified key from the specified post

// text input

<label for=”_team_name”>What team?</label>

<input type=”text” name=”_team_name” id=”_team_name” value=<?php
echo $team; ?> />

// select input

<label for=”_card_condition”>What condition?</label>

<select name=”_card_condition” id=”_card_condition”>
<option value=”good” <?php selected( $condition, ‘good’ ); ?>>
Good
</option>
<option value=”bad” <?php selected( $condition, ‘bad’ ); ?>>
Bad
</option>
</select>

selected( $selected, $current, $echo);

// returns html (selected=‘selected’)
// replaces if/then statements

// checkbox input

<input type=”checkbox” name=”_rookie_card”
id=”_rookie_card” <?php checked( $rookie, ‘on’ ); ?> />

<label for=”_rookie_card”>Is it a rookie card?</label>

checked( $checked, $current, $echo);

// returns html (checked=‘checked’)
// if values are the same, it adds checked

// use nonce for veriﬁcation
// validates that the contents of the form came from the
location on the current site

wp_nonce_ﬁeld( plugin_basename( __FILE__ ),
‘sports_card_nonce’ );

wp_nonce_field( $action, $name );

$action - unique identifier of nonce
$name - name of hidden form field

// When the post is saved, saves our custom data

function card_save_postdata( $post ) {

// verify it wasn’t an auto save
// verify it came from our screen
// check permissions
// once authenticated, ﬁnd and save the data
}

// verify is this is an autosave routine

if ( deﬁned( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE )
return;

// verify it came from our screen with proper authorization

if ( !wp_verify_nonce( $_POST[‘sports_cards_nonce’],
plugin_basename( __FILE__) ))
return;

// check permissions

if ( ‘page’ == $_POST[‘post_type’] ) {
if ( !current_user_can( ‘edit_page’, $post_id ) )
return;
} else {
if ( !current_user_can( ‘edit_post’, $post_id ) )
return;
}

// we’re good, ﬁnd and save the data

$team = $_POST[‘_team_name’];
$condition = $_POST[‘_card_condition’];
$rookie = $_POST[‘_rookie_card’];

// add_post_meta(), update_post_meta(), custom table

if (isset($team)) {
update_post_meta($post_id, ‘_team_name’, $team);
}
if (isset($condition)) {
update_post_meta($post_id, ‘_card_condition’, $condition);
}
if (isset($rookie)) {
update_post_meta($post_id, ‘_rookie_card’, $rookie);
}

update_post_meta( $post_id, $meta_key, $meta_value);

// adds post meta if it doesn’t exist
// updates post meta if a different value

Archives Template

post meta data

// within the loop

$values = get_post_custom( $post->ID );

$team = isset( $values[‘_team_name’]) ?
esc_attr( $values[‘_team_name’][0]) : “ “;

$condition = isset( $values[‘_card_condition’] ) ?
esc_attr( $values[‘_card_condition’][0]) : “ “;

$rookie = isset( $values[‘_rookie_card’]) ?
esc_attr( $values[‘_rookie_card’][0]) : “ “;

get_post_custom( $post_id);

// Returns a multidimensional array with all custom
ﬁelds of a particular post or page

<ul>
<li>
Team Name: <?php echo $team; ?>
</li>
<li>
Condition: <?php echo $condition; ?></li>
<li>
Rookie Card:
<?php echo ($rookie == “on” ? “Yes” : “No”); ?>
</li>
</ul>

function alt_title_change($title, $id) {

$endo_alt_title = get_post_meta($id, '_endo_alt_title', true);

if ($endo_alt_title && !is_admin() ) {
$title = $endo_alt_title;
return $title;
}
return $title;
}

add_ﬁlter( 'the_title', 'alt_title_change', 10, 2 );

Use an _ to remove meta data from the
custom ﬁelds

_card_condition

Use more than one add_meta_box() if you need it on posts and pages.

add_meta_box(
‘sports_cards_cpt’ // $post_type
);

add_meta_box(
‘post’ // $post_type
);

Use delete_post_meta() to remove a
custom ﬁeld

delete_post_meta($post_id, $meta_key, $meta_value);

Limit a meta box to one page by checking
post/page id

// get $post_id
$post_id = $_GET['post'] ? $_GET['post'] :$_POST['post_ID'] ;

// checks for post/page ID

if ($post_id == '84')

{

add_meta_box();

}

1. Custom Metaboxes and Fields for WordPress
- a framework for easily creating custom metaboxes
- https://github.com/jaredatch/Custom-Metaboxes-and-
Fields-for-WordPress

2. Meta Box
- a plugin for creating custom meta boxes
- http://wordpress.org/extend/plugins/meta-box/

3. Reusable Custom Meta Boxes
- http://wp.tutsplus.com/tutorials/reusable-custom-meta-
boxes-part-1-intro-and-basic-ﬁelds/

WordCamp Denver 2012 - Custom Meta Boxes

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to WordCamp Denver 2012 - Custom Meta Boxes

Similar to WordCamp Denver 2012 - Custom Meta Boxes (20)

More from Jeremy Green

More from Jeremy Green (9)

Recently uploaded

Recently uploaded (20)

WordCamp Denver 2012 - Custom Meta Boxes

Editor's Notes