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
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 3
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.
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 4
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.
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 5
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...
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 6
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(); ?>
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 7
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
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 8
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>'; } ?>
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 9
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;}
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 10
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]...
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 11
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
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 12
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
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 13
More Fields allows you to select post types in which the metabox appears.
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 14
There are lots of options for what kind of field appears in the metabox for a particular custom field key.
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 15
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)
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 16
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' ),
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 17
'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();}
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 18
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.
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 19
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 20
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(); ?>
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 21
Making CMS enhancements to TinyMCE Editor*1. Arrange editor buttons, removing buttons like
underline, font-color, text-alignment, etc.
*Install “TinyMCE Advanced” plugin
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 22
2. Select additional settings in TinyMCE Advanced
3. Create/upload editor-style.css (extremely pared down version of main stylesheet)
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 23
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');
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 24
5. Final editor looks something like this:
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 25
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
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 26
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
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 27
Questions??? ??? ?