Clifton Hatfield will be presenting on topic of WordPress Themes. In his presentation Clifton will discuss: - Free vs. Premium Themes: Licensing - Theme Customizing - Child Themes - Responsive Design Clifton has been a developer since 2004 and in that short time period has created multiple plugins and custom themes. Find out more about Clifton: Website: http://cliftonhatfield.com Facebook: https://www.facebook.com/cliftonhatfield.page Twitter: https://twitter.com/cliftonhatfield

1. WordPress Themes
underlying, unifying design for a blog

2. My Background
•
•
•
•
Father
Husband
Developer
Ninja
•
•
•
Creating themes & plugins for past five years
Built hundreds of blogs
Plugins: thousands of downloads worldwide

3. What is a theme?!
A WordPress Theme is a collection of files that
work together to produce a graphical
interface with an underlying, unifying design
for a blog.
Huh? In English...
Gives your blog its appearance
What visitors see
Graphics & Colors
Typography
•
•
•
•

4. "Simplicity is the ultimate
sophistication."
...and sometimes not so awesome.

5. Not All Themes Are Created Equal
Free Themes
Premium Themes
Freemium Themes

6. Free Themes
•
•
•
•
•
•
•
•
Cost: Free
Lack flexibility & customization
Less features
Plain appearance
Great for content delivery
Straight to the point
Unsupported or slow development
Often outdated

7. Premium Themes
•
•
•
•
•
•
•
Cost: Paid....but sometimes free!
More options & flexibility
Beautiful appearance
Custom layouts
Supported & maintained
Large communities
Customize to fit your needs & deep desires

8. Freemium Themes
•
•
Cost: Free...with option to pay
Same as Premium Theme
Option to pay?! what?!
Pay to remove footer links, ads, or acquire
enhanced features.

9. GPL Licensing & Open Source
•
•
•
•
Open source means free, right?! Yes & No!
Free as in freedom. Not free like those
cheese samples you swipe at the grocery
store.
GPL is the freedom to receive & change the
source code.
All WordPress software should be covered
under GPL or similar licensing. (themes &
plugins)

10. Customizing Your Theme
•
Never ever..ever edit the core files of
WordPress...ever.
•
Lose your changes during an update
•
Bad practice
•
Never had reason to do it..ever.

11. How to easily customize a theme
•
•
•
•
Go Premium!
Premium themes have user friendly options
Look for a demo to check out its options
Does it fit your needs?

12. For the Hardcore Customizing
•
•
•
•
Be a ninja
All WP themes should be GPL (look for this)
Customizing Theme core files is bad practice
Utilize the functions.php file

13. More Hardcore Customizing
The functions.php file
•
•
•
•
•
•
/wp-content/themes/themename/functions.php
Acts much like a plugin
Change default behaviors of your theme or WordPress
Use WP hooks, actions, and filters
Turn on theme support for post thumbnails, menu, etc
Several blocks of code to expand the functionality of the
active theme.

14. Even More Hardcode Customizing
Child Theme
•
•
•
•
•
Dependant on a parent theme (premium)
Files in Child Theme override parent theme files
functions.php in child can replace parent functions
Unique headers in style.css to identify child & parent
/wp-content/themes/childthemename/

15. Hardcore Customizing Continues
Want to add a subscription box to your theme's homepage?
Create a duplicate of the parent theme's index.php file
Place duplicate file in child theme directory
Customize duplicate index.php file in child theme
Active the child theme
The duplicate index.php will override the parent's
index.php
•
•
•
•
•

16. Why go through the trouble?
GPL gives us the freedom to copy and improve
already written code. Awesome! But it's not
always a good idea.
•
•
•
Child themes protect changes from the update monster.
When the parent theme is updated, the child theme isn't.
Our changes may not be compatible with the recent
updates but at least you didn't lose all your work.
So remember, think twice before customizing core theme files,
create a child theme, and only you can prevent forest fires.

17. Responsiveness & Awesomeness
"Big things come in small packages"
Mobile devices have never been so popular
•
•
•
•
•
Fast web browsing
Powerful processors
High screen resolutions
Broad Demographics
On-the-go

18. Responsive Design
•
•
•
•
The Problem
Mobile browsers zoom out to the width of the site
Difficult to read, touch links. and navigate
I know what awesomeness is, but what's
responsiveness?
It's how your site reacts to the screen it's being display
upon. Minimizes issues by adjusting to the screen
Responsive design is very important with delivering the
right content.

19. Why Responsive is Important
•
•
•
•
•
•
•
Mobile friendly
Mobile advertising
Mobile traffic
Professionalism
User friendliness
Increased conversations
Current location (off topic but still cool)

20. Imagine you own a restaurant.

21. •
•
•
•
•
You run ads in a popular iPhone app.
Your food looks delicious.
Person clicks on your ad.
They want to quickly see your menu and your prices.
But your website isn't responsive. uh oh...

22. Instead they see a blurry slideshow
and tiny links. That might be beautiful
on your desktop but it's customer
repellent on a mobile phone. Which
of course is not cool.

23. This time your theme is responsive....
Person clicks on your ad. They want to quickly see your
menu and your prices. Your theme has beautifully
responded to the smaller screen on their
phone. Instead of the slideshow & tiny
links, they see big Beautiful buttons they
can easily touch.

24. Let me show you the way...
•
•
•
•
•
This time your theme is responsive....
Person clicks on your ad.
They want to quickly see your menu and your prices.
Your theme has beautifully responded to the smaller
screen on their phone.
Instead of the slideshow & tiny links, they see big
beautiful buttons they can easily touch.

25. They browse your menu, check your hours without any
hassle from their phone. 10 minutes later they are dining
in your restaurant and complimenting your mobile
website.

26. Resources
WordPress Themes
http://codex.wordpress.org/Using_Themes
http://codex.wordpress.org/Child_Themes
http://codex.wordpress.org/Functions_File_Explained
http://wordpress.org/extend/themes/
Responsive Web Design
http://en.wikipedia.org/wiki/Responsive_web_design
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
http://www.w3.org/TR/css3-mediaqueries/

27. by Clifton Hatfield
http://cliftonhatfield.com
http://facebook.com/cliftonhatfied.page
http://empoweredblogs.com