Templates

• WordPress uses only a few basic templates

• This means less places to make changes that affect the whole site

• A handful of simple changes can make a big difference

Meet the templates

header.php

index.php

sidebar.php

footer.php

archive.php

single.php

comments.php

page.php

search.php

404.php

Themes mainly powered by

• style.css

• functions.php

PSA: Our friend the style sheet

• Cascading style sheets (CSS) are not to be feared

• Simple, text-based instructionsin a specific format

• Follow the format and make your dreams come true

Typical CSS format#site-title { float: left; font-size: 30px; color: #515151; font-weight: bold; line-height: 36px; margin: 0 0 18px 0; width: 700px;}

Small Changes/Big Impact

1. Header and footer

2. Background

3. Color scheme

4. Fonts

5. Plugin styles

Start with the low-hanging fruit

1. Header• Change/remove title, description

• Add/change header image

Footer• add navigation/links

• Add/change background

2. Background

• Change/add page background imagebody {background-color:#b0c4de;}

• Change/add page background colorbody {background-image:url('bgdesert.jpg');}

Mystique example - before

Mystique example - after

Mystique example - changes

3. Color Scheme

• Determine element colors and chance in the style sheet

• ColorZilla Plugin (FireFox) can helphttp://www.colorzilla.com/firefox/

4. FontsBasic HTML font styles are easy to control via style sheet p, H1, H2, H3...

p { font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; font-size:1em; color:#000; }

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.)

http://kernest.com/ http://typekit.com/

Web fonts/@fontfacehttp://code.google.com/webfonts

Typical @fontface CSS code@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;}

5. Plugin style hacks

• Don’t be afraid to dig into plugin stylesheets to makefurther customizations

General CSS tweak tips

• Use Web Developer Toolbar (FireFox) or similar CSS identification tool

• Select the element you want to change

• Find that style in the CSS and change it

• Go slow and only change what you understand

• Save and preview often

Functionality upgrades

1. Custom pages

2. Modifying the Loop

3. Adding sidebars

Going beyond the basics

1. Custom pages

• Provides flexibility to change layout based on needs

<?php /* Template Name: Calendar */ ?>

2. Modifying the Loop

• Change way posts appear on blog homepageindex.php, The loop starts here:<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

and ends here:<?php endwhile; else: ?><p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>

3. Adding sidebars

• Why? Added functionality

• 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'); ?>

3. Adding sidebars

• Why? Added functionality1. 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'); ?>

Additional sidebar examples

Additional sidebar examples

Customization tips• Make changes in stages, easier

to go back/troubleshoot

• Keep a unaltered copy of the theme handy, just in case

• No matter how much you customize always credit the original theme designer

Flexible free themes• TwentyTen

http://wordpress.org/extend/themes/twentyten

• Mystiquehttp://wordpress.org/extend/themes/mystique

• Magazine Basichttp://wordpress.org/extend/themes/magazine-basic

Pro (paid) themes

• Thesishttp://diythemes.com

• Headwayhttp://headwaythemes.com

• Genesis Frameworkhttp://www.studiopress.com/themes/genesis

Thesis site options

Headway configuration

Headway visual editor

Make your own theme

• Use a blank theme or framework*

• Start from scratch :(

*Do this

Blank themes• Thematic

http://themeshaper.com/thematic/

• WP Frameworkhttp://wpframework.com

• BLANK WordPress Themehttp://digwp.com/2010/02/blank-wordpress-theme/http://digwp.com/2009/07/free-html-5-wordpress-theme/ (HTML 5 version)

• Simon WordPress Blank Themehttp://simonwebdesign.com/simon-wordpress-framework-blank-theme/

• Whiteboard – A Lightweight WordPress Frameworkhttp://whiteboardframework.com/

Blank themes

Built on WP Framework

Built on WP Framework

DIY theme resources

• WordPress Codex: Theme Developmenthttp://codex.wordpress.org/Theme_Development

• How to Build a Custom WordPress Theme from Scratchhttp://www.blog.spoongraphics.co.uk/tutorials/how-to-build-a-custom-wordpress-theme-from-scratch

Mykl Roventine designer of things myklroventine.com @myklroventine

Thankyou!