Pick up tips, tricks, and techniques that illuminate how WordPress can become a viable opportunity for you to provide professional web design and maintenance services to your clients. Explore free and premium themes, plugins, and other resources that are available to help jump-start your next project. You’ll also learn step-by-step instructions to customize themes with ease. Presented at AIGA Minnesota's Design Camp 2011.

1. Photo by Dex1138

2. Mykl
Roventine
Designer of Things
@myklroventine
myklroventine.com

3. Aaron
Smith
Smitty’s Workshop
@smittysmitty
smittypages.com

4. Assumptions

5. • You want to learn tips, tricks and
techniques on how WordPress can
become a viable opportunity for to
provide professional web design and
maintenance services to your clients
• You want to learn more about
premium and free themes, plugins
and other resources to help jump-
start your next project

6. • You want to customize WordPress
themes with ease
• You want to learn ways to prevent
headaches and heart-attacks when
deploying a WordPress site
• You have great taste in session choice

7. Overview

8. History
• First released on May 27, 2003, by Matt
Mullenweg
• Grown to be the largest self-hosted
blogging tool in the world, used on
millions of sites and seen by tens of
millions of people every day.
- wordpress.org

9. Stats
• WordPress is used by over 14.7% of
Alexa Internet's "top 1 million" websites
• Powers 22% of all new websites (As of 8/11)
• Wordpress is the most popular CMS on
the internet
• Version 3.0 has been downloaded over
32.5 million times (As of 2/11)
- Wikipedia

10. Why WordPress?
• Open Source
• Full Standards Compliance
• Free
• Flexible
• Awesome

11. .com vs .org
.com + .com -
• Free • Can’t run custom
themes
• Easy to setup
• Everything is taken • Can’t hack PHP code
care of: setup, • Can’t upload plugins
upgrades, spam,
backups, security, etc.

12. .com vs .org
.org (a.k.a hosted install)
• Can upload themes
• Can upload plugins
• Complete control to change code
• Need to pay for web host

13. Themes

14. WP Free Themes Directory
• Not very helpful
• Hard to determine quality

15. Get Recommendations

16. Anatomy of a
Great Theme
• Customizable - can add your own logo,
color scheme, change layout, etc.
• Flexible - can handle a variety of
different post types
• Adaptable - can grow with your needs
• Ongoing support and upgrades

26. Blank Themes
• Thematic
http://themeshaper.com/thematic/
• WP Framework
http://wpframework.com
• Whiteboard – A Lightweight WordPress
Framework
http://whiteboardframework.com/

29. Plugins

31. However...
Recent investigation of the current state
of the WordPress plugin repository found:
• More than half of the plugins in the
repository are not compatible with
WordPress 3.x.
• Only 32% of those 15,000+ plugins have
been updated in 2011!
- wpmu.org

32. The Times They Are
A-Changin'
Plugins not been updated in past two
years will be hidden both in the repository
and in the WP admin plugin search.
- Announced by Matt Mullenweg at WordCamp
San Francisco in August 2011

33. Do your homework
• Check compatibility, when last updated
• Average rating, others’ comments/issues

42. Customization

43. Case Study:
Adding Sidebars

44. • Why? Added functionality, can use widgets
• How?
1. functions.php
<?php if ( function_exists ('register_sidebar'))
{ register_sidebar ('custom');
} ?>
2. Copy sidebar.php (sidebar2.php)
3. Call where needed
<?php include ('sidebar-cat.php'); ?>

47. Other Options
• Visual Composer for WordPress (paid)
• Magic Fields Plugin (free)

53. Case Study:
Mystique Theme

57. Case Study:
Luxury Theme

73. Case Study:
Realtor Search Tool

79. Case Study:
Events Calendar Pro

84. Typography

85. Web Fonts/@fontface
Allows you to use virtually any font as a
true text element. No longer limited by
traditional browser-safe fonts (Arial,
Verdana, Times, etc.)

86. Case Study:

87. @fontface
@font-face {
font-family: 'Colaborate';
src: url('http://kernest.com/embed/colaborate-regular'),
url('http://kernest.com/embed/colaborate- regular#colabreg')
format('svg');
}
#content h1 {
color: #000;
font-family: 'Colaborate', Geneva, 'Lucida Sans', 'Lucida
Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
font-size:32px;
}

88. Case Study:

89. Alternative Uses

90. Landing Page

91. Pages Only (No Blog)

93. Case Study:
Visitor Kiosk

103. Case Study:
Wireframing

107. Peace of Mind

114. Get Help

117. Thank You!