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
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
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 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