You can put your own stamp on virtually any theme. You just need a basic understanding what how WordPress works. This session will explore the basic functions and templates that make WordPress tick. Then you'll get your hands dirty by customizing a number of popular free and premium themes. Wanna go all the way? We'll also discuss the steps to create your own theme from scratch. Presented at the first WordCamp Minneapolis/St. Paul (wordcampmsp).

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

7. Meet the templates
header.php
index.php
sidebar.php
footer.php
archive.php
single.php
comments.php
page.php
search.php
404.php

9. Themes mainly powered by
• style.css
• functions.php

13. PSA: Our friend the style sheet
• Cascading style sheets (CSS)
are not to be feared
• Simple, text-based instructions
in a specific format
• Follow the format and make
your dreams come true

14. 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;
}

15. Small Changes/Big Impact
1. Header and footer
2. Background
3. Color scheme
4. Fonts
5. Plugin styles
Start with the low-hanging fruit

16. 1. Header
• Change/remove title, description
• Add/change header image
Footer
• add navigation/links
• Add/change background

17. 2. Background
• Change/add page background image
body {background-color:#b0c4de;}
• Change/add page background color
body {background-image:url('bgdesert.jpg');}

18. Mystique example - before

19. Mystique example - after

20. Mystique example - changes

21. 3. Color Scheme
• Determine element colors and
chance in the style sheet
• ColorZilla Plugin (FireFox) can help
http://www.colorzilla.com/firefox/

22. 4. Fonts
Basic 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;
}

23. 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/

24. Web fonts/@fontface
http://code.google.com/webfonts

25. 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;
}

26. 5. Plugin style hacks
• Don’t be afraid to dig into
plugin stylesheets to make
further customizations

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

28. Functionality upgrades
1. Custom pages
2. Modifying the Loop
3. Adding sidebars
Going beyond the basics

29. 1. Custom pages
• Provides flexibility to change layout
based on needs
<?php
/*
Template Name: Calendar
*/
?>

30. 2. Modifying the Loop
• Change way posts appear
on blog homepage
index.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; ?>

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

32. 3. Adding sidebars
• Why? Added functionality
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'); ?>

33. Additional sidebar examples

34. Additional sidebar examples

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

36. Flexible free themes
• TwentyTen
http://wordpress.org/extend/themes/twentyten
• Mystique
http://wordpress.org/extend/themes/mystique
• Magazine Basic
http://wordpress.org/extend/themes/magazine-basic

37. Pro (paid) themes
• Thesis
http://diythemes.com
• Headway
http://headwaythemes.com
• Genesis Framework
http://www.studiopress.com/themes/genesis

38. Thesis site options

39. Headway configuration

40. Headway visual editor

41. Make your own theme
• Use a blank theme or framework*
• Start from scratch :(
*Do this

42. Blank themes
• Thematic
http://themeshaper.com/thematic/
• WP Framework
http://wpframework.com
• BLANK WordPress Theme
http://digwp.com/2010/02/blank-wordpress-theme/
http://digwp.com/2009/07/free-html-5-wordpress-theme/ (HTML 5 version)
• Simon WordPress Blank Theme
http://simonwebdesign.com/simon-wordpress-framework-blank-theme/
• Whiteboard – A Lightweight WordPress Framework
http://whiteboardframework.com/

43. Blank themes

44. Built on WP Framework

45. Built on WP Framework

46. DIY theme resources
• WordPress Codex: Theme Development
http://codex.wordpress.org/Theme_Development
• How to Build a Custom WordPress
Theme from Scratch
http://www.blog.spoongraphics.co.uk/
tutorials/how-to-build-a-custom-wordpress-
theme-from-scratch

47. Mykl Roventine
designer of things
myklroventine.com
@myklroventine
Thank
you!