Your SlideShare is downloading. ×
Making WordPress Your Own: Theme Customization & Creation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Making WordPress Your Own: Theme Customization & Creation

3,239
views

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

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,239
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
64
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide















































  • Transcript

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