Wordcamp abq cf-cpt

WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development

powerful, flexible

CMSwith custom fields and

custom post types

Build a

WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 2

Ray Gulickprincipal/creative director/designer/developer/trash emptier

Evolution Web Development Santa Fe, NM www.evowebdev.com www.raygulick.com


Opinion based on observation:The best content management system requires as little styling by end-users as possible, enabling them to make website updates quickly and easily and go on to more important things.

Why?CMS users update the company website because it’s required as part of their job, not because they love websites or WordPress.


How do we make it as simple and easy as possible for end-users?1. Custom Fields

2. Custom Post Types

3. Simplify TinyMCE Editor: remove “bad stuff” and add necessary classesIdeally, in the text editor, you’d have only paragraphs, list items, and subheadings. Without having to add classes to any of them.


What about loss of “design flexibility” for the end-user? No underlined text? No red fonts to make a heading “really stand out?”

Nope.

In the context of a CMS, that’s a “good thing.” Design happens before end-user gets there; CMS enforces site design.But end-users are very creative...


What are custom fields?WordPress has standard fields, with keys such as:the_titlethe_content

Templates display the values of the fields using the following tags:<?php the_title(); ?><?php the_content(); ?>


Custom fields are fields you define and display on templates using your own tags.You might create some custom fields with these custom field keys:page-pix pagepix-alt pagepix-caption


The values for these custom fields might be displayed on the template with conditional code:

<?php $pix = get_post_meta($post->ID, 'page-pix', true); $alt = get_post_meta($post->ID, 'pagepix-alt', true); $caption = get_post_meta($post->ID, 'pagepix-caption', true); if ($pix) { echo '<div class="pagepix">'; echo '<img src="'.$pix.'" alt="'.$alt.'" />'; if ($caption) { echo '<p>'.$caption.'</p>'; } echo '</div>'; } ?>


If there is a value for each of the custom fields, this HTML is rendered:

<div class="pagepix"> <img src="/wp-content/uploads/imagename.jpg" alt="image description" /> <p>This is the caption for this image</p></div>

It might be styled with this CSS:.pagepix {width:338px; float:right; margin:.5em 0 .2em 18px;}.pagepix img {width:338px !important;} //fascist designer code.pagepix p {font-size:12px; color:#666; margin:3px 0;}


Custom fields are great!1. Allow faster, simplified website updates for

end-users

2. Allow designer more control of look and feel and more consistency in presentation

3. But [big sigh]...


The problem with custom fields for end-users is the user interface

1. Field keys listed alphabetically; difficult to group related fields

2. No clues about what kind of info we want for the value


Solution: grouping related fields in a metabox using More Fields plugin

1. User-friendly box title

2. User-friendly field label (field key does not appear)

3. Hints appear below entry field


More Fields allows you to select post types in which the metabox appears.


There are lots of options for what kind of field appears in the metabox for a particular custom field key.


What are Custom Post Types?WordPress comes with two standard post types, which we know as a posts and pages.

When defining a custom post type, you can:

• Specify which standard metaboxes appear on the post type create/edit screens (title, editor, excerpt)

• Create custom fields specifically for the post type, grouped in metaboxes that only appear on the post type add/edit screen (using the “More Fields” plugin)


With the addition of about 30 lines of code to the theme functions.php file, we can add a CPT, like “news” in the following example:add_action( 'init', 'create_my_post_types' );function create_my_post_types() {register_post_type('news', array( 'labels' => array( 'name' => __( 'News Items' ), 'singular_name' => __( 'News Item' ), 'add_new' => __( 'Add New' ), 'add_new_item' => __( 'Add News Item' ), 'edit' => __( 'Edit' ), 'edit_item' => __( 'Edit News Item' ), 'new_item' => __( 'New News Item' ), 'view' => __( 'View News Items' ), 'view_item' => __( 'View News Item' ), 'search_items' => __( 'Search News Items' ), 'not_found' => __( 'No News Items found' ),


'not_found_in_trash' => __( 'No News Items found in Trash' ), ), 'menu_icon' => get_stylesheet_directory_uri() . '/images/newspaper.png', 'public' => true, 'show_ui' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'capability_type' => 'post', 'hierarchical' => false, 'rewrite' => array( 'slug' => 'news-item', 'with_front' => false ), 'query_var' => true, 'supports' => array( 'title', 'editor', 'excerpt' ) ) ); flush_rewrite_rules();}


Important stuff to know about CPTs1. CPTs display on a template named

single-cptname.php (i.e., single-news.php)

2. This template must contain appropriate code to display the custom fields you want to display in the CPT.

3. CPT listings are created with post type queries that placed on a “listings” page template.

4. The “slug” cannot be the same as the CPT name.



Custom Post Type Query<?php $paged = ( get_query_var('paged')) ? get_query_var('paged') : 1; query_posts( array( 'post_type' => 'news', 'posts_per_page' => 5, 'paged' => $paged )); if (have_posts()) : while (have_posts()) : the_post();?> <div class="excerpt"> <?php the_title( '<h2><a href="'.get_permalink().'">', '</a>»</h2>' ); ?> <?php the_excerpt(); ?> </div> <?php endwhile; else : // No posts endif; if(function_exists('wp_pagenavi')) wp_pagenavi();?> <? wp_reset_query(); ?>


Making CMS enhancements to TinyMCE Editor*1. Arrange editor buttons, removing buttons like

underline, font-color, text-alignment, etc.

*Install “TinyMCE Advanced” plugin


2. Select additional settings in TinyMCE Advanced

3. Create/upload editor-style.css (extremely pared down version of main stylesheet)


4. Control block formats, styles, and buttons in editor, by adding to theme functions file:

function fb_change_mce_buttons( $initArray ) { $initArray['theme_advanced_blockformats'] = 'p, h2 ,h3 ,h4'; $initArray['theme_advanced_styles'] = 'top, small, more'; $initArray['theme_advanced_disable'] = 'underline, justifyfull, justifyleft,justifycenter,justifyright, strikethrough, style, forecolor, backcolor, image, fontselect, fontsizeselect, advhr, styleprops, emotions, media, add_media, add_audio, add_video, add_image'; return $initArray; } add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');


5. Final editor looks something like this:


Let’s look at some real-world applications of custom fields and custom post types:http://blogdev.evohost-vps.com

http://www.sstp.org/2011

http://sfperfexchange.evohost-vps.com


Learn more:http://codex.wordpress.org/Custom_Fields

http://wordpress.org/extend/plugins/more-fields/

http://codex.wordpress.org/Function_Reference/register_post_type

http://codex.wordpress.org/Function_Reference/query_posts

http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress

http://wordpress.stackexchange.com


Questions??? ??? ?