WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
-
Upload
evolution-web-development -
Category
Design
-
view
109 -
download
2
description
Transcript of 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
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.
WordCamp Albuquerque 2013 | Ray Gulick, Evo 4
DESIGN
Visual Design Coding
Coding is part of design.
Just like visual design.
WordCamp Albuquerque 2013 | Ray Gulick, Evo 5
Dammit, Jim! I’m a designer!Coding skills and knowledge you probably already have:1. HTML2. CSS3. Basic first aid
WordCamp Albuquerque 2013 | Ray Gulick, Evo 6
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.
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 keysingle value?
meta valuepost ID
Syntax
Rules of
language
usage
WordCamp Albuquerque 2013 | Ray Gulick, Evo 8
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; ?>
WordCamp Albuquerque 2013 | Ray Gulick, Evo 9
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(); ?>
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.
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
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:
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
WordCamp Albuquerque 2013 | Ray Gulick, Evo 14
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...
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
WordCamp Albuquerque 2013 | Ray Gulick, Evo 16
Advanced Custom Fields plugin1. User-friendly
metabox title
2. User-friendly field label (no field key)
3. Hints above entry field
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.
WordCamp Albuquerque 2013 | Ray Gulick, Evo 18
Lots of options for field type, then further customization of selected field type.
ACF Field Type Options!!!
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
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
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
WordCamp Albuquerque 2013 | Ray Gulick, Evo 22
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.
WordCamp Albuquerque 2013 | Ray Gulick, Evo 23
page_newslist.php (page template)
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>»</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 ) ); ?>
WordCamp Albuquerque 2013 | Ray Gulick, Evo 25
single-news.php
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'); ?> –</p> <?php the_content('Read more'); ?> </article> <?php endwhile; ?> <?php endif; ?>
Display CPT content on News single template (single-news.php)
WordCamp Albuquerque 2013 | Ray Gulick, Evo 27
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/
WordCamp Albuquerque 2013 | Ray Gulick, Evo 28
Questions??? ??? ?