0
Bui ld a             xible              l, fle    Spow      erfuC Mwithc              field      custom ypes  ustom  post ...
Ray Gulickprincipal/creative director/designer/developer/trash emptierEvolution Web DevelopmentSanta Fe, NMwww.evowebdev.c...
Opinion based on observation:The best content management system requiresas little styling by end-users as possible,enablin...
How do we make it as simple and easyas possible for end-users?1. Custom Fields2. Custom Post Types3. Simplify TinyMCE Edit...
What about loss of “design flexibility”for the end-user?No underlined text? No red fonts to make aheading “really stand ou...
What are custom fields?WordPress has standard fields, with keys such as:the_titlethe_contentTemplates display the values o...
Custom fields are fields you defineand display on templates using yourown tags.You might create some custom fields with th...
The values for these custom fields might be        displayed on the template with conditional code:<?php   $pix = get_post...
If there is a value for each of the custom fields,         this HTML is rendered:<div class="pagepix">   <img src="/wp-con...
Custom fields are great!1. Allow faster, simplified website updates for   end-users2. Allow designer more control of look ...
The problem with custom fields forend-users is the user interface                      1. Field keys listed               ...
Solution: grouping related fields in ametabox using More Fields plugin                                                    ...
More Fields allows                                       you to select post                                       types in...
There are lots ofoptions for whatkind of field appearsin the metabox fora particular customfield key.        WordCamp Albu...
What are Custom Post Types?WordPress comes with two standard post types,which we know as a posts and pages.When defining a...
With the addition of about 30 lines of code tothe theme functions.php file, we can add a CPT,like “news” in the following ...
not_found_in_trash => __( No News Items found in                 Trash ),                 ),             menu_icon => get_...
Important stuff to know about CPTs1. CPTs display on a template named   single-cptname.php (i.e., single-news.php)2. This ...
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(        ...
Making CMS enhancements toTinyMCE Editor*1. Arrange editor buttons, removing buttons like   underline, font-color, text-al...
2. Select additional settings in   TinyMCE Advanced3. Create/upload editor-style.css (extremely   pared down version of ma...
4. Control block formats, styles, and buttons in           editor, by adding to theme functions file:function fb_change_mc...
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.s...
Learn more:http://codex.wordpress.org/Custom_Fieldshttp://wordpress.org/extend/plugins/more-fields/http://codex.wordpress....
Questions?? ? ? ? ? ? WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development   27
Upcoming SlideShare
Loading in...5
×

Wordcamp abq cf-cpt

1,687

Published on

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

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,687
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Wordcamp abq cf-cpt"

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 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. 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. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. More Fields allows you to select post types in which the metabox appears.WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 13
  14. 14. There are lots ofoptions for whatkind of field appearsin the metabox fora particular customfield key. WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 14
  15. 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. 16. 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
  17. 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. 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 18
  19. 19. WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 19
  20. 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. 21. 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
  22. 22. 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
  23. 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. 24. 5. Final editor looks something like this: WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 24
  25. 25. 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
  26. 26. 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
  27. 27. Questions?? ? ? ? ? ? WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 27
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×