WORDPRESS CUSTOM POSTS

USING POST META BOXES

CHICAGO NORTHSIDE WORDPRESS MEETUP,2/4/14

This presentation at:http://bigwdesign.com/presentations/wp-custpost-coded.pdf

WHAT IS A CUSTOM POST?

NOTHING BUT AN ENTRY IN THE WP_POSTSTABLE WITH A SPECIAL POST_TYPE TODISTINGUISH IT FROM OTHER POST TYPES.

And in our case, some associated wp_postmeta entries.

WHY USE CUSTOM POSTS?

You need a post type other than post or page.

Structured way for editors/users to consistently enter data.

Format posts consistently using a custom template.

You'd like to classify and access posts using some custom taxonomy.

EXAMPLE: GRILLS, INC.

Wants to implement a special product catalog site.

4 products now; 400 in a few years.

Site admin could create HTML and copy it indefinitely.

Prone to error, requires good HTML skills, hard for users.

Need simple, easy-to-use, structured input method, and a commonlook.

Decision: Custom Post and template.

CODING APPROACH

Use of meta boxes for custom data ... as opposed to custom fields.(Ease of creation vs. performance?)

It all ends up in wp_postmeta anyhow

Use add_action hooks into Wordpress: Hook a function on to aspecific WP action.

Use add_filters: Hook a function to a specific filter (runbefore/modify a WP action).

PRESENTATION CODING TASKS

New plugin directory in wp-content/plugins (e.g., custom_grills)

A grills.php plugin file - nothing but a collection of functions

Admin post metaboxes to enter and save structured data

A single post template to display posts, single-grills.php

A hook into categories

Multi post template for categories, category-grills.php

BASIC PLUGIN STRUCTURE

Plugin Header - looks like comments

An add_action hook to run custom post registration function

Function to run register_post_type

Various function parameters

<?php/*Plugin Name: GrillsDescription: Create and maintain custom grill posts.Version: 1.0Author: Terry B.*/add_action( 'init', 'create_grill'); // executes create_grill whenever any page is generatedfunction create_grill() { register_post_type( 'grills', // tell WP we have this new post type // etc - parameters here

COMPLETE CUSTOM POST TYPE CREATION

<?php/* Plugin Name: Grills Description: Create and maintain custom grill posts. Version: 1.0 Author: Terry B.*/

add_action( 'init', 'create_grill'); function create_grill() { register_post_type( 'grills', array( 'labels' => array( 'name' => 'Grills', 'post type general name', 'singular_name' => 'Grills', 'post type singular name', 'add_new' => 'Add New', 'add_new_item' => 'Add New Grill', 'edit_item' => 'Edit Grill', 'new_item' => 'New Grill', 'all_items' => 'All Grills', 'view_item' => 'View Grill', 'search_items' => 'Search Grills', 'not_found' => 'No grills found', 'not_found_in_trash' => 'No grills in the Trash', 'parent_item_colon' => '', 'parent' => 'Grills' ), 'show_in_nav_menus' => TRUE, 'hierarchical' => true, 'description' => 'Holds our products and product specific data', 'public' => true, 'menu_position' => 5, 'supports' => array( 'title', 'editor', 'page-attributes' ), 'has_archive' => true ) );} // end function?>

DEMO 1. BASIC CUSTOM POST PLUGIN

Create the directory

Create grills.php

Add the basic grills.php code to wp-plugins

Add & activate plugin in WP back end

Create a custom post for grill #1, & test

Outcome: That's somewhat underwhelming.

ADD META BOXES TO BACK END

1. Admin_init function to add meta boxes to admin2. Add function & HTML to display meta boxes3. Add action to save contents of meta boxes

ADDING META BOXES

1. ADMIN_INIT FUNCTION TO ADD META BOXES

// action will fire on init of adminadd_action( 'admin_init', 'my_admin' );function my_admin() { add_meta_box( 'grill_meta_box', 'Grill Details', 'display_custom_meta_box', 'grills', 'normal', 'high' );}

ADDING META BOXES

2. ADD FUNCTION AND HTML TO DISPLAYMETA BOXES

// function will display meta-boxes on back endfunction display_custom_meta_box( $grill ) { // Retrieve various fields based on ID $custom_series = esc_html( get_post_meta( $grill->ID, 'series_name', true ) ); $custom_model = esc_html( get_post_meta( $grill->ID, 'model_name', true ) ); //etc

<table> <tr> <td style="width: 100%">Series</td> <td><input type="text" size="80" name="series_name" value="<?php echo $custom_series; ?>" </tr> <tr> <td style="width: 100%">Model</td> <td><input type="text" size="80" name="model_name" value="<?php echo $custom_model; ?>" </tr>

COMPLETE ADMIN METABOX FUNCTION

// function will display meta-boxes on back endfunction display_custom_meta_box( $grill ) { // Retrieve various fileds based on ID $custom_series = esc_html( get_post_meta( $grill->ID, 'series_name', true ) ); $custom_model = esc_html( get_post_meta( $grill->ID, 'model_name', true ) ); $titlegraphic = esc_html( get_post_meta( $grill->ID, 'titlegraphic', true ) ); $custom_image = esc_html( get_post_meta( $grill->ID, 'custom_image', true ) ); $image_caption = esc_html( get_post_meta( $grill->ID, 'image_caption', true ) ); $cooking_surface = esc_html( get_post_meta( $grill->ID, 'cooking_surface', true ) ); $btu_primary = esc_html( get_post_meta( $grill->ID, 'btu_primary', true ) ); $btu_secondary = esc_html( get_post_meta( $grill->ID, 'btu_secondary', true ) ); $cut_out = esc_html( get_post_meta( $grill->ID, 'cut_out', true ) ); $sideburner = esc_html( get_post_meta( $grill->ID, 'sideburner', true ) ); $excerpt = esc_html( get_post_meta( $grill->ID, 'excerpt', true ) ); ?> <table> <tr> <td style="width: 100%">Series</td> <td><input type="text" size="80" name="series_name" value="<?php echo $custom_series; ?>" </tr> <tr> <td style="width: 100%">Model</td> <td><input type="text" size="80" name="model_name" value="<?php echo $custom_model; ?>" </tr> <tr> <td style="width: 100%">Title Graphic</td> <td><input type="text" size="80" name="titlegraphic" value="<?php echo $titlegraphic; ?>" </tr> <tr>

ADDING META BOXES

3. ADD ACTION TO SAVE METABOXES/FIELDS

// function will add data to wp_postmeta on save_post, IF post_type = grillsadd_action( 'save_post', 'add_grill_fields', 10, 2 ); // priority & argsfunction add_grill_fields( $grill_id, $grill ) { // Check post type for grills if ( $grill->post_type == 'grills' ) { // Store data in post meta table if present in post data if ( isset( $_POST['series_name'] ) && $_POST['series_name'] != '' ) { update_post_meta( $grill_id, 'series_name', $_POST['series_name'] ); } // etc

COMPLETE META BOX/FIELD SAVEFUNCTION

// add save_post action to add grill fields into post_metaadd_action( 'save_post', 'add_grill_fields', 10, 2 );function add_grill_fields( $grill_id, $grill ) { // Check post type for grills if ( $grill->post_type == 'grills' ) { // Store data in post meta table if present in post data if ( isset( $_POST['series_name'] ) && $_POST['series_name'] != '' ) { update_post_meta( $grill_id, 'series_name', $_POST['series_name'] ); } if ( isset( $_POST['model_name'] ) && $_POST['model_name'] != '' ) { update_post_meta( $grill_id, 'model_name', $_POST['model_name'] ); } if ( isset( $_POST['titlegraphic'] ) && $_POST['titlegraphic'] != '' ) { update_post_meta( $grill_id, 'titlegraphic', $_POST['titlegraphic'] ); } if ( isset( $_POST['custom_image'] ) && $_POST['custom_image'] != '' ) { update_post_meta( $grill_id, 'custom_image', $_POST['custom_image'] ); } if ( isset( $_POST['image_caption'] ) && $_POST['image_caption'] != '' ) { update_post_meta( $grill_id, 'image_caption', $_POST['image_caption'] ); } if ( isset( $_POST['cooking_surface'] ) && $_POST['cooking_surface'] != '' ) { update_post_meta( $grill_id, 'cooking_surface', $_POST['cooking_surface'] ); } if ( isset( $_POST['btu_primary'] ) && $_POST['btu_primary'] != '' ) { update_post_meta( $grill_id, 'btu_primary', $_POST['btu_primary'] ); } if ( isset( $_POST['btu_secondary'] ) && $_POST['btu_secondary'] != '' ) { update_post_meta( $grill_id, 'btu_secondary', $_POST['btu_secondary'] ); } if ( isset( $_POST['cut_out'] ) && $_POST['cut_out'] != '' ) { update_post_meta( $grill_id, 'cut_out', $_POST['cut_out'] ); } if ( isset( $_POST['sideburner'] ) && $_POST['sideburner'] != '' ) { update_post_meta( $grill_id, 'sideburner', $_POST['sideburner'] ); } if ( isset( $_POST['excerpt'] ) && $_POST['excerpt'] != '' ) { update_post_meta( $grill_id, 'excerpt', $_POST['excerpt'] ); } }}

DEMO 2. METABOXES

Add the three Meta Box functions to grills.php

Add some data to grill #1

Create grill #2 and add data to it as well

Outcome: Metaboxes added to back end, and we are saving custompost data

CUSTOM SINGLE TEMPLATE

1. Add action to register special style sheet2. Add filter to use special template3. Create single item template

CREATING CUSTOM SINGLE TEMPLATE

1. ADD ACTION TO REGISTER SPECIAL STYLESHEET

// register the css we are going to use with our custom templateadd_action( 'wp_enqueue_scripts', 'register_grill_styles' );function register_grill_styles() { wp_register_style( 'custom_grills', plugins_url( '/custom_grills/css/grill-style.css' ) ); wp_enqueue_style( 'custom_grills' );}

CREATING CUSTOM SINGLE TEMPLATE

2. ADD FILTER TO USE SPECIAL TEMPLATE

// force use of dedicated templateadd_filter( 'single_template', 'get_custom_post_type_template' );function get_custom_post_type_template($single_template) { global $post;

if ($post->post_type == 'grills') { $single_template = dirname( __FILE__ ) . '/single-grills.php'; } // echo "$single_template"; // die(); return $single_template;}

CREATING CUSTOM SINGLE TEMPLATE

3. CREATE SINGLE ITEM TEMPLATE - COPY &MODIFY THEME'S SINGLE.PHP

(JUST LIKE BUILDING A STANDARD WORDPRESSTEMPLATE, BUT WITH YOUR CUSTOM LAYOUT ANDDATA)

<?php

get_header(); ?>

<div id="primary"> <div id="content" role="main"> <?php // $mypost = array( 'post_type' => 'custom_products', ); // $loop = new WP_Query( $mypost ); ?> <?php // while ( $loop->have_posts() ) : $loop->the_post(); while ( have_posts() ) : the_post(); ?>// etc

DEMO 3. CUSTOM TEMPLATE

Add the code to grills.php, create single-grills.php

Note that our custom post now shows in a custom template

MIGHT WANT TO VIEW MORE THAN ONEPRODUCT FROM MENU SELECTION

Create a Custom taxonomy (another day)

Add custom post type to existing Category system

ADDING A CUSTOM POST TYPE TO EXISTINGCATEGORY SYSTEM

1. Modify register_post to include taxonomy Category2. Add pre_get_posts action that will add our post type to main

query3. Create category-grills.php template to display multiple posts

ADDING CUSTOM POST TYPE TOCATEGORIES

1. MODIFY REGISTER_POST TO INCLUDETAXONOMY CATEGORY

ADD ONE LINE (TAXONOMIES) TO BOTTOM OFFUNCTION CREATE_GRILL

// etc etc 'menu_position' => 5, 'supports' => array( 'title', 'editor', 'page-attributes' ), 'has_archive' => true, 'taxonomies' => array('category') )

ADDING CUSTOM POST TYPE TOCATEGORIES

2. ADD PRE_GET_POSTS ACTION THAT WILLADD POST TYPE TO MAIN QUERY

NEW FUNCTION ADDED TO GRILLS.PHP

// Show posts of 'post', 'page' and 'grills' post types on home pageadd_action( 'pre_get_posts', 'add_grill_post_type_to_query' );

function add_grill_post_type_to_query( $query ) { if ( $query->is_main_query() ) $query->set( 'post_type', array( 'post', 'page', 'grills' ) ); return $query;}

ADDING CUSTOM POST TYPE TOCATEGORIES

3. CREATE CATEGORY-GRILLS.PHP TEMPLATETO DISPLAY MULTIPLE POSTS

Copy category.php from main template to our plugin dir, and modifyas needed

Add new filter on archive_template to force use of our archivetemplate

Add some Wordpress categories in backend, assign posts, make menuitems!

// force use of dedicated category templateadd_filter( 'category_template', 'get_grills_category_template' );function get_grills_category_template($category_template) { global $post; if ($post->post_type == 'grills') { $category_template = dirname( __FILE__ ) . '/category-grills.php'; } return $category_template;}

DEMO 4. CUSTOM POSTS BY CATEGORY

Modify main function to add taxonomy

Add function to include grills in posts query

Add function to force use of category-grills template

Add some special grill categories to back end and assignposts

Menu items to those categories

Outcome: Menu items display categories of custom posts

THE END

Presentation originally developed from tutorials at:

See also Wordpress codex on post_types (has many other links):

This presentation:

http://wp.tutsplus.com/tutorials/plugins/a-guide-to-wordpress-custom-post-types-creation-display-and-meta-boxes/http://wp.tutsplus.com/tutorials/plugins/a-guide-to-wordpress-custom-post-types-taxonomies-admin-columns-filters-and-archives/

http://codex.wordpress.org/Post_Types

http://bigwdesign.com/presentations/wp-custpost-coded.pdf