A presentation given at WordCamp Denver 2012 on using custom meta boxes in your theme or plugin.

1. WordCamp Denver 2012
October 13, 2012

2. Jeremy Green
WordPress Developer at Endo Creative
Organizer of the Fort Collins WordPress Meetup
@greenhornet79

3. Developing with
Custom Meta Boxes

4. What is a custom meta box?

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

6. What about custom fields?

7. Could use custom fields, but they’re
ugly and not user friendly.

8. What does
this mean?

9. Add descriptions
for users

11. Dropdown
Radio Buttons
Select
Text Box

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

13. add_meta_box( $args );

14. $id
(required)
HTML ‘id’ attribute of the edit screen section

15. $title
(required)
Title of the edit screen section, visible to the user

16. $callback
(required)
Function that prints out the HTML for the edit screen section

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

18. $context
(optional)
The part of the page where the edit screen section should be
shown (normal, advanced, or side)

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

20. $callback_args
(optional)
Arguments to pass into your callback function

21. Custom Meta Boxes for
Baseball Card Collection

22. WordPress
1. Title
2. Description
3. Featured Image

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

24. Sports Team
- use a text box
Card Condition
- use a dropdown
Rookie Card
- checkbox

25. Lets get started

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

27. // Define 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’ );

28. // 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
);
}

29. // Print the inner box contents
function card_inner_custom_box( $post ) {
// get the post meta and display it in our input
// the actual fields for data entry
// use nonce for verification
}

30. // 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);

31. get_post_meta( $post_id, $key, $single);
// returns the values of the custom fields with the
specified key from the specified post

32. // the actual fields for data entry
// text input
<label for=”_team_name”>What team?</label>
<input type=”text” name=”_team_name” id=”_team_name” value=<?php
echo $team; ?> />

33. // the actual fields for data entry
// 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>

34. selected( $selected, $current, $echo);
// returns html (selected=‘selected’)
// replaces if/then statements

35. // the actual fields for data entry
// 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>

36. checked( $checked, $current, $echo);
// returns html (checked=‘checked’)
// if values are the same, it adds checked

37. // use nonce for verification
// validates that the contents of the form came from the
location on the current site
wp_nonce_field( plugin_basename( __FILE__ ),
‘sports_card_nonce’ );

38. wp_nonce_field( $action, $name );
$action - unique identifier of nonce
$name - name of hidden form field

39. Output

40. // 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, find and save the data
}

41. // verify is this is an autosave routine
if ( defined( ‘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;

42. // 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;
}

43. // we’re good, find and save the data
$team = $_POST[‘_team_name’];
$condition = $_POST[‘_card_condition’];
$rookie = $_POST[‘_rookie_card’];

44. // 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);
}

45. update_post_meta( $post_id, $meta_key, $meta_value);
// adds post meta if it doesn’t exist
// updates post meta if a different value

46. How do we see our data?

47. Page Templates

48. Archives Template

49. Archives Template
post meta data

50. // 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]) : “ “;

51. get_post_custom( $post_id);
// Returns a multidimensional array with all custom
fields of a particular post or page

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

53. Card Details

55. Actions or Filters

56. 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_filter( 'the_title', 'alt_title_change', 10, 2 );

57. Tips and Tricks

58. Use an _ to remove meta data from the
custom fields
_card_condition

59. Use more than one add_meta_box() if you need it on posts and pages.
add_meta_box(
‘card_meta_box’, // $id
‘Card Details’, // $title
‘card_inner_custom_box’, // $callback
‘sports_cards_cpt’ // $post_type
);
add_meta_box(
‘card_meta_box’, // $id
‘Card Details’, // $title
‘card_inner_custom_box’, // $callback
‘post’ // $post_type
);

60. Use delete_post_meta() to remove a
custom field
delete_post_meta($post_id, $meta_key, $meta_value);

61. 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();
}

62. Resources

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

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

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

66. Thank You!