theme frameworks: the future of wordpress themes
Post on 01-Sep-2014
3.913 Views
Preview:
DESCRIPTION
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
top related