WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer

on

  • 1,604 views

 

Statistics

Views

Total Views
1,604
Views on SlideShare
1,515
Embed Views
89

Actions

Likes
0
Downloads
5
Comments
0

3 Embeds 89

http://www.evowebdev.com 63
http://evowebdev.com 25
http://cloud.feedly.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer Presentation Transcript

  • 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? ?? ??? ?