Wordcamp abq cf-cpt

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

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

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 classes
Ideally, 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_title
the_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 2. No clues about
alphabetically; what kind of info
difficult to group we want for the
related fields 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 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.


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


Wordcamp abq cf-cpt

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Wordcamp abq cf-cpt

Similaire à Wordcamp abq cf-cpt (20)

Dernier

Dernier (20)

Wordcamp abq cf-cpt