WordCamp ABQ presentation on WordPress Custom Post Types, Custom Fields and altering TinyMCE Editor to create a powerful flexible CMS.

1. Bui ld a xible
l, fle
S
pow erfu
C M
with
c
field
custom ypes
ustom post t
s and
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development

2. Ray Gulick
principal/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 2

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 3

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 classes
Ideally, 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 4

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 5

6. What are custom fields?
WordPress has standard fields, with keys such as:
the_title
the_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 6

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 7

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 8

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 9

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 10

11. The problem with custom fields for
end-users is the user interface
1. Field keys listed 2. No clues about
alphabetically; what kind of info
difficult to group we want for the
related fields value
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 11

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 12

13. More Fields allows
you to select post
types in which the
metabox appears.
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 13

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 14

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 15

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 16

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 17

18. Important stuff to know about CPTs
1. 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 18

19. WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 19

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>&raquo;</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 20

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 21

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 22

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 23

24. 5. Final editor looks something like this:
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 24

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 25

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 26

27. Questions?
? ? ? ? ? ?
WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 27