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

0 1


wcphx-stop-building-themes

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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.

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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 milliseconds...talk with Josh Broton sometime (@joshbroton)

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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
    • • AND KNOW HOW TO REGISTER / USE A CPT

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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.

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

Utilize stock WordPress functionality

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

The Bad Employee page

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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.

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

Wrapping up

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

Wrapping up Cont...

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

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth

That's It!

Questions?

https://github.com/dannyb195/wcphx-stop-building-themes@add_action_dan@blueearth