• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wordcamp abq cf-cpt
 

Wordcamp abq cf-cpt

on

  • 1,841 views

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

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

Statistics

Views

Total Views
1,841
Views on SlideShare
1,141
Embed Views
700

Actions

Likes
1
Downloads
2
Comments
0

5 Embeds 700

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Wordcamp abq cf-cpt Wordcamp abq cf-cpt Presentation Transcript

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