This document summarizes Ray Gulick's presentation at WordCamp Albuquerque 2013 about making the transition from designer to designer/developer. It discusses how coding skills are an essential part of design work. It provides an overview of key WordPress coding concepts like PHP, tags, custom fields, custom post types, and using WP_Query to manage listings. Code examples are provided to demonstrate how to display custom fields and create a custom post type listing with pagination. The goal is to illustrate that becoming a designer/developer is a process of learning by doing and mastering these foundational skills.

1. WordCamp Albuquerque 2013 | Ray Gulick, Evo
Making the leap
from Designer
to Designer/Developer

2. 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

3. WordCamp Albuquerque 2013 | Ray Gulick, Evo 3
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.

4. WordCamp Albuquerque 2013 | Ray Gulick, Evo 4
DESIGN
Visual
Design Coding
Coding is part of
design.
Just like visual design.

5. WordCamp Albuquerque 2013 | Ray Gulick, Evo 5
Dammit, Jim!
I’m a designer!
Coding skills and knowledge you
probably already have:
1. HTML
2. CSS
3. Basic first aid

6. WordCamp Albuquerque 2013 | Ray Gulick, Evo 6
Some fundamental WordPress
developer code knowledge*
1. PHP and WordPress Tags
2. Custom Fields and putting them
on templates
3. Custom Post Types
4. 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.

7. WordCamp Albuquerque 2013 | Ray Gulick, Evo 7
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 key
single
value?
meta value
post ID
Syntax
Rules of
language
usage

8. WordCamp Albuquerque 2013 | Ray Gulick, Evo 8
WordPress Tags
PHP, 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; ?>

9. WordCamp Albuquerque 2013 | Ray Gulick, Evo 9
What are Custom Fields?
WordPress has standard fields, such as:
the_title
the_content
Templates display the values of the
fields using the following tags:
<?php the_title(); ?>
<?php the_content(); ?>

10. WordCamp Albuquerque 2013 | Ray Gulick, Evo 10
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.

11. WordCamp Albuquerque 2013 | Ray Gulick, Evo 11
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

12. WordCamp Albuquerque 2013 | Ray Gulick, Evo 12
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:

13. WordCamp Albuquerque 2013 | Ray Gulick, Evo 13
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

14. WordCamp Albuquerque 2013 | Ray Gulick, Evo 14
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...

15. WordCamp Albuquerque 2013 | Ray Gulick, Evo 15
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

16. WordCamp Albuquerque 2013 | Ray Gulick, Evo 16
Advanced Custom Fields plugin
1. User-friendly
metabox title
2. User-friendly
field label
(no field key)
3. Hints above
entry field

17. WordCamp Albuquerque 2013 | Ray Gulick, Evo 17
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.

18. WordCamp Albuquerque 2013 | Ray Gulick, Evo 18
Lots of options for
field type, then
further customization
of selected field type.
ACF Field Type Options!!!

19. WordCamp Albuquerque 2013 | Ray Gulick, Evo 19
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

20. WordCamp Albuquerque 2013 | Ray Gulick, Evo 20
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

21. WordCamp Albuquerque 2013 | Ray Gulick, Evo 21
'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

22. WordCamp Albuquerque 2013 | Ray Gulick, Evo 22
Important stuff about CPTs
1. 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.

23. WordCamp Albuquerque 2013 | Ray Gulick, Evo 23
page_newslist.php (page template)

24. WordCamp Albuquerque 2013 | Ray Gulick, Evo 24
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>&raquo;</h2>' ); ?>
<p class="newsdate"><?php the_time('n/j/y'); ?> &ndash;</p>
<?php the_excerpt(); ?>
</div>
<?php endwhile; endif;
if(function_exists('wp_pagenavi'))
wp_pagenavi( array( 'query' => $newslist ) );
?>

25. WordCamp Albuquerque 2013 | Ray Gulick, Evo 25
single-news.php

26. WordCamp Albuquerque 2013 | Ray Gulick, Evo 26
<?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');
?> &ndash;</p>
<?php the_content('Read more'); ?>
</article>
<?php endwhile; ?>
<?php endif; ?>
Display CPT content on News
single template (single-news.php)

27. WordCamp Albuquerque 2013 | Ray Gulick, Evo 27
Learn more
http://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/

28. WordCamp Albuquerque 2013 | Ray Gulick, Evo 28
Questions?
?? ??? ?