Wordpress
Themes From Scratch
Clients

They want what they
want

They want it quickly

They will change
their minds

Changes should be
easy
Wordpress as CMS

Wordpress is not
just for blogs

Use static pages
for static content

Some sites don’t
update frequently
“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
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/
Grid Layouts
Very flexible

24 columns, 30px
wide, 10px gutters

Span columns as
necessary

Consistent alignment
looks neat and
professional
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
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
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
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
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
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
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
But I don’t wanna make
a theme from scratch!
  Where can I download a cool theme?
Smashing
    Magazine
         http://
www.smashingmagazine.com/
     tag/wordpress/
So Many Themes!! Why
  Make a New One?


Your client wants what they want

That theme doesn’t exist yet
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
A new way?


http://www.divine-
project.com/

I haven’t tried it yet.
Your guess is as good
as mine. Looks shiny!

Wordpress Themes From Scratch

  • 1.
  • 2.
    Clients They want whatthey want They want it quickly They will change their minds Changes should be easy
  • 3.
    Wordpress as CMS Wordpressis not just for blogs Use static pages for static content Some sites don’t update frequently
  • 4.
    “Support the Heroes” Customsite 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 designis 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 24columns, 30px wide, 10px gutters Span columns as necessary Consistent alignment looks neat and professional
  • 7.
    Blueprint PSD Template Includesguides 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 Wordpresstheme 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 ~100lines 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 pageshad 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 canpublish 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'); ?> <?phpwp_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 neededcomplex 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’twanna 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 atheme, 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/ Ihaven’t tried it yet. Your guess is as good as mine. Looks shiny!