I'm Chris Perryman

Company Website:


Presentation Slides:




Designing & Developing for UX from a Client Perspective

A long title for a simple concept: let’s start creating great user experiences for our clients…on the backend!

A Thoughtful Thought Process

You know nothing about WordPress

a. Put yourself in your client's shoes

Never Assume You Know Your Client

Think of the least technologically inclined person you know — and build for them.

Don’t be a jerk. Examples of client abuse:

1.) Pasting HTML into the content editor.*

2.) Hard-coding content into a template.

Example: This is Client Abuse!

You're Abusing Your Clients

b. Correlate Form to Function

Instead, put some thought and consideration into your build process. Sometimes a simple solution for the clients means more work for us — but that’s ok!

Start with fundamentals

1.) Look thoughtfully at the layout, the content and the design.

2.) Utilize traditional reading style: top to bottom, left to right.

3.) Call it what it is: a section/area, a heading, an intro, a CTA, a button, a box etc.

4.) Decide what “makes sense” — build the form to function relationship.*

Intro into Custom Metaboxes & Fields

Step one to becoming a WordPress Wizard — utilize magic.

a. What is a Metabox?

A post meta box is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way.*

Source: smashingmagazine.com

b. What is a Custom Field?

Custom fields are post metadata.*

Post metadata is data that’s saved in the wp_postmeta table in the database. Each entry is saved as four fields in this table:


1.) meta_id: A unique ID for this specific metadata.

2.) post_id: The post ID this metadata is attached to.

3.) meta_key: A key used to identify the data.

4.) meta_value: The value of the metadata.

Source: smashingmagazine.com


c. How can these help my clients?

Natively, WordPress pages and posts come with a few built-in metaboxes and fields (title, content editor, categories).


But often times our clients have content that doesn’t fit these predefined inputs. Trying to force their content to fit is what leads to bad practices like the examples we looked at in slides 2 and 3.


The solution is to build the Content Management System (CMS) around their content — Custom Metaboxes and Fields are one tool we can utilize when working toward this goal.


d. Implementing Custom Metaboxes & Fields

1.) Setup by hand (the cowboy solution)

Resources: The Codex (Metaboxes), The Codex (Custom Fields)Smashing Mag Tut


2.) Use “Custom Metaboxes and Fields” (CMB) — an awesome project by Bill Ericson, Andrew Norcross, Jared Atchison and Justin Sternberg

Resource: Custom Metaboxes and Fields 


3.) Use “Advanced Custom Fields” —  the greatest plugin ever created.*

Resource: Advanced Custom Fields


Intro to Custom Post Types

Step two to becoming a WordPress Wizard — utilize more powerful magic.

a. What is a Custom Post Type?

Native WordPress post types: post, page, attachment, revision and navigation menu.


Custom post types are new post types you can create.


A custom post type can be added to WordPress via the register_post_type() function. This function allows you to define a new post type by its labels, supported features, availability and other specifics.


Source: Codex (Post Types)


b. How can CPT's help my clients?

Some examples of Custom Post Types:

1.) Staff Members

2.) Products

3.) This Presentation :)

4.) Portfolio/Project Items*


Custom Post Types simplify content management by allowing us to organize and display client content in a way that is unique to that particular content.


Coupling Custom Post Types with Custom Fields can remove nearly any limitation to granting your client full content control.

c. Registering a Custom Post Type

Screen Shot 2013-09-30 at 1.59.44 PM


Add these lines of code to your functions.php file — or better yet — to a functionality plugin.


Resources: Codex (Register Post Type), Register Custom Post Type Breakdown

Displaying Content: Intro Into Custom Templates

Tailoring post and page displays to fit client content.

a. What are Custom Templates?

Custom Templates are files that give us the ability to make pages or posts display or behave differently from their defaults. 


We can create templates based on our needs and tell WordPress when and where to use them.


This is how we display our custom post types, metaboxes and fields.

b. Custom Page Templates

1.) Make a copy of the page.php file (or you can start from scratch).


2.) Rename your copied file so you can easily identify it ex.) template-services.php


3.) Make your code changes — add/remove any elements, custom PHP etc.


4.) Tell WordPress this is a page template, add this PHP comment at the top of your file:

<?php /* Template Name: Services Page */ ?>

Resources: Codex (Custom Page Templates), Codex (Template Hierarchy)


c. Custom Post Type Templates

1.) Make a copy of the single.php file (or you can start from scratch).


2.) Rename your copied file to follow this structure: single-{post-type}.php


3.) Make your code changes — add/remove any elements, custom PHP etc.

Resources: Codex (Post Type Templates), Codex (Template Hierarchy)

d. Custom Archive Templates

1.) Make a copy of the archive.php file (or you can start from scratch).


2.) Rename your copied file to follow this structure: archive-{post-type}.php


3.) Make your code changes — add/remove any elements, custom PHP etc.

Resources: Codex (Post Type Templates), Codex (Template Hierarchy)

Going Further: Give them more

Making your clients the kings of their content.

I. Release Their Menus

If They Call You, You Lose.

If your client’s are constantly contacting you to make changes to their site, what was the point in using WordPress?


More Examples of Client Abuse:

1.) Hard-coding menus into widgets*

2.) Hard-coding menus into themes

Example: This is Client Abuse!

Screen Shot 2013-09-30 at 2.38.07 PM


Don’t hard-code your client’s menus into the theme where they can’t access them…it’s mean.

a. Registering Menus

Screen Shot 2013-09-30 at 2.53.07 PM


Add these lines of code to your functions.php file — or better yet — to a functionality plugin.


Resources: Codex (Register Nav Menus)

b. Displaying Registered Menus

Screen Shot 2013-09-30 at 3.00.01 PM


Add these lines of code to your header.php file if you are setting up the main site menu — or to any other theme file where you want your custom menus to appear.


Now, your clients can control their menu items, menu order and menu labels!*


Resources: Codex (WP Nav Menu)

II. Give Them Site Options

A great add-on to Advanced Custom Fields is the Options Page.


This add-on allows you to create a menu item in the admin called “Options”. With this menu item you can then extend your client’s ability to control more advanced site-wide features.

Some Examples of Option Page Items:

1.) Site Logos

2.) Custom Header Images

3.) Social Networks/Icons

4.) Footer Area Controls (replaces widgets)*


Resource: Advanced Custom Fields (Options Add-On)

Increasing Stability: Customizing the Admin Area

Protect your clients and yourself by considering a few extra steps.

I. Setting Up A "Help" Area

By adding a “Help” section to the admin area, we can create a place for our clients to go first, before they contact us.*

Items to Add to the Help section:

1.) Video Tutorials! (iShowU + Stomp)

2.) Step-by-step instructions

3.) Screenshots

a. Adding A Dashboard Page

Screen Shot 2013-09-30 at 7.19.21 PM

($page_title, $menu_title, $capability, $menu_slug, $function)

Add these lines of code to your functions.php file — or better yet — to your own admin plugin.


Resource: Codex (Add Dashboard Page)

b. Executing The Content

Screen Shot 2013-09-30 at 7.34.24 PM


Add these lines of code to your functions.php file — or better yet — to your own admin plugin.


Resource: Codex (Add Dashboard Page)

II. Cleaning Up The Admin

Consider “cleaning up” the admin area to simplify your client’s user experience.

Examples of Simplification:

1.) Removing/hiding unneeded menu items

Resources: Plugin (Admin Menu Editor), Tutorial (Customize the WP Admin)

2.) Reordering menu items

Resources: Plugin (Admin Menu Editor)Tutorial (Customize the WP Admin)

3.) Renaming the default “Post” menu item*

Resources: Tutorial (Renaming Default Post), Tutorial (Customize the WP Admin)

III. Admin vs. Editor Role

Consider assigning your client a WordPress user role other than Admin.

Some questions to ask yourself:

1.) Can my client “handle” being an Administrator?

2.) Will the additional menu items/options be confusing?


If your client shouldn’t “touch” it, then it shouldn’t be there!*


a. Defining Roles

1.) Assign an Editor and add/remove capabilities as needed

Resources: Codex (Get Role), Codex (Add Capability), Codex (Remove Capability)


2.) Use a plugin to create and define user roles

Resources: Plugin (User Role Editor), Plugin (Role Scoper)


Even if you assign your client an Editor role, be sure they — or someone in their company — also has access to Administrator credentials.*


Intro to Functionality Plugins

Using portability to protect your client’s future.

a. What is a functionality plugin?

Don’t let the word “plugin” intimidate you. If you’ve played with your functions.php file, you’re golden!

A functionality plugin houses your custom functions that are not necessarily tied to your theme. Think of it as a portable functions.php.

Determining what goes here:

1.) Is this content? Content should be portable.

2.) Is this something specific to my theme/design? Leave it.


“A good rule-of-thumb is that anything a user would expect to keep after changing themes belongs in a plugin. This includes custom post types, taxonomies, metaboxes, and shortcodes.”

Source: Bill Erickson

b. Setting Up The Plugin

Screen Shot 2013-10-01 at 9.59.46 AM


That’s it! Add your functions to the plugin and save it in your plugin directory:


Resources: Tutorial (Custom Functions Plugin), Tutorial (Functionality Plugin)


Contact me with your questions!



Example files from the sample site are on GitHub:




The asterisks (*) in this presentation are there for my own forgetfulness — reminders to show you live examples ;)