Wordcamp abq cf-cpt

Bui ld a xible l, fle Spow erfuC Mwithc field custom ypes ustom post t s and WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development

Ray Gulickprincipal/creative director/designer/developer/trash emptierEvolution Web DevelopmentSanta Fe, NMwww.evowebdev.comwww.raygulick.com WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 2

Opinion based on observation:The best content management system requiresas little styling by end-users as possible,enabling them to make website updates quicklyand easily and go on to more important things.Why?CMS users update the company websitebecause it’s required as part of their job, notbecause they love websites or WordPress. WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 3

How do we make it as simple and easyas possible for end-users?1. Custom Fields2. Custom Post Types3. 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

What about loss of “design flexibility”for the end-user?No underlined text? No red fonts to make aheading “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

What are custom fields?WordPress has standard fields, with keys such as:the_titlethe_contentTemplates display the values of the fields usingthe following tags:<?php the_title(); ?><?php the_content(); ?> WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 6

Custom fields are fields you defineand display on templates using yourown tags.You might create some custom fields with thesecustom field keys:page-pixpagepix-altpagepix-caption WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 7

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

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

Custom fields are great!1. Allow faster, simplified website updates for end-users2. Allow designer more control of look and feel and more consistency in presentation3. But [big sigh]... WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 10

The problem with custom fields forend-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

Solution: grouping related fields in ametabox 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

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

There are lots ofoptions for whatkind of field appearsin the metabox fora particular customfield key. WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 14

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

With the addition of about 30 lines of code tothe 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

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

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 18

WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 19

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

Making CMS enhancements toTinyMCE 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

2. Select additional settings in TinyMCE Advanced3. Create/upload editor-style.css (extremely pared down version of main stylesheet) WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 22

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

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

Let’s look at some real-worldapplications of custom fields andcustom post types:http://blogdev.evohost-vps.comhttp://www.sstp.org/2011http://sfperfexchange.evohost-vps.com WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 25

Learn more:http://codex.wordpress.org/Custom_Fieldshttp://wordpress.org/extend/plugins/more-fields/http://codex.wordpress.org/Function_Reference/register_post_typehttp://codex.wordpress.org/Function_Reference/query_postshttp://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpresshttp://wordpress.stackexchange.com WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 26

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

http://www.evowebdev.com	660
http://abqwp.com	31
http://evowebdev.evohost-vps.com	4
http://translate.googleusercontent.com	1
http://ranksit.com	1

Wordcamp abq cf-cpt

by Evolution Web Development

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 697

Statistics

Wordcamp abq cf-cpt Presentation Transcript