WordPress theme frameworks

WordPress Theme Frameworks. A Rough Guide. Wordcamp Ireland, 6th March 09.

Eddie Johnston Web Designer / Developer Strandhill, Sligo

What is a Framework?
word•press frame•work | w ə rd pres ˈ frām ˌ w ə rk |
noun
a theme designed specifically for customising & extending .
• an excellent foundation for custom theme development.
• a way to spend less time coding & more time designing.
ORIGIN c. 2006: Sandbox . (RIP Jan 22 nd , 2010)

What is a Framework?

Analogy ~ a Theme. Looks great. Built with particular functionality. Can be difficult to modify and personalise. Designed as an end product.

Analogy ~ a Framework. Looks drab. Built for multiple usage scenarios. Created with modification in mind.

Analogy ~ a Framework. Designed to be a solid starting point.

How They Work.
Act as a starting point .
Don’t edit Framework files.
Create a child theme to edit.
Inherit all functionality & style.
Just change the parts you need to.

Advantages.
 Give a great headstart.
 Minimum repetition.
 Consistent code in all projects.
 Core can be easily updated.
Changes wont be overwritten.

Creating a Framework. /* Theme Name: mychild Template: kubrick */ #headerimg { display:none; } #content .narrowcolumn { width:300px; } style.css function mychild_header_color () { . . . } add_filter( 'kubrick_header_color' , mychild_header_color ); > mkdir mychild; vim mychild/style.css; functions.php 2. Point to the framework. Style as required. 1. Create a child-theme directory and stylesheet. 3. Override specific functionality.

Poor Framework Themes.
Most themes are not suitable.
Markup is too light.
Functions cant be easily modified.

Poor Framework Themes. Not designed for expansion.

Poor Framework Themes. Changing appearance can be tricky Changing functionality can be a chore

Great Framework Themes.
Main characteristics:
Produce extensive, descriptive markup.
Provide multiple hooks.

Great Framework Themes. Solid foundations, designed to be built on .

Great Framework Themes. Customising is quick & easy.

Great Framework Themes.

Thematic.
An excellent framework.
Extensive markup.
Multiple hooks.
Modular CSS.
Great Widget functionality.
Community Developed.

Extensive Markup.
Semantic class and id labels.
<body class= "wordpress y2010 m03 d01 h10 home blog not-singular loggedin mac firefox ff3" > thematic <body class= ”home blog logged-in" > kubrick
Good SEO
nofollow feeds, noindex archives.

Multiple Hooks.
150 filters , 60 actions.
<h3> Title </h3> <h3> <span> Title </span> </h3>

Multiple Hooks.
150 filters , 60 actions.
function pre_widget_title ( $pre ) { return $pre . '<span>' ; } function post_widget_title ( $post ) { return '</span>' . $post ; } add_filter( 'thematic_before_title' , pre_widget_title ); add_filter( 'thematic_after_title' , post_widget_title ); functions.php <h3> <span> </span> </h3> <h3> </h3>

Multiple Hooks.
150 filters, 60 actions .
<p> Hello World </p>

Multiple Hooks.
150 filters, 60 actions .
function my_page_access () { ?> <div id= "access" > <div class= "menu" > <ul class= "sf-menu" > <li><a href= "http://perfectpints.com/.." >Find </a></li> <li><a href= "http://perfectpints.com/.." >Craic </a></li> <li><a href= "http://perfectpints.com/.." >Shop </a></li> <li><a href= "http://perfectpints.com/.." >Profile </a></li> </ul> </div> </div> <?php } remove_action( 'thematic_header' , thematic_access ); add_action( 'thematic_header' , my_page_access ); functions.php

Modular CSS.
Commonly re-used CSS separated.
/* Theme Name: mychild Template: thematic */ /* 1. Reset browser defaults */ @import url ( '../thematic/library/styles/reset.css' ); /* 2. Apply basic typography styles */ @import url ( '../thematic/library/layouts/2c-r-fixed.css' ); /* 3. Apply a basic layout */ @import url ( '../thematic/library/styles/18px.css' ); /* 4. Apply default theme styles and colors */ @import url ( '../thematic/library/styles/default.css' );

Great Widget Support.       

Community Developed. Anyone know how to add a span to the inside of every heading tag? If you wait till tomorrow, I should have an easy solution. Need to do some tests first.

Community Developed.

Community Developed. Super stuff, works a treat! Here you go. Check out the latest version from the source and add this to your code …

A Future Default WP Theme?

http://wpcharity.com	206
http://www.beanstalk.ie	69
http://www.slideshare.net	17
http://chat.wonderthemes.com	3
http://www.soochee.net	3
http://localhost	2
http://feeds.feedburner.com	2

WordPress theme frameworks

by Eddie Johnston on Mar 10, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 302

Statistics

WordPress theme frameworks — Presentation Transcript