WordCamp Denver 2012October 13, 2012
Jeremy GreenWordPress Developer at Endo CreativeOrganizer of the Fort Collins WordPress Meetup@greenhornet79
Developing withCustom Meta Boxes
What is a custom meta box?
It allows you to add a custom piece ofdata to a post or page in theadministrative interface.
What about custom fields?
Could use custom fields, but they’reugly and not user friendly.
What doesthis mean?
Add descriptions   for users
Dropdown   Radio ButtonsSelect          Text Box
How to add a custom metabox to your plugin or theme
add_meta_box( $args );
$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 screensection (post, page, link or cpt)
$context(optional)The part of the page where the edit screen section should beshown (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 forBaseball Card Collection
WordPress1. Title2. Description3. Featured Image
Additional Info Required1. Sports Team2. Card Condition3. Is it a rookie card?
Sports Team- use a text boxCard Condition- use a dropdownRookie Card- checkbox
Lets get started
Overview of Code1. Add actions2. Create custom meta box3. Create input fields4. Save data
// Define the custom meta boxadd_action( ‘add_meta_boxes’, ‘card_meta_box’ );// Do something with the data enteredadd_actio...
// Add box to edit screenfunction card_meta_box() {    add_meta_box(         ‘card_meta_box’, // $id         ‘Card Details...
// Print the inner box contentsfunction card_inner_custom_box( $post ) {    // get the post meta and display it in our inp...
// get the post meta and display it in our input$team = get_post_meta($post->ID, ‘_team_name’, true);$condition = get_post...
get_post_meta( $post_id, $key, $single);// returns the values of the custom fields with thespecified key from the specified p...
// the actual fields for data entry// text input<label for=”_team_name”>What team?</label><input type=”text” name=”_team_na...
// the actual fields for data entry// select input<label for=”_card_condition”>What condition?</label><select name=”_card_c...
selected( $selected, $current, $echo);// returns html (selected=‘selected’)// replaces if/then statements
// the actual fields for data entry// checkbox input<input type=”checkbox” name=”_rookie_card”id=”_rookie_card” <?php check...
checked( $checked, $current, $echo);// returns html (checked=‘checked’)// if values are the same, it adds checked
// use nonce for verification// validates that the contents of the form came from thelocation on the current sitewp_nonce_fi...
wp_nonce_field( $action, $name );$action - unique identifier of nonce$name - name of hidden form field
Output
// When the post is saved, saves our custom datafunction card_save_postdata( $post ) {    // verify it wasn’t an auto save...
// verify is this is an autosave routineif ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE )   return;// verify it came fro...
// check permissionsif ( ‘page’ == $_POST[‘post_type’] ) {    if ( !current_user_can( ‘edit_page’, $post_id ) )           ...
// we’re good, find and save the data$team = $_POST[‘_team_name’];$condition = $_POST[‘_card_condition’];$rookie = $_POST[‘...
// add_post_meta(), update_post_meta(), custom tableif (isset($team)) {    update_post_meta($post_id, ‘_team_name’, $team)...
update_post_meta( $post_id, $meta_key, $meta_value);// adds post meta if it doesn’t exist// updates post meta if a differe...
How do we see our data?
Page Templates
Archives Template
Archives Template           post meta data
// within the loop$values = get_post_custom( $post->ID );$team = isset( $values[‘_team_name’]) ?   esc_attr( $values[‘_tea...
get_post_custom( $post_id);// Returns a multidimensional array with all customfields of a particular post or page
<ul>  <li>        Team Name: <?php echo $team; ?>  </li>  <li>        Condition: <?php echo $condition; ?></li>  <li>     ...
Card Details
Actions or Filters
function alt_title_change($title, $id) {    $endo_alt_title = get_post_meta($id, _endo_alt_title, true);    if ($endo_alt_...
Tips and Tricks
Use an _ to remove meta data from thecustom fields_card_condition
Use more than one add_meta_box() if you need it on posts and pages.add_meta_box(     ‘card_meta_box’, // $id     ‘Card Det...
Use delete_post_meta() to remove acustom fielddelete_post_meta($post_id, $meta_key, $meta_value);
Limit a meta box to one page by checkingpost/page id// get $post_id$post_id = $_GET[post] ? $_GET[post] :$_POST[post_ID] ;...
Resources
1. Custom Metaboxes and Fields for WordPress   - a framework for easily creating custom metaboxes   - https://github.com/j...
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-fields/
Thank You!
WordCamp Denver 2012 - Custom Meta Boxes
WordCamp Denver 2012 - Custom Meta Boxes
Upcoming SlideShare
Loading in...5
×

WordCamp Denver 2012 - Custom Meta Boxes

1,210

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,210
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "WordCamp Denver 2012 - Custom Meta Boxes"

    1. 1. WordCamp Denver 2012October 13, 2012
    2. 2. Jeremy GreenWordPress Developer at Endo CreativeOrganizer of the Fort Collins WordPress Meetup@greenhornet79
    3. 3. Developing withCustom Meta Boxes
    4. 4. What is a custom meta box?
    5. 5. It allows you to add a custom piece ofdata to a post or page in theadministrative interface.
    6. 6. What about custom fields?
    7. 7. Could use custom fields, but they’reugly and not user friendly.
    8. 8. What doesthis mean?
    9. 9. Add descriptions for users
    10. 10. Dropdown Radio ButtonsSelect Text Box
    11. 11. How to add a custom metabox to your plugin or theme
    12. 12. add_meta_box( $args );
    13. 13. $id(required)HTML ‘id’ attribute of the edit screen section
    14. 14. $title(required)Title of the edit screen section, visible to the user
    15. 15. $callback(required)Function that prints out the HTML for the edit screen section
    16. 16. $post_type(required)The type of Write screen on which to show the edit screensection (post, page, link or cpt)
    17. 17. $context(optional)The part of the page where the edit screen section should beshown (normal, advanced, or side)
    18. 18. $priority(optional)The priority with the context where the boxes should show(high, core, default, low)
    19. 19. $callback_args(optional)Arguments to pass into your callback function
    20. 20. Custom Meta Boxes forBaseball Card Collection
    21. 21. WordPress1. Title2. Description3. Featured Image
    22. 22. Additional Info Required1. Sports Team2. Card Condition3. Is it a rookie card?
    23. 23. Sports Team- use a text boxCard Condition- use a dropdownRookie Card- checkbox
    24. 24. Lets get started
    25. 25. Overview of Code1. Add actions2. Create custom meta box3. Create input fields4. Save data
    26. 26. // Define the custom meta boxadd_action( ‘add_meta_boxes’, ‘card_meta_box’ );// Do something with the data enteredadd_action( ‘save_post’, ‘card_save_postdata’ );
    27. 27. // Add box to edit screenfunction card_meta_box() { add_meta_box( ‘card_meta_box’, // $id ‘Card Details’, // $title ‘card_inner_custom_box’, // $callback ‘sports_cards_cpt’ // $post_type );}
    28. 28. // Print the inner box contentsfunction 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}
    29. 29. // 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);
    30. 30. get_post_meta( $post_id, $key, $single);// returns the values of the custom fields with thespecified key from the specified post
    31. 31. // 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=<?phpecho $team; ?> />
    32. 32. // 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>
    33. 33. selected( $selected, $current, $echo);// returns html (selected=‘selected’)// replaces if/then statements
    34. 34. // 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>
    35. 35. checked( $checked, $current, $echo);// returns html (checked=‘checked’)// if values are the same, it adds checked
    36. 36. // use nonce for verification// validates that the contents of the form came from thelocation on the current sitewp_nonce_field( plugin_basename( __FILE__ ),‘sports_card_nonce’ );
    37. 37. wp_nonce_field( $action, $name );$action - unique identifier of nonce$name - name of hidden form field
    38. 38. Output
    39. 39. // When the post is saved, saves our custom datafunction 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}
    40. 40. // verify is this is an autosave routineif ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) return;// verify it came from our screen with proper authorizationif ( !wp_verify_nonce( $_POST[‘sports_cards_nonce’],plugin_basename( __FILE__) )) return;
    41. 41. // check permissionsif ( ‘page’ == $_POST[‘post_type’] ) { if ( !current_user_can( ‘edit_page’, $post_id ) ) return;} else { if ( !current_user_can( ‘edit_post’, $post_id ) ) return;}
    42. 42. // we’re good, find and save the data$team = $_POST[‘_team_name’];$condition = $_POST[‘_card_condition’];$rookie = $_POST[‘_rookie_card’];
    43. 43. // add_post_meta(), update_post_meta(), custom tableif (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);}
    44. 44. update_post_meta( $post_id, $meta_key, $meta_value);// adds post meta if it doesn’t exist// updates post meta if a different value
    45. 45. How do we see our data?
    46. 46. Page Templates
    47. 47. Archives Template
    48. 48. Archives Template post meta data
    49. 49. // 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]) : “ “;
    50. 50. get_post_custom( $post_id);// Returns a multidimensional array with all customfields of a particular post or page
    51. 51. <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>
    52. 52. Card Details
    53. 53. Actions or Filters
    54. 54. 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 );
    55. 55. Tips and Tricks
    56. 56. Use an _ to remove meta data from thecustom fields_card_condition
    57. 57. 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);
    58. 58. Use delete_post_meta() to remove acustom fielddelete_post_meta($post_id, $meta_key, $meta_value);
    59. 59. Limit a meta box to one page by checkingpost/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(); }
    60. 60. Resources
    61. 61. 1. Custom Metaboxes and Fields for WordPress - a framework for easily creating custom metaboxes - https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress
    62. 62. 2. Meta Box - a plugin for creating custom meta boxes - http://wordpress.org/extend/plugins/meta-box/
    63. 63. 3. Reusable Custom Meta Boxes - http://wp.tutsplus.com/tutorials/reusable-custom-meta-boxes-part-1-intro-and-basic-fields/
    64. 64. Thank You!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×