Company Website:

www.RevelationConcept.com

Presentation Slides:

www.RevelationConcept.com/presentations

Twitter:

@RevConcept

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.

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

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

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

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.

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

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)

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.

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

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.

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)

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)

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)

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

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

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

Resources: Codex (Register Nav Menus)

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)

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)

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

($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)

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

Resource: Codex (Add Dashboard Page)

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)

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!*

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

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

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

/wp-content/plugins/rsg-portable-functions.php

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

Contact me with your questions!

Chris@RevelationConcept.com

Example files from the sample site are on GitHub:

functions.php

rsg-portable-functions.php

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