SlideShare a Scribd company logo
1 of 27
Download to read offline
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.



 WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development   3
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
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
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
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
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-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
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
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
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 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
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 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
'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 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
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 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
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
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-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
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




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

 WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development   27

More Related Content

What's hot

Jumping Into WordPress Plugin Programming
Jumping Into WordPress Plugin ProgrammingJumping Into WordPress Plugin Programming
Jumping Into WordPress Plugin ProgrammingDougal Campbell
 
Joomla Custom Fields - the next level
Joomla Custom Fields - the next level Joomla Custom Fields - the next level
Joomla Custom Fields - the next level Hans Kuijpers
 
Architecture | Busy Java Developers Guide to NoSQL | Ted Neward
Architecture | Busy Java Developers Guide to NoSQL | Ted NewardArchitecture | Busy Java Developers Guide to NoSQL | Ted Neward
Architecture | Busy Java Developers Guide to NoSQL | Ted NewardJAX London
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPressNile Flores
 
JD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layoutsJD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layoutsHans Kuijpers
 
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MyOverlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MySteve McMahon
 
JavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeJavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
 
Various Ways of Using WordPress
Various Ways of Using WordPressVarious Ways of Using WordPress
Various Ways of Using WordPressNick La
 
Android | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted NewardAndroid | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted NewardJAX London
 
Writing your Third Plugin
Writing your Third PluginWriting your Third Plugin
Writing your Third PluginJustin Ryan
 
Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1フ乇丂ひ丂
 
Ant - Another Neat Tool
Ant - Another Neat ToolAnt - Another Neat Tool
Ant - Another Neat ToolKanika2885
 
Cartegraph Live HTML, CSS, JavaScript and jQuery Training
Cartegraph Live HTML, CSS, JavaScript and jQuery TrainingCartegraph Live HTML, CSS, JavaScript and jQuery Training
Cartegraph Live HTML, CSS, JavaScript and jQuery TrainingShane Church
 
Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Fabien Potencier
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 

What's hot (19)

Jumping Into WordPress Plugin Programming
Jumping Into WordPress Plugin ProgrammingJumping Into WordPress Plugin Programming
Jumping Into WordPress Plugin Programming
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
Joomla Custom Fields - the next level
Joomla Custom Fields - the next level Joomla Custom Fields - the next level
Joomla Custom Fields - the next level
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
Architecture | Busy Java Developers Guide to NoSQL | Ted Neward
Architecture | Busy Java Developers Guide to NoSQL | Ted NewardArchitecture | Busy Java Developers Guide to NoSQL | Ted Neward
Architecture | Busy Java Developers Guide to NoSQL | Ted Neward
 
HTML5
HTML5HTML5
HTML5
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPress
 
JD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layoutsJD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layouts
 
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MyOverlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
 
JavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeJavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your code
 
Various Ways of Using WordPress
Various Ways of Using WordPressVarious Ways of Using WordPress
Various Ways of Using WordPress
 
Android | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted NewardAndroid | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted Neward
 
Writing your Third Plugin
Writing your Third PluginWriting your Third Plugin
Writing your Third Plugin
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1
 
Ant - Another Neat Tool
Ant - Another Neat ToolAnt - Another Neat Tool
Ant - Another Neat Tool
 
Cartegraph Live HTML, CSS, JavaScript and jQuery Training
Cartegraph Live HTML, CSS, JavaScript and jQuery TrainingCartegraph Live HTML, CSS, JavaScript and jQuery Training
Cartegraph Live HTML, CSS, JavaScript and jQuery Training
 
Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 

Similar to Wordcamp abq cf-cpt

HTML5 Up and Running
HTML5 Up and RunningHTML5 Up and Running
HTML5 Up and RunningCodemotion
 
WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...Denise Williams
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1Yoav Farhi
 
Make Meta Boxes Great Again
Make Meta Boxes Great AgainMake Meta Boxes Great Again
Make Meta Boxes Great AgainLinchpin
 
WordPress Internationalization and Localization - WordPress Translation Day 3...
WordPress Internationalization and Localization - WordPress Translation Day 3...WordPress Internationalization and Localization - WordPress Translation Day 3...
WordPress Internationalization and Localization - WordPress Translation Day 3...WordPress Trivandrum
 
Engage - Expanding XPages with Bootstrap Plugins for ultimate usability
Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityEngage - Expanding XPages with Bootstrap Plugins for ultimate usability
Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityJohnny Oldenburger
 
Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks Aimee Maree Forsstrom
 
Make Meta Boxes Great Again
Make Meta Boxes Great AgainMake Meta Boxes Great Again
Make Meta Boxes Great AgainNate Allen
 
Geo prompt dashboard
Geo prompt dashboardGeo prompt dashboard
Geo prompt dashboardAmit Sharma
 
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013Jonny Allbut
 
Customer FX Technical Reference Sheet
Customer FX Technical Reference SheetCustomer FX Technical Reference Sheet
Customer FX Technical Reference SheetGoodCustomers
 
5a329780735625624 ch10
5a329780735625624 ch105a329780735625624 ch10
5a329780735625624 ch10harkesh singh
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAAiman Hud
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
Obiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardObiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardAmit Sharma
 
Obiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardObiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardAmit Sharma
 
Obiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardObiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardAmit Sharma
 

Similar to Wordcamp abq cf-cpt (20)

HTML5 Up and Running
HTML5 Up and RunningHTML5 Up and Running
HTML5 Up and Running
 
os-php-wiki5-a4
os-php-wiki5-a4os-php-wiki5-a4
os-php-wiki5-a4
 
os-php-wiki5-a4
os-php-wiki5-a4os-php-wiki5-a4
os-php-wiki5-a4
 
WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
 
Make Meta Boxes Great Again
Make Meta Boxes Great AgainMake Meta Boxes Great Again
Make Meta Boxes Great Again
 
WordPress Internationalization and Localization - WordPress Translation Day 3...
WordPress Internationalization and Localization - WordPress Translation Day 3...WordPress Internationalization and Localization - WordPress Translation Day 3...
WordPress Internationalization and Localization - WordPress Translation Day 3...
 
Engage - Expanding XPages with Bootstrap Plugins for ultimate usability
Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityEngage - Expanding XPages with Bootstrap Plugins for ultimate usability
Engage - Expanding XPages with Bootstrap Plugins for ultimate usability
 
Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks
 
Make Meta Boxes Great Again
Make Meta Boxes Great AgainMake Meta Boxes Great Again
Make Meta Boxes Great Again
 
Geo prompt dashboard
Geo prompt dashboardGeo prompt dashboard
Geo prompt dashboard
 
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
 
Editor kiss
Editor kissEditor kiss
Editor kiss
 
Customer FX Technical Reference Sheet
Customer FX Technical Reference SheetCustomer FX Technical Reference Sheet
Customer FX Technical Reference Sheet
 
5a329780735625624 ch10
5a329780735625624 ch105a329780735625624 ch10
5a329780735625624 ch10
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
Obiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardObiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboard
 
Obiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardObiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboard
 
Obiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboardObiee11g building-brand-analysis-dashboard
Obiee11g building-brand-analysis-dashboard
 

Recently uploaded

ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 

Recently uploaded (20)

ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 

Wordcamp abq cf-cpt

  • 1. 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
  • 2. 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
  • 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
  • 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. 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
  • 19. WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 19
  • 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. 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
  • 27. Questions? ? ? ? ? ? ? WordCamp Albuquerque 2011 | Ray Gulick, Evolution Web Development 27