Go over a quick crash course into what it takes to develop a WordPress theme and then jump into some deeper waters on how to utilize Custom Post Types, create custom theme options, and custom meta boxes.
3. What is a WordPress theme? A group of templates and a stylesheet that displays content entered into the database via the WordPress admin. At a minimum, you need: index.php style.css
6. What is the Loop? PHP that uses the prefetched query of the current page to loop through the posts and displays the data as outlined in the current pageâs template.
12. A Basic Theme 404.php - Custom ânot foundâ page archive.php - Overall template for archived content attachment.php- Overall template for attachments of any mime type comments.php - The template called with comments_template() footer.php - The template called with get_footer() functions.php - A place to create custom functions, register sidebars, and other settings header.php - The template called with get_header() index.php - The basic home template page.php - Overall template for pages search.php - Search results template searchform.php - The template called with get_search_form() sidebar.php - The template called with get_sidebar() single.php - Overall template for single posts style.css - The main stylesheet
15. What is a Post Type? Content entered into the database goes into the posts tableand is assigned a post_type.
16. Default Post Types Main Content Post - blog style content Page - static content Other Attachment - any images or other files uploaded to a post (of any type) Revision - an archive of version of a particular post Nav Menu Item - used in the menu system
17. What is a Taxonomy? Content can be organized by assigning terms to them. Terms are saved in the terms table, then they are grouped into a taxonomy in the term_taxonomy table, and finally they are related to posts in the term_relationships table.
18. Default Taxonomies Post Taxonomies Category - hierarchical Post Tag - non-hierarchical Other Link Category - for the links system Nav menu - used in the menu system
19. Custom Examples Post Type: Movie Taxonomy: Actor Term: Debbie Reynolds Term: Angeline Jolie Term: Clark Gable Term: Ewan McGregor Taxonomy: Director Term: Ron Howard Term: Steven Spielberg Post Type: Book Taxonomy: Author Term: Frank Peretti Term: James Patterson Term: Seth Godin Term: Lynn Austin Taxonomy: Publisher Term: Atlas Press Term: Hay House Term: OâReilly Media Taxonomy: Subject Term: Arts & Photography Term: Suspense & Horror Term: Reference Post Type: Photo Taxonomy: Album Term: Summer Child Term: Fourth of July Child Term: First Day of School Term: Christmas Term: Sports Taxonomy: Year Term: 2001 Term: 2002 Term: 2003 Post Type: Project Taxonomy: Type Term: Design Child Term: Logo Child Term: Brochure Child Term: Website Term: Development Taxonomy: Tools Term: Photoshop Term: HTML5 Term: JavaScript Term: WordPress
20. Useful Plugins Like most things in WordPress, there are plugins that help create and manage Custom Post Types and Taxonomies.
21. Create Manage Custom Post Type UI Creates Both TONS of labeling options WP Post Type UI Creates Both Buggy Allows a custom icon More Types & More Taxonomies Separate plugins for each Allows you to override built in types and taxonomies Allows a custom icon Works seamlessly with the More Fields Plugin (stay tuned for more) Custom Post Type Order Drag and drop ordering Post Type Switcher Change the post type one item at a time Convert Post Types Bulk edit post types Term Management Tools Merge - combine two or more terms into one Set parent - set the parent for one or more terms (for hierarchical taxonomies) Change taxonomy - convert terms from one taxonomy to another
22. Registration Code The best method for creating Custom Post Types and taxonomies for is to register them yourself without a plugin.
25. Thereâs still an easy way out Donât get too worried about memorizing all of this. Just memorize the web address where you can find two amazing generators: Themergency.com/generators
27. What are Custom Fields? The postmeta table holds extra data and options attached to each post. Custom fields can be used by theme and plugin developers to save extra pieces of information that you can use in templates and other places.
28. How Custom fields work The data is saved in the postmeta table meta_id - the ID of the item being saved post_id - the ID of the post it belongs to meta_key - the name of the data being collected meta_value - the entered value Use the data in a template or function get_post_meta() - returns the values of the specified key the_meta() - outputs a simple list of all custom fields and their values get_post_custom()- returns a multidimensional array with all custom fields of a particular post or page
31. Create Your Own UI Adding a meta box for entering in values for custom fields can make it so much easier for the user to add things like dates or select from a premade list of values.
32. add_meta_box() add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args ); $id - HTML 'id' attribute of the edit screen section $ title - title of the edit screen section, visible to user $callback - function that prints out the HTML for the edit screen section. $page - the type of Write screen on which to show the edit screen section $context - the part of the page where the edit screen section should be shown $priority - the priority within the context where the boxes should show $callback_args- arguments to pass into your callback function add_action('admin_menu', 'project_add_box'); function project_add_box() { global$meta_fields; add_meta_box('project_info', 'Project Info', 'project_show_box', 'project', 'normal', 'high'); }
33. Array of Fields $meta_fields =array( array( 'name' => 'Project URL', 'desc' =>'URL to the live site.', 'id' => 'url', 'type' =>'text', 'value' => 'http://' ), array( 'name' => 'Project Date', 'desc' =>'When the project was released.', 'id' =>'date', 'typeâ => 'date' ), array( 'name' => 'Tools', 'desc' =>'What tools did you use for this project?', 'id' =>'tools', 'type' =>'checkbox_group', 'options' =>array( 'jQuery', 'HTML5', 'CSS 3', 'Photoshop', 'Illustrator', 'WordPress') ) );
34. Callback function project_show_box() { global$meta_fields, $post; // Use nonce for verification echo'<input type="hidden" name="project_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />'; // start a table echo'<table class="form-table">'; // start a loop through the fields foreach ($meta_fields as $field) { // get current post meta data $meta = get_post_meta($post->ID, $field['id'], true); // start a table row echo'<tr> <th style="width:20%"><label for="', $field['id'], '">', $field['name'], '</label></th>', '<td>';
35. Switch Case switch($field['type']) { // text case'text': echo'<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['value'], '" size="30" style="width:97%" /> <br /><span class="desc">', $field['desc'], '</span>'; break; ⊠continue with other field types ⊠} // end switch echo'<td>', '</tr>'; } // end foreach echo'</table>'; }
36. Save Post add_action('save_post', 'project_save_data'); // Save data from meta box function project_save_data($post_id) { global$meta_fields; // verify nonce if(!wp_verify_nonce($_POST['project_meta_box_nonce'], basename(__FILE__))) return$post_id; // check autosave if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return$post_id; // check permissions if ('page' == $_POST['post_type']) { if (!current_user_can('edit_page', $post_id)) return $post_id; } elseif (!current_user_can('edit_post', $post_id)) { return$post_id; } foreach($meta_fieldsas$field) { // get the current value $old = get_post_meta($post_id, $field['id'], true); // get the new value $new = $_POST[$field['id']]; // update if thereâs a new value if($new && $new != $old) { update_post_meta($post_id, $field['id'], $new); // delete if the new value is empty } elseif ('' == $new && $old) { delete_post_meta($post_id, $field['id'], $old); } } }
38. Output the Data Using the functions we discussed before, we can now use this data in our template.
39. The Bad and the Ugly The Bad: $url = get_post_meta($post->ID, âurl', true); if ($my_key != '') echo'<a href="' . $my_key . 'â>Visit Site →</p>'; The Ugly: the_meta();
42. Why is this useful? You can create an easy way to input additional data that can be used in a variety of ways in your theme.
43. Example Usages Social Networks The user can insert their twitter, facebook, etc. handles once The template outputs these in the necessary places of the theme On/Off switches Show secondary navigation? Are you available for live chat? Use Breadcrumbs? Custom layout options Two column featured posts 3 Category Posts Featured slider with recent posts listed below
44. Create Your Own This is almost as simple as adding a custom meta box, except the data isnât limited to just a post, it can be used site wide.
45. add_theme_page() add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function); $page_title - the text to be displayed in the title tags of the page when the menu is selected $menu_title - the text to be used for the menu $capability - the capability required for this menu to be displayed to the user $menu_slug - the slug name to refer to this menu by (should be unique for this menu) $function - the function to be called to output the content for this page add_action( 'admin_menu', 'theme_options_add_page'); functiontheme_options_add_page() { add_theme_page( 'Theme Options','Theme Options','edit_others_posts','theme_options', 'theme_options_do_page'); }
48. Callback function theme_options_do_page() { global$fields; if(!isset( $_REQUEST['settings-updated'])) $_REQUEST['settings-updated'] = false; // the page heading echo'<div class="wrap">'; screen_icon(); echo'<h2>Theme Options</h2>'; // notifies on load if options were saved if(false!== $_REQUEST['settings-updated']) echo'<div class="updated fade"><p><strong>Options saved</strong></p></div>'; // start form echo'<form method="post" action="options.php">'; settings_fields( 'our_options' ); // get the settings $options = get_option('our_theme_options'); // start a table echo'<table id="options" class="form-table">'; // start a loop through the fields foreach($fields as$field) { // section rows if($field['type'] == 'section') { echo'<tr><td colspan="2"><h3>', $field['label'], '</h3></td></tr>'; } // field rows else{ // start a table row echo'<tr valign="top"><th scope="row">', $field['label'], '</th>', '<td>';
49. Switch Case switch ($field['type']) { // text case'text': echo'<input type="text" name="our_the_options[', $field['id'], ']" id="', $field['id'], '" value="', $meta ? $meta : $field['value'], '" size="30" style="width:97%" /> <br /><span class="desc">', $field['desc'], '</span>'; break; ⊠continue with other field types ⊠} // end switch echo'<td>', '</tr>'; } // end foreach echo'</table>'; // close out the container echo'<p class="submit"><input type="submit" class="button-primary" value="Save Options" /></p></form></div>'; }
50. Save Data function theme_options_validate( $input ) { global$fields; foreach ($fieldsas$field) { switch ($field['type']) { //text case'text': // Say our text option must be safe text with no HTML tags $input[$field['id']] = wp_filter_nohtml_kses( $input[$field['id']] ); break; ⊠continue with other field types ⊠} // end switch } // end foreach return$input; }
52. Output the Data Create a function to call the data from the setting and use it in your templates.
53. Custom Functions // get the value we saved function get_our_options($field) { $options = get_option('our_theme_options'); return$options[$field]; } // print the value function our_options($field) { print get_our_options($field); }