Custom Fields & Custom Metaboxes Overview

1,330 views

Published on

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

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,330
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Custom Fields & Custom Metaboxes Overview

  1. 1. November 18, 2012
  2. 2. EastBayWP.com
  3. 3. Our Meetup.com Pagehttp://www.meetup.com/Eastbay-WordPress-Meetup/
  4. 4. Ongoing Sponsor: Page.ly http://page.ly/
  5. 5. Today’s Sponsorhttp://www.woothemes.com/
  6. 6. Intro to Custom Fields& Custom Metaboxes Sallie Goetsch November 18, 2012
  7. 7. http://codex.wordpress.org/Custom_FieldsCUSTOM FIELDS
  8. 8. What Is a Custom Field?“Arbitrary extra information”—notpart of your regular post or pagecontent
  9. 9. What Can You Put in a Custom Field?ANYTHING• Text• Images• Media• Embed codes• Links• Dates
  10. 10. How Do I Add Custom Fields?• Right in your post or page UI, below the content box.
  11. 11. Don’t See them?Check Screen Options
  12. 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. 13. How Does WP Store Custom Fields?
  14. 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_Tags/the_meta
  15. 15. Displaying Custom Fields, with Parameters This Time<?php get_post_custom_values($key, $post_id); ?>Lets you choose which custom fields todisplay.
  16. 16. Displaying Custom Fields in Genesis Themesif( $post->post_content != "" ) {echo "<div class=testimonial-story>";echo "<h3>How the WLC System Workedfor " . genesis_get_custom_field(wlc_success_name ) . "</h3>";the_content( __( [Read more...] ,genesis ) );echo "</div>";}
  17. 17. http://codex.wordpress.org/Function_Reference/add_meta_boxCUSTOM METABOXES
  18. 18. What’s a Metabox?Also known as a “write panel,” a “metabox”is one of those nice little boxes in the backend of WordPress that you use forentering or controlling content.Metaboxes let you use radio buttons, datepickers, file uploads, and other handy UIelements that custom fields don’t. Theymake life easier for your clients.
  19. 19. Function: add_meta_box<?php add_meta_box( $id, $title, $callback,$post_type, $context,$priority,$callback_args ); ?>
  20. 20. Code for a Twitter Metabox
  21. 21. What That Metabox Looks Like
  22. 22. Coding Metaboxes Is Easier With…• Meta Box Pluginor• Advanced Custom Fields Pluginor• WPAlchemy MetaBox PHP Class
  23. 23. If You Don’t Want to Code… http://wordpress.org/extend/plugins/types/
  24. 24. Metaboxes Created by Types Plugin WYSIWYG URL Multiple Lines
  25. 25. Display by API
  26. 26. Display as Normal Custom Fields // display speaker bio echo "<h3>About theSpeaker</h3>"; echo "<div class=speaker-bio>"; echo "<p>" .genesis_get_custom_field( wpcf-speaker-bio ) . "</p>";
  27. 27. Display with Views Pluginhttp://wp-types.com/home/views-create-elegant-displays-for-your-content/Note—I didn’t actually find compiling all these shortcodes a lot easier thanbuilding the templates myself. You still have to style the templates. So after alittle tinkering, I gave up and used Method 2.
  28. 28. More StuffAs always, you’ll find links to relatedresources, plus a copy of these slides, onthe EastBayWP.com site.You can find me, your humble presenterand harried meetup organizer,@salliegoetsch on Twitter or atWPFangirl.com.

×