wordcamp abq 2013: making the leap from designer to designer/developer

WordCamp Albuquerque 2013 | Ray Gulick, Evo

Making the leap

from Designer to Designer/Developer

WordCamp Albuquerque 2013 | Ray Gulick, Evo 2

Ray Gulick principal/creative director/designer/developer/trash emptier

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

@evoweb #wcabq


Quote* from famous dead guy

Design is not just how it looks. Design is how it works.Steve Jobs

*Shortened and improved, because that's what designers do.


DESIGN

Visual Design Coding

Coding is part of design.

Just like visual design.


Dammit, Jim! I’m a designer!Coding skills and knowledge you probably already have:1. HTML2. CSS3. Basic first aid


Some fundamental WordPress developer code knowledge* 1. PHP and WordPress Tags2. Custom Fields and putting them

on templates3. Custom Post Types4. WP_Query to manage listings

*Becoming a designer/developer is a process; learn by doing. These will get you started. And probably ruin your life. Or at least an occasional weekend.


PHP is not as painful as it looks.Server side code gets processed on server

<?php ?> opening and closing tags

<?php $note = get_post_meta($post_id, 'note_text', true); if ($note) { echo '<div class="sidebarnote">'; echo '<p>'.$note.'</p>'; echo '</div>'; } ?>

function cf keysingle value?

meta valuepost ID

Syntax

Rules of

language

usage


WordPress TagsPHP, but simpler, sort of; using functions that are part of core, saving a lot of coding for WP designer/developers.

<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>

<h1><?php the_title(); ?></h1> <?php the_content('Read more'); ?>

<?php endwhile; ?> <?php endif; ?>


What are Custom Fields?WordPress has standard fields, 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:pagepix pagepix_alt pagepix_caption

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


Custom fields displayed on template with conditional code:<?php $pix = get_field('pagepix'); $alt = get_field('pagepix_alt'); $caption = get_field('pagepix_caption'); if (($pix) && ($alt)) { echo '<div class="pagepix">'; echo '<img src="'.$pix.'" alt="'.$alt.'" />'; if ($caption) { echo '<p>'.$caption.'</p>'; } echo '</div>'; } ?>

Method

used by

ACF plugin


If there is a value for each of the custom fields, this HTML is rendered:

<div class="pagepix"> <img src="http://www.domain.com/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;} .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. Means there is no need for the CMS user to be concerned with style, or for the web designer to be concerned about how the website will look two weeks after launch.

*somewhat biased opinion


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

for CMS users2. Allow designer more control of look

and feel and more consistency in presentation

3. But...


The problem with custom fields is the WordPress 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


Advanced Custom Fields plugin1. 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.

ACF Field Type Options!!!


Why Custom Post Types?With a custom post type, you can: 1. Specify which standard metaboxes appear on

the post type create/edit screens (title, editor, excerpt)

2. Create custom fields specifically for the post type, grouped in metaboxes that only appear on the post type add/edit screen (ACF)

3. Create templates specifically needed for custom post type content


Register CPT in theme’s functions.php file:add_action('init', 'create_custom_post_types'); function create_custom_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'), ),

CPT name


'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(); }

SLUG


Important stuff about CPTs1. The “slug” cannot be the same as the CPT

name.

2. CPTs display on a template named single-cptname.php (i.e., single-news.php)

3. Single template must contain appropriate code to display the custom fields you want to display in the CPT.

4. CPT listings are created with post type queries placed on a “listings” page template.


page_newslist.php (page template)


WP_Query for ‘news’ CPT Listing <?php $paged = ( get_query_var('paged')) ? get_query_var('paged') : 1; $newslist = new WP_Query ( array( 'post_type' => 'news', 'posts_per_page' => 5, 'paged' => $paged )); if ($newslist->have_posts()) : while ($newslist->have_posts()) : $newslist->the_post(); ?> <div class="excerpt"> <?php the_title( '<h2><a href="'.get_permalink().'">', '</a>»</h2>' ); ?> <p class="newsdate"><?php the_time('n/j/y'); ?> –</p> <?php the_excerpt(); ?> </div> <?php endwhile; endif; if(function_exists('wp_pagenavi')) wp_pagenavi( array( 'query' => $newslist ) ); ?>


single-news.php


<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article class="pagecontent"> <h1><?php the_title(); ?></h1> <?php get_template_part('pix');?> <p class="newsdate"><?php the_time('n/j/y'); ?> –</p> <?php the_content('Read more'); ?> </article> <?php endwhile; ?> <?php endif; ?>

Display CPT content on News single template (single-news.php)


Learn morehttp://www.php.net/manual/en/index.php

http://codex.wordpress.org/Custom_Fields

http://wordpress.org/extend/plugins/advanced-custom-fields/

http://codex.wordpress.org/Function_Reference/register_post_type

http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress

http://codex.wordpress.org/Class_Reference/WP_Query

http://wordpress.stackexchange.com

http://generatewp.com/


Questions??? ??? ?

wordcamp abq 2013: making the leap from designer to designer/developer

Design

wordcamp albuquerque

custom post types

custom post type content

custom field keys

standard fields

related fields

new news item

view news items