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

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

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?

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

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