maintain the website · 2012. 8. 27. · 1. custom fields 2. custom post types 3. enhance tinymce...

WordCamp Albuquerque 2012 | Ray Gulick, Evolution Web Development

CMSmaking it beautiful for the

people who maintain the

company website

Building a Better

WordCamp Albuquerque 2012 | Ray Gulick, Evolution Web Development 2

Ray Gulickprincipal/creative director/designer/developer/trash emptier

Evolution Web Development Santa Fe, New Mexico www.evowebdev.com www.raygulick.com

@evoweb #wcabq


Who are CMS users?For the purposes of this presentation, we’re talking about employees of companies or professional organizations (might be owner/executive director).

Generally, updating the website is not their highest priority: they have more important things on their to-do list.


Opinion #1 based on observation:The most useful CMS 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.(The WordPress editor, by itself, does not constitute a CMS)


Opinion #2 based on observation:CMS users have more important things to do than figure out a confusing, difficult-to-use CMS.(A simple, easy-to-use CMS is a beautiful thing.)


Law of Inverse Proportion: CMS Flexibility vs. EfficiencyThe greater the flexibility offered by a CMS, the less efficiency.

The greater the efficiency, the less flexibility.

Find the proper balance for each client.


How do we make it as simple and easy as possible for end-users?1. Custom Fields

2. Custom Post Types

3. Enhance TinyMCE Editor: remove “bad stuff”, add necessary classes, add editor style sheet so text in editor matches text on websiteIdeally, 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 CMS user? No underlined text? No red fonts to make a heading “really stand out?”

Nope.

In a CMS for a business/professional organization, that’s a “good thing.” Design happens before CMS user gets there; CMS enforces site design and eliminates waste of time fiddling with style.


What are custom fields?WordPress has standard fields, with keys such as:the_titlethe_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

Note: example code which follows assumes use of Advanced Custom Fields plugin to create/organize custom fields.


The values for these custom fields might be displayed on the template with conditional code:

<?php $pix = get_field($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>'; } ?> Req’d for ACF


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*/.pagepix p {font-size:12px; color:#666; margin:3px 0;}

which leads us to:


The most important thing about custom fields:*

Custom fields can add content into “pre-formatted” areas. There is no need for the CMS user to be concerned with style or for the web designer to be concerned that the website is going to look like &@!? two weeks after launch.

*somewhat biased opinion


Custom fields are great!1. Allow faster, simpler website updates for

CMS 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 CMS users is the user interface.

1. Field keys listed alphabetically; difficult to group related fields

2. No clues about what kind of info we want for the value


Solution: Advanced Custom Fields1. User-friendly

metabox title

2. User-friendly field label (no field key)

3. Hints above entry field


Control where ACF metaboxes appear, and to whom they appear.

Place metaboxes on edit screens based on Post Type (incl. Custom Post Types), Page Template, Page Parent, Taxonomies, User Role, and other criteria.


Lots of options for field type, then further customization of selected field type.

Field Type Options


What are Custom Post Types?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 ACF plugin)

• Create templates specifically for custom post type


With the addition of about 30 lines of code to the theme’s 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 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 placed on a “listings” page template.

4. The “slug” cannot be the same as the CPT name.


page_newslist.php (page template)


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>' ); ?> <p class="newsdate"><?php the_time('M j, Y'); ?> –</p> <?php the_excerpt(); ?> </div> <?php endwhile; else : echo '<p>No news is good news!</p>' endif; if(function_exists('wp_pagenavi')) wp_pagenavi(); ?> <?php wp_reset_query(); ?>


single-news.php


<article class="pagecontent"> <h1><?php the_title(); ?></h1> <?php get_template_part( 'pix' );?> <p class="newsdate"><?php the_time('M j, Y'); ?> –</p> <?php the_content('Read more»'); ?></article>

Display CPT Content on News Single Template


Make CMS enhancements to TinyMCE Editor with the TinyMCE Advanced plugin1. Arrange editor buttons, removing buttons like

underline, font-color, text-alignment, etc.


2. Select additional settings in TinyMCE Advanced


3. 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');


Create/enable stylesheet for editor so text in editor matches text on website1. Add enabling code to functions.php

// Add custom stylesheet to TinyMCE editor if ( ! function_exists('tdav_css') ) { function tdav_css($wp) { $wp .= ',' . get_bloginfo('stylesheet_directory') . '/editor-style.css'; return $wp; } } add_filter( 'mce_css', 'tdav_css' );


2. Create editor-style.css from style.css:a. remove theme info at top of editor

stylesheetb. remove all styles that have to do with

positioning theme elements outside the content area

c. make sure to include CSS in editor stylesheet for all block level elements (h2, h3, p, li, etc,) and classes used in content areas of various templates


Final editor looks something like this:


Let’s look at some real-world applications of custom fields and custom post types:http://www.nmvets.com/

http://www.sstp.org

http://nmbio.org


Learn more:http://codex.wordpress.org/Custom_Fields

http://wordpress.org/extend/plugins/advanced-custom-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??? ??? ?

maintain the website · 2012. 8. 27. · 1. custom fields 2. custom post types 3. enhance tinymce...

Documents