theme frameworks: the future of wordpress themes
DESCRIPTION
WordPress Theme Frameworks make it easier and more efficient to customise your blog design. Developing for theme frameworks allow you to upgrade the core and add new features to your themes while keeping your customisations untouched.TRANSCRIPT
THEME FRAMEWORKSA Glimpse Into The Future Of WordPress ThemesPresented by David WangWordCamp Malaysia 2010
1
Hi, I’m David Wang :)
aka @blogjunkie
Blogger, web geek (10 years+)
Freelance web design (5 years+)
Online Marketing Strategy & Training
2
?WHAT IS A THEME FRAMEWORK
3
✓ Solid codebase to serve as a foundation for other projects
✓ Theme hooks (actions & filters)
✓ Like developing a plugin
A Theme Framework Is A Theme Framework Is Not A Theme Framework
4
5
XNot True Frameworks
6
A Little History
7
Themes - a major attraction
8
Themes you may have customised before
9
10
Child Themes
• Parent Theme forms the base
• Customisations made in Child Theme
• Upgrade by replacing Parent Theme
11
Premium Themes
custom.css
custom_functions.php
+
12
Hooks - a defining characteristic of theme frameworks
13
?WHY SHOULD I CARE
14
Bloggers:Build A Better Blog• More cost effective
• Point & click options, widgets, child themes & skins
• Better support
15
16
WordPress for Businesses: Even Better as a CMS
17
Developers: Faster & More Efficient Projects
Standardised code
Development helpers
SEO & semantic code
Theme Hooks
18
?HOW DO I START
19
Types of Theme Frameworks
Child Theme Upgradable Core Custom CSS & Functons
Sandbox, Thematic, Hybrid
WP-Framework, Carrington
Frugal, Thesis, Headway
Create a Child Theme to customise
Edit template files directly to customise
Edit custom CSS & functions file
Replace Parent Theme to upgrade
Replace core files to upgrade
Copy customisations to new theme
20
themehybrid.com
21
themeshaper.com/thematic
22
zy.sg/the-buffet-framework
23
Create a Child Theme• Upload the theme framework (parent theme) to your
themes directory.
• Create a new directory for your child theme and create a file called style.css in it. /* Theme Name: Child ThemeDescription: Example Child ThemeTemplate: parent-theme*/
/* Import the parent theme style (if you want) */@import url(../parent-theme/style.css);
24
Parent Theme
Child Theme
Example: Thematic
Parent & Child theme must be in the same directory
25
Separate your customisations• Create a file called custom.css in your theme directory.
• Modify your themeʼs header.php by adding the following between the <head> tags
• Modify the body tag to <body class="custom">
• Implement your customisations in custom.css
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom.css" type="text/css" media="screen" />
.custom #header { /*custom styles for header*/ }
26
TwentyTen - a great starting point
27
function insertFootNote($content) { $content.= " ?> <div class=\"footNote\"> <p>Don’t forget to subscribe to our RSS feed so you never miss a post!</p> </div> <?php "; return $content;}add_filter ('the_content', 'insertFootNote');
Learn to use Hooks• Put your custom functions into functions.php
• Hook the functions into WordPress actions & filters
• E.g. Hook your insertFootNote function to the_content
28
Thematic Theme Hooksthematic_before()
thematic_aboveheader()
thematic_header()
thematic_blogtitle()
thematic_blogdescription()
thematic_belowheader()
thematic_abovecomments()
thematic_abovecommentslist()
thematic_belowcommentslist()
thematic_abovecommentsform()
thematic_belowcomments()
thematic_abovemainasides()
thematic_betweenmainasides()
thematic_belowmainasides()
thematic_abovefooter()
thematic_after()
29
✓ Improved Child Theme support
✓ Custom header image
✓ Custom background image
✓ Simple navigation menus
✓ Author templates
✓ Custom post types & taxonomies
WP 3.0 Features make frameworks more powerful
30
✓ Premium themes will add features to cater to power users
✓ Regular themes will add features to become base themes
✓ Site owners benefit from maturity of themes ecosystem
Theme Frameworks are The Future
31
Thanks for listening!David Wang@blogjunkie
http://blogjunkie.nethttp://buzzmedia.com.my
32