Templates
• WordPress uses only a few
basic templates
• This means less places to make
changes that affect the whole site
...
Meet the templates
header.php
index.php
sidebar.php
footer.php
archive.php
single.php
comments.php
page.php
search.php
404...
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 instructions
in a...
Typical CSS format
#site-title {
float: left;
font-size: 30px;
color: #515151;
font-weight: bold;
line-height: 36px;
margi...
Small Changes/Big Impact
1. Header and footer
2. Background
3. Color scheme
4. Fonts
5. Plugin styles
Start with the low-h...
1. Header
• Change/remove title, description
• Add/change header image
Footer
• add navigation/links
• Add/change backgrou...
2. Background
• Change/add page background image
body {background-color:#b0c4de;}
• Change/add page background color
body ...
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 help
http://www...
4. Fonts
Basic HTML font styles are easy to
control via style sheet
p, H1, H2, H3...
p {
font-family:"Lucida Grande", "Luc...
Web fonts/@fontface
Allows you to use virtually any font as
a true text element. No longer limited
by traditional browser-...
Web fonts/@fontface
http://code.google.com/webfonts
Typical @fontface CSS code
@font-face {
font-family: 'Colaborate';
src: url('http://kernest.com/embed/colaborate-regular')...
5. Plugin style hacks
• Don’t be afraid to dig into
plugin stylesheets to make
further customizations
General CSS tweak tips
• Use Web Developer Toolbar (FireFox)
or similar CSS identification tool
• Select the element you w...
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 homepage
index.php, The loop starts here:
<?php if ( have_posts() ...
3. Adding sidebars
• Why? Added functionality
• How?
1. functions.php
<?php if ( function_exists ('register_sidebar'))
{ r...
3. Adding sidebars
• Why? Added functionality
1. functions.php
<?php if ( function_exists ('register_sidebar'))
{ register...
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, ju...
Flexible free themes
• TwentyTen
http://wordpress.org/extend/themes/twentyten
• Mystique
http://wordpress.org/extend/theme...
Pro (paid) themes
• Thesis
http://diythemes.com
• Headway
http://headwaythemes.com
• Genesis Framework
http://www.studiopr...
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 Framework
http://wpframework.com
• BLANK WordPress Theme
htt...
Blank themes
Built on WP Framework
Built on WP Framework
DIY theme resources
• WordPress Codex: Theme Development
http://codex.wordpress.org/Theme_Development
• How to Build a Cus...
Mykl Roventine
designer of things
myklroventine.com
@myklroventine
Thank
you!
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Upcoming SlideShare
Loading in...5
×

Making WordPress Your Own: Theme Customization & Creation

3,449

Published on

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

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,449
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
69
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide















































  • Making WordPress Your Own: Theme Customization & Creation

    1. 1. 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
    2. 2. Meet the templates header.php index.php sidebar.php footer.php archive.php single.php comments.php page.php search.php 404.php
    3. 3. Themes mainly powered by • style.css • functions.php
    4. 4. 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
    5. 5. 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; }
    6. 6. Small Changes/Big Impact 1. Header and footer 2. Background 3. Color scheme 4. Fonts 5. Plugin styles Start with the low-hanging fruit
    7. 7. 1. Header • Change/remove title, description • Add/change header image Footer • add navigation/links • Add/change background
    8. 8. 2. Background • Change/add page background image body {background-color:#b0c4de;} • Change/add page background color body {background-image:url('bgdesert.jpg');}
    9. 9. Mystique example - before
    10. 10. Mystique example - after
    11. 11. Mystique example - changes
    12. 12. 3. Color Scheme • Determine element colors and chance in the style sheet • ColorZilla Plugin (FireFox) can help http://www.colorzilla.com/firefox/
    13. 13. 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; }
    14. 14. 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/
    15. 15. Web fonts/@fontface http://code.google.com/webfonts
    16. 16. 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; }
    17. 17. 5. Plugin style hacks • Don’t be afraid to dig into plugin stylesheets to make further customizations
    18. 18. 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
    19. 19. Functionality upgrades 1. Custom pages 2. Modifying the Loop 3. Adding sidebars Going beyond the basics
    20. 20. 1. Custom pages • Provides flexibility to change layout based on needs <?php /* Template Name: Calendar */ ?>
    21. 21. 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; ?>
    22. 22. 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'); ?>
    23. 23. 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'); ?>
    24. 24. Additional sidebar examples
    25. 25. Additional sidebar examples
    26. 26. 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
    27. 27. 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
    28. 28. Pro (paid) themes • Thesis http://diythemes.com • Headway http://headwaythemes.com • Genesis Framework http://www.studiopress.com/themes/genesis
    29. 29. Thesis site options
    30. 30. Headway configuration
    31. 31. Headway visual editor
    32. 32. Make your own theme • Use a blank theme or framework* • Start from scratch :( *Do this
    33. 33. 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/
    34. 34. Blank themes
    35. 35. Built on WP Framework
    36. 36. Built on WP Framework
    37. 37. 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
    38. 38. Mykl Roventine designer of things myklroventine.com @myklroventine Thank you!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×