Developing Custom
Themes for Clients
Steven Slack
freelance Web Developer @ S2 Web

@slacktronic
s2webpress.com
1mundoreal.org

Rio de Janeiro - 2007
#1 rule in creating custom themes for clients:

Caring!
What is custom?
Tailor made
A 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
Content
Determining context
Site Architecture
Determine hierarchy of site navigation and structure
Site Architecture
Determine hierarchy of site navigation and structure

custom post types, taxonomies, featured images,
cu...
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 ...
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...
Time to make something!!
Designing the site
● Work off of site architecture / wireframe
● Design Preference - Browser? Photoshop?
● This is only on...
Development
There are several ways to begin developing custom themes:

1. Child Themes
2. Theme Frameworks
3. Starter them...
Child Themes
“A WordPress child theme is a theme that inherits the
functionality of another theme, called the parent theme...
Child Theme Considerations
Parent 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 le...
A few popular frameworks:
●

Builder

by iThemes

●

Canvas

by WooThemes

●

Genesis

by StudioPress

●

Hybrid Core

by ...
Theme Framework Considerations:
●
●
●
●
●

Adds a layer of complexity to WordPress
More to manage, more to update, and a s...
Starter Themes
Base themes with all the essential files and
functions required for a WordPress theme but with
minimal to n...
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 lik...
Building the custom theme
Theme Options
● Keep them to a minimum, if possible
● Theme options should affect display
not functionality.
● Use the the...
Presentation and Functionality
Generally, when we refer to functionality in
WordPress we are speaking of plugins while the...
Functions
Avoid the temptation to put A LOT of
functionality in your functions.php file
Create a library with specific fun...
Functionality
E-Commerce
Advanced Search
Slider
Directory

Events Calendar
Shortcodes
Portfolio
Front-end Registration
Required Plugins?
How about suggested plugins?
TGM Plugin Activation
The best way to require and recommend plugins for
Wor...
Put extra functions into a plugin.
Data Portability
Organization & Maintenance
Portable Plugin
Easier to debug
Separation of concerns
Wrap plugin functions in conditionals in the theme
<?php // if Advanced Custom Fields function exists and the
field is not...
Take your
shortcodes
with you

sh

od
ortc

es
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 Standards
make.wordpress.org/core/handbook/coding-standards
Debug!
●

Set WP_debug to true in your wp_config.php file.

●

Use developer plugins - wordpress.org/plugins/developer

/*...
Use the theme check plugin
Performance
●
●
●
●

minimize http requests
minify scripts and styles
reduce image sizes
use sprites in your theme images
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 ...
Present the theme to the
client with their content
● Load the clients content into WordPress. Hire
someone if necessary
● ...
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.
● Configur...
Training, Support,
and the Future
Training Resources
●
●
●

Video Tutorials
PDF Guide
WP Beginner

- WP101.com
- WP Easy Guide ( easywpguide.com )
- Beginne...
Support ?
● Managed Support - managewp.com
● Case by case bug / improvements
● Managed WordPress maintainence fantasktic.com, wpmain...
Thanks !!
Thoughts? Insights? Questions?
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
Upcoming SlideShare
Loading in …5
×

Developing Custom WordPress Themes for Clients

2,116 views

Published on

Should you develop custom themes for clients? When is it necessary? Why should you build custom themes for clients? Things that will be covered in this talk include, starting a theme from scratch, theme boilerplates, working with clients through the process, cost, performance, properly planning theme architecture around clients content, integrating with plugins and custom plugins, presentation vs functionality, updates and maintenance, shipping and installing the theme, training clients, populating site with content, and getting paid!!

Published in: Technology, Business
  • Very nice!! Thank you for writing this educative list of considerations!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Developing Custom WordPress Themes for Clients

  1. 1. Developing Custom Themes for Clients
  2. 2. Steven Slack freelance Web Developer @ S2 Web @slacktronic s2webpress.com
  3. 3. 1mundoreal.org Rio de Janeiro - 2007
  4. 4. #1 rule in creating custom themes for clients: Caring!
  5. 5. What is custom?
  6. 6. Tailor made A custom theme is built specifically to meet the needs of your client’s business or project.
  7. 7. Planning icon by Björn Andersson, from The Noun Project
  8. 8. Purpose & Goals
  9. 9. Content Determining context
  10. 10. Site Architecture Determine hierarchy of site navigation and structure
  11. 11. Site Architecture Determine hierarchy of site navigation and structure custom post types, taxonomies, featured images, custom fields, sliders, widget areas, theme options, etc...
  12. 12. Plan out the features
  13. 13. Do you really need to build a custom theme?
  14. 14. 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.
  15. 15. Determining Cost
  16. 16. ● 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.
  17. 17. Time to make something!!
  18. 18. Designing the site ● Work off of site architecture / wireframe ● Design Preference - Browser? Photoshop? ● This is only one portion of the design process not a finished product
  19. 19. Development There are several ways to begin developing custom themes: 1. Child Themes 2. Theme Frameworks 3. Starter themes
  20. 20. 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
  21. 21. Child Theme Considerations Parent theme may contain tons of features which you do not need
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Starter Themes Base themes with all the essential files and functions required for a WordPress theme but with minimal to no styles.
  26. 26. A few places to start: ● Underscores - underscores.me ● Roots - roots.io ● Bones - themble.com/bones
  27. 27. 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
  28. 28. Building the custom theme
  29. 29. Theme Options ● Keep them to a minimum, if possible ● Theme options should affect display not functionality. ● Use the theme customizer ● Use WordPress Options API
  30. 30. Presentation and Functionality Generally, when we refer to functionality in WordPress we are speaking of plugins while themes handle the presentation.
  31. 31. Functions Avoid the temptation to put A LOT of functionality in your functions.php file Create a library with specific functions
  32. 32. Functionality E-Commerce Advanced Search Slider Directory Events Calendar Shortcodes Portfolio Front-end Registration
  33. 33. 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
  34. 34. Put extra functions into a plugin.
  35. 35. Data Portability
  36. 36. Organization & Maintenance Portable Plugin Easier to debug Separation of concerns
  37. 37. 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.
  38. 38. Take your shortcodes with you sh od ortc es
  39. 39. What does the business owner get?
  40. 40. A well organized WordPress environment will have a cost benefit to the client, business, or individual
  41. 41. A more stable environment will save you time on debugging, fixing problems or moving data, hence saving your client money.
  42. 42. Best Practices
  43. 43. Follow WordPress Coding Standards make.wordpress.org/core/handbook/coding-standards
  44. 44. Debug! ● Set WP_debug to true in your wp_config.php file. ● Use developer plugins - wordpress.org/plugins/developer /** * 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 );
  45. 45. Use the theme check plugin
  46. 46. Performance ● ● ● ● minimize http requests minify scripts and styles reduce image sizes use sprites in your theme images
  47. 47. Reviewing the theme with the client
  48. 48. “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.”
  49. 49. Present the theme to the client with their content ● 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
  50. 50. Fine tune the theme
  51. 51. Deploy! -Take the custom theme live
  52. 52. ● 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
  53. 53. Training, Support, and the Future
  54. 54. Training Resources ● ● ● Video Tutorials PDF Guide WP Beginner - WP101.com - WP Easy Guide ( easywpguide.com ) - Beginners guide to WordPress ( wpbeginner.com )
  55. 55. Support ?
  56. 56. ● Managed Support - managewp.com ● Case by case bug / improvements ● Managed WordPress maintainence fantasktic.com, wpmaintainer.com, maintainn.com
  57. 57. Thanks !! Thoughts? Insights? Questions?

×