Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Making WordPress Your Own: Theme Customization & Creation

  • 3,736 views
Uploaded 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......

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,736
On Slideshare
3,687
From Embeds
49
Number of Embeds
2

Actions

Shares
Downloads
62
Comments
1
Likes
5

Embeds 49

http://www.myklroventine.com 44
http://localhost 5

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Transcript

  • 1. Templates • WordPressuses only a few basic templates • This means less places to make changes that affect the whole site •A handful of simple changes can
  • 2. Meet the templates header.php single.php index.php comments.p hp sidebar.php page.php footer.php search.php 404.php
  • 3. Themes mainly • style.css • functions.php
  • 4. PSA: Our friend the style • Cascading style sheets (CSS) are not to be feared • Simple, text-based instructions in a specific format • Followthe 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 Start with the low-hanging fruit 1. Header and footer 2. Background 3. Color scheme 4. Fonts 5. Sidebar
  • 7. 1. Header • Change/remove title, description • Add/change header image Footer • add navigation/links • Add/change header image
  • 8. 2. Background • Change/add page background image body {background-color:#b0c4de;} • Change/addpage background color body {background-image:url('bgdesert.jpg');}
  • 9. Mystique Example
  • 10. Mystique Example
  • 11. Mystique Example
  • 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.)
  • 15. Web fonts/@fontface
  • 16. Typical @fontface CSS @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;
  • 17. 5. Plugin style hacks • Don’t be afraid of digging into plugin stylesheets
  • 18. General CSS tweak • 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
  • 19. Functionality Going beyond the basics 1. Custom pages 2. Modifying the Loop 3. Adding sidebars
  • 20. 1. Custom pages • Providesflexibility to change layout based on needs <?php /* Template Name: Calendar */ ?>
  • 21. 2. Modifying the • 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>
  • 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
  • 25. Additional sidebar
  • 26. Customization tips • Make changes in stages, easier to go back/troubleshoot • Keep a unaltered copy of the theme handy, just in case • Nomatter how much you customize always credit the
  • 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
  • 31. Headway visual
  • 32. Make your own • Usea 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
  • 34. Blank themes
  • 35. Built on WP
  • 36. Built on WP
  • 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. Than k you! Mykl Roventine designer of things myklroventine.com @myklroventine