PSD to WP

DISCLAIMER

Assuming strong familiarity of html and css

And some familiarity with wordpress itself.

Theme design courtesy of Zsolt Kacso (@kaolti)

my personal favorite

Hooks, Actions and Filters

Hooks are provided by WordPress to allow your plugin to 'hook into' the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion. There are two kinds of hooks:

psd2wp.circlecube.com

Wireframe, get content areas (widgets) blocked out

Info Archietecture, get the proper post types and think through any needed templates

CSS, using images and styles to get things visual

JS, making any client-side scripts lively

I try to build sites using a loose workflow cycle.

1. Layout

2. Structure

3. Style/Design

4. Interactive

5. Population

rinse and repeat

Data-entry

Ideally we should put this code into a theme functionality plugin to separate the functionality from the visual style. Some think it's best to put that into a plugin so the theme can be changed.

But that's beyond the scope of this presentation, so I'm just going to show you the code to do it and include it in the theme for now.

Templates

Widgets

Theme Options

Building

Making the theme

getting started

A word about workflow

Structure-ing

Home

and other "special" pages

getting the right content types

getting the right content in the right places,

Create custom post type

Custom post type

Thematic overrides

Using the widget area we made previously

Layout-ing

or creating the right places to put the content

WordPress Widgets are WordPress Plugins that add visitor visual and interactivity options and features, such as sidebar widgets for post categories, tag clouds, navigation, search, etc. They were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user in the sidebar, which is now available on properly "widgetized" WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure.

Create custom taxonomy

http://themergency.com/generators/wordpress-custom-post-types/

Meta Boxes

Populate-ing

getting the right content in

Design-ing

getting the right content styled

FTP-ing

javascript-ing

getting the right content interactive

CSS-ing

slice and dice

Photoshop-ing

Refresh-ing

?

Thanks!

WordCamp Atlanta 2012

Evan Mullins @circlecube

From PSD

to WP Theme

Types of themes

free, premium, framework, standalone, child, custom

Custom built vs Customized

Free vs Premium

unlimited power

find a theme at least similar to what you want and modify it to suit your needs

Free, duh

High quality

you own all the code,

but you own all the code.

faster

Needle in a

haystack

$

Support

not future proof

Theme Options

hard to stray too far from the original

Give back:

you can sumbit it

to the theme repo!

you only get what you find

Standalone vs Frameworks

A Theme framework is a Theme designed to be a flexible foundation for quicker WordPress development, usually serving as a robust Parent Theme for Child Themes. Some Theme frameworks can also make theme development more accessible, removing the need for programming or design knowledge with options pages.

Parent - Child relationships

Popular Frameworks or parent themes

Atahualpa

The Buffet Framework

Carrington

Hybrid Core

Sandbox

Thematic

WP Framework

PressWork

K9 Canvas

2010

2011

built-in updates

Simple

Robust

inherited functionality

Start from scratch

Community Support

Under the skin

Repetitive

Speed after a Learning Curve

Maintenance responsibilities

Adds another layer for beginners:

on top of learning WordPress you have to learn the framework.

Thematic

The ultimate in SEO-ready themes, Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus, grid-based layout samples, plugin integration, shortcodes for your footer, & a whole lot more. Perfect for any blog and the starting point for theme development.

We’ll cover how to get from photoshop to WordPress. There are many different roads to a theme. We’ll go over a few possibilities and then cover getting from a design in photoshop to an actual WordPress child theme while trying not to reinvent the wheel.

Hooks

filter

action

Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.

Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.

1. Create the PHP function that should execute when the event occurs, in your plugin file.

2. Hook to the action in WordPress, by calling add_action()

3. Put your PHP function in a plugin file, and activate it.

1. Create the PHP function that filters the data.

2. Hook to the filter in WordPress, by calling add_filter()

3. Put your PHP function in a plugin file, and activate it.

Additional Hooks/Filters in Thematic

You can sometimes accomplish the same goal with either an action or a filter. For example, if you want your plugin to change the text of a post, you might add an action function to publish_post (so the post is modified as it is saved to the database), or a filter function to the_content (so the post is modified as it is displayed in the browser screen).

What is a theme?

It is all the files that control the front-end and visual side of a site.

courtesy of Joost de Valk at yoast.com

Who am I?

Evan Mullins

circlecube

A theme is basically what the site looks like,

but can also potentially control a lot of features

(custom post types, widgets, etc)

Father of almost 3

Self-taught

• Currently Interactive Director at an Atlanta design agency, The Jones Group.

• Web Designing since 2006
• WordPress user since 2007
• Theming WP sites since 2008

• Running circlecube.com
• (interactive design blog
• and tuts) since 2006

Major benefit to a theme (or a CMS overall) is seperating design and content.

Themes are made up of a combination of files:

css, html, php, javascript

Themes or bust!

We'll make this theme today

Basic structure

or anatomy

• Header
• Content
• Aside
• Footer

Corporate Clean for Wordpres is based on the homonymous PSD template, which was designed and published by Zsolt Kacso.

http://mttdownloads.s3.amazonaws.com/projects/kaolti/corporateclean_psds.zip

Also check out Corporate Clean for Drupal

http://drupal.org/project/corporateclean

Theme template heirarchy

How WordPress determines which template to use on each page

WordPress looks for template files with specific names in the current Theme's directory and uses the first matching template file listed under the appropriate query section below.