developing custom wordpress themes for clients

Developing Custom Themes for Clients

Steven Slackfreelance Web Developer @ S2 Web

@slacktronics2webpress.com

1mundoreal.org

Rio de Janeiro - 2007

#1 rule in creating custom themes for clients:

Caring!

What is custom?

Tailor madeA custom theme is built specifically to meet the needs of your client’s business or project.

Planning

icon by Björn Andersson, from The Noun Project

Purpose & Goals

ContentDetermining context

Determine hierarchy of site navigation and structure

Site Architecture

Determine hierarchy of site navigation and structure

Site Architecture

custom post types, taxonomies, featured images, custom fields, sliders, widget areas, theme

options, etc...

Plan out the features

Do you really need to build a custom theme?

You may need a custom theme if:● You need to present different types of content in a unique way● You need to present a plugins presentation in a certain way● To Create a Unique look to the WP theme● To take advantage of templates, template tags, and the WordPress Loop

to generate different website results and looks.● To provide alternative templates for specific site features, such as category

pages and search result pages.● To quickly switch between two site layouts, or to take advantage of a

Theme or style switcher to allow site owners to change the look of your site.

● To provide “some” theme options for custom presentation● To take advantage of custom fields and meta data.

Determining Cost

● How much does it cost? “It depends”

● Try it out - Scope out a project as best you can, track your hours to determine cost for future projects

● “One size fits all” doesn’t apply - different types of themes are going to have different prices

● Stay on track - avoid scope creep and put language about changes and modifications in the contract.

Time to make something!!

● Work off of site architecture / wireframe

● Design Preference - Browser? Photoshop?

● This is only one portion of the design process - not a finished product

Designing the site

DevelopmentThere are several ways to begin developing custom themes:

1. Child Themes

2. Theme Frameworks

3. Starter themes

Child Themes“A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme.” - Codex

● Inherits parent theme functionality● Good for simple theme modifications - add theme support, custom

backgrounds, changing colors, etc…● keep customization separate from parent theme core functionality● allow parent themes to be updated without destroying your modifications● take advantage of effort and testing put into parent theme● save on development time; no need to recreate the wheel● are a great way to get started to learn about theme development

Child Theme ConsiderationsParent theme may contain tons of features which you do not need

Theme Frameworks“A ‘drop-in’ code library that is used to facilitate

development of a Theme” - Codex

● Developers can leverage a framework’s built-in code, options, plug-ins, and themes from which to develop.

● Eliminates the need to re-invent the wheel for each project.

● Decrease time spent developing a theme

A few popular frameworks:

● Builder by iThemes

● Canvas by WooThemes

● Genesis by StudioPress

● Hybrid Core by Justin Tadlock

● Thesis by DIYThemes

Review of 10 popular frameworks - torquemag.io/review-10-frameworks

Theme Framework Considerations:● Adds a layer of complexity to WordPress● More to manage, more to update, and a sometimes a bulkier

admin. ● Plugin compatibility● Some frameworks charge for support and updates● Unused features and options

Starter ThemesBase themes with all the essential files and

functions required for a WordPress theme but with minimal to no styles.

A few places to start:

● Underscores - underscores.me

● Roots - roots.io

● Bones - themble.com/bones

Starter theme considerations

Choosing a starter theme to work with is up to your preference and depends on the way you like to work.

Example: Roots is built with Twitter Bootstrap and uses LESS. Bones is based on the HTML5 Boilerplate and is ready for LESS or SASS development.

Using a starter theme gives you control over what features you want to add. The world is at your fingertips.

You will need some time and skills to build a custom theme with a starter theme

Building the custom theme

Theme Options● Keep them to a minimum, if possible

● Theme options should affect display not functionality.

● Use the theme customizer

● Use WordPress Options API

Presentation and Functionality

Generally, when we refer to functionality in WordPress we are speaking of plugins while themes handle the presentation.

FunctionsAvoid the temptation to put A LOT of functionality in your functions.php file

Create a library with specific functions

FunctionalityE-Commerce

Front-end Registration

Portfolio

Directory

Slider

Advanced Search Shortcodes

Events Calendar

Required Plugins?How about suggested plugins?

TGM Plugin Activation

The best way to require and recommend plugins for WordPress themes (and other plugins)

tgmpluginactivation.com

Put extra functions into a plugin.

Data Portability

Organization & Maintenance

Portable PluginEasier to debugSeparation of concerns

Wrap plugin functions in conditionals in the theme

<?php // if Advanced Custom Fields function exists and the

field is not empty display the field

if ( function_exists( 'get_field' ) ) {

if( get_field( 'some_custom_field' ) ) {

the_field( 'some_custom_field' );

}

}

?>

If the plugin is disabled you will avoid receiving error messages or a blank screen.

shortcodes

Take your shortcodes with you

What does the business owner get?

A well organized WordPress environment will have a cost benefit to

the client, business, or individual

A more stable environment will save you time on debugging, fixing problems or moving data,

hence saving your client money.

Best Practices

Follow WordPress Coding Standardsmake.wordpress.org/core/handbook/coding-standards

/** * For developers: WordPress debugging mode. * * Change this to true to enable the display of notices during development. * It is strongly recommended that plugin and theme developers use WP_DEBUG * in their development environments. */

define('WP_DEBUG', true );

Debug!● Set WP_debug to true in your wp_config.php file.

● Use developer plugins - wordpress.org/plugins/developer

Use the theme check plugin

● minimize http requests● minify scripts and styles● reduce image sizes● use sprites in your theme images

Performance

Reviewing the theme with the client

“Can we make this area a scroll area?”“I want this to be a dropdown box.”“When you click on this button I want it to go to the contact page.”“I don’t really understand what all this Lorem Ipsum is?”“That wasn’t in the mockup.”“That looked different in the mockup.”“These aren’t my photos!”“What are we looking at here? I don’t understand.”

● Load the clients content into WordPress. Hire someone if necessary

● Present client site on your test server (staging site)

● If they already have a WP site - export their data and import it into your development environment

● Disable search engine visibility in Settings => Reading

Present the theme to the client with their content

Fine tune the theme

Deploy!--Take the custom theme live

● Use an under construction plugin while prepping the site.

● Upload theme and plugins

● Upload data if needed.

● Configure theme and plugin settings

● Double check everything

Training, Support, and the Future

● Video Tutorials - WP101.com

● PDF Guide - WP Easy Guide ( easywpguide.com )

● WP Beginner - Beginners guide to WordPress ( wpbeginner.com )

Training Resources

Support ?

● Managed Support - managewp.com

● Case by case bug / improvements

● Managed WordPress maintainence - fantasktic.com, wpmaintainer.com, maintainn.com

Thanks !!Thoughts? Insights? Questions?