Stop Building Themes and Start Building Solutions: – Client-First Development:

Stop Building Themes and Start Building Solutions: – Client-First Development:

0 1


wcphx 2014 talk

On Github dannyb195 / wcphx-stop-building-themes

Stop Building Themes and Start Building Solutions:

Client-First Development:

The WordPress Front End Developer's Real Job

Who I am

  • • Dan Beil
  • • B.S. in Applied Sociology (2005)
  • • Front-end WordPress Developer at Blue Earth Interactive - St Paul, MN
  • • Freelanced for 4-ish Years prior to BEI
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

Why This Talk

  • • We are talking about custom WP theme builds
  • • Too often we see a disconnect between designers and developers
    • • This tends to lead to inconsistant and confusing UX
  • • Both are crucial to the creative process and should be involved from the beginning and throughout the project

if ($design == 'Telling the Clients Story') { $development = 'is the medium on which that story is told'; }

Client First UI/UX

  • • UI/UX is usually thought of concerning the frontend / end user
  • • Often the UI/UX of the client and content management is forgotten
  • Suzette Frank of (mt) gave a great talk on 'Work Statements' / Business Requirements at WordCamp Boston 2013 - Back End UX should also be considered during this process.

What is a Front End Dev?

Traditionally has expert knowledge in...
  • • CSS3
  • • Javascript / jQuery
    • • Maybe other libraries as well
  • • HTML5 Awesomeness
  • • Understands page load time issues
    • • ...and how to complain about 200 with Josh Broton sometime (@joshbroton)

Ok, So What's a Front End Wordpress Dev???

  • • Can (at the very minimum) have conversations about the previous items
  • • Very comfortble browsing the codex (or upcoming documentation)
  • • Some knowledge of server environments
  • • At the beginning Does not need to be an expert PHP dev
  • • At the beginning Or an expert Javascript dev
  • • Does need to be an 'expert' concerning WordPress
    • • i.e. Must know more than the client / site content manager

Let's Make It Easy For Them!

  • • Dont use Theme Options if you dont need to
    • Only use if absolutley necessary and keep it minimal
  • • The CPT allows us to symantically create and label POST TYPES
    • • With this the client can clearly see what content is entered where
  • • Even ridiculously long CPT Labels CAN be a helpful.

Utilize stock WordPress functionality

  • • Meta Boxes (for media) - The media manager should be used rather than a simple text field.

The Perfect Example

  • • A List of Team Members or Employees
  • • Almost all organizations have something similar
  • • Functionality can differ with the same information
  • • Clear example of meta boxes

The Bad Employee page

  • • No styling
  • • Hard to manage content
  • • Hard to account for images
  • • Benefits ?????
    • • NONE

The Worse Employee Page

  • • HTML in WordPress' wysiwyg
  • • Depressing to manage content
  • • At least some knowledge of HTML is required
  • • Very Easy to screw something up
  • • Benefits ?????

A Custom Post is good

Customizing Meta Boxes are better

  • • Imagine a CPT to list employees, that would need
  • • Name (Post Title)
  • • Description / About (the_content / editor)
  • • Meta Boxes for
    • • Phone
    • • Email
    • • Fax (if people still use this)
    • • Image
    • • Twitter Handle
Custom Meta Boxes and Fields is an easy way to add powerful custom fields quickly with code.

General Guidelines

  • • Client-first thinking is a must when it comes to solving problems
  • • Don't use short codes unless necessary (too typo prone)
  • • Never include HTML in a client's work flow (too typo prone / technical)
  • • appropriate use of CPTs and meta boxes
    • • naturally divide content into CPTs and meta boxes - input fields - select boxes - media manager

Wrapping up

  • • If your client looks like this after training #YoureDoingItWrong

Wrapping up Cont...

  • • If you did it right, your client will look like this

That's It!