A quick jaunt through the steps used to create one custom Wordpress site. Presented to Santa Cruz Wordpress Meetup on August 6, 2009

1. Wordpress
Themes From Scratch

2. Clients
They want what they
want
They want it quickly
They will change
their minds
Changes should be
easy

3. Wordpress as CMS
Wordpress is not
just for blogs
Use static pages
for static content
Some sites don’t
update frequently

4. “Support the Heroes”
Custom site made
using Wordpress as a
CMS to meet specific
client requirements
Wireframes for the
site were created by
another designer who
hasn’t used Wordpress
and then handed off
to me

5. CSS Framework
Visual design is custom,
gives client a unique
appearance
Framework should solve
problems but stay out of
the way
Grid based CSS
frameworks make layout
a snap
http://blueprintcss.org/

6. Grid Layouts
Very flexible
24 columns, 30px
wide, 10px gutters
Span columns as
necessary
Consistent alignment
looks neat and
professional

7. Blueprint PSD Template
Includes guides for all the
columns.
Layout your design so that
rectangular elements fit
within the grid lines
You can span columns in any
way you like
http://konigi.com/tools/
photoshop-template-
blueprint-css-comps

8. SF-Blueprint-WP
SF-Blueprint-WP is a
Wordpress theme based on
the Blueprint CSS framework.
Gives you a barebones layout
that is easy to modify for a
custom design
http://www.slipfire.com/sf-
blueprint-wp-theme-52.htm

10. Clean simple HTML
~100 lines of new or
changed CSS in
themes/SF-Blueprint-
WP/custom.css
~100 additional lines
of new CSS for
styling cforms II form

12. Page Columnist
Different pages had different layouts in
the wireframes
<!--nextpage--> by default makes a
multipage post in Wordpress
Page Columnist turns “pages” into
columns
Multi-column layout can still be easily
edited by non-technical user.
http://www.code-styling.de/english/
development/wordpress-plugin-page-
columnist-en
Warning: Plugin is hacker-unfriendly

13. Category Templates
You can publish posts to
specific categories
Categories can have unique
layouts for archives and
posts
Useful when “Case Study”
looks different than “Blog
Post” (etc)
http://codex.wordpress.org/
Category_Templates

14. Custom Navigation
<ul>
<?php
wp_list_pages('title_li=&include=2,16,29&children=1'); ?>
<?php wp_list_categories('title_li=&orderby=ID'); ?>
<?php
wp_list_pages('title_li=&depth=1&exclude=1,2,16,29,47,49,
51'); ?>
</ul>
http://codex.wordpress.org/Template_Tags/wp_list_pages

15. cforms II
Client needed complex
admission form on site
cforms II plugin makes it
possible to create and edit
forms using Wordpress admin
interface and Wordpress
database
http://
www.deliciousdays.com/
cforms-plugin

16. But I don’t wanna make
a theme from scratch!
Where can I download a cool theme?

17. Smashing
Magazine
http://
www.smashingmagazine.com/
tag/wordpress/

18. So Many Themes!! Why
Make a New One?
Your client wants what they want
That theme doesn’t exist yet

19. I found a theme, and it’s
ALMOST perfect
You can change it, but every theme uses
different HTML and CSS, you’ll have to
familiarize yourself with the author’s style

20. A new way?
http://www.divine-
project.com/
I haven’t tried it yet.
Your guess is as good
as mine. Looks shiny!