Making WordPress Your Own: Theme Customization & Creation
-
Upload
mykl-roventine -
Category
Technology
-
view
3.299 -
download
2
description
Transcript of Making WordPress Your Own: Theme Customization & Creation
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!