Theme Frameworks: The Future Of WordPress Themes
-
Upload
buzzmedia-online-marketing -
Category
Technology
-
view
3.914 -
download
0
description
Transcript of Theme Frameworks: The Future Of WordPress Themes
![Page 1: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/1.jpg)
THEME FRAMEWORKSA Glimpse Into The Future Of WordPress ThemesPresented by David WangWordCamp Malaysia 2010
1
![Page 2: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/2.jpg)
Hi, I’m David Wang :)
aka @blogjunkie
Blogger, web geek (10 years+)
Freelance web design (5 years+)
Online Marketing Strategy & Training
2
![Page 3: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/3.jpg)
?WHAT IS A THEME FRAMEWORK
3
![Page 4: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/4.jpg)
✓ 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
![Page 5: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/5.jpg)
5
![Page 6: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/6.jpg)
XNot True Frameworks
6
![Page 7: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/7.jpg)
A Little History
7
![Page 8: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/8.jpg)
Themes - a major attraction
8
![Page 9: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/9.jpg)
Themes you may have customised before
9
![Page 10: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/10.jpg)
10
![Page 11: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/11.jpg)
Child Themes
• Parent Theme forms the base
• Customisations made in Child Theme
• Upgrade by replacing Parent Theme
11
![Page 12: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/12.jpg)
Premium Themes
custom.css
custom_functions.php
+
12
![Page 13: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/13.jpg)
Hooks - a defining characteristic of theme frameworks
13
![Page 14: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/14.jpg)
?WHY SHOULD I CARE
14
![Page 15: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/15.jpg)
Bloggers:Build A Better Blog• More cost effective
• Point & click options, widgets, child themes & skins
• Better support
15
![Page 16: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/16.jpg)
16
![Page 17: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/17.jpg)
WordPress for Businesses: Even Better as a CMS
17
![Page 18: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/18.jpg)
Developers: Faster & More Efficient Projects
Standardised code
Development helpers
SEO & semantic code
Theme Hooks
18
![Page 19: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/19.jpg)
?HOW DO I START
19
![Page 20: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/20.jpg)
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
![Page 21: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/21.jpg)
themehybrid.com
21
![Page 22: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/22.jpg)
themeshaper.com/thematic
22
![Page 23: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/23.jpg)
zy.sg/the-buffet-framework
23
![Page 24: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/24.jpg)
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
![Page 25: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/25.jpg)
Parent Theme
Child Theme
Example: Thematic
Parent & Child theme must be in the same directory
25
![Page 26: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/26.jpg)
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
![Page 27: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/27.jpg)
TwentyTen - a great starting point
27
![Page 28: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/28.jpg)
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
![Page 29: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/29.jpg)
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
![Page 30: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/30.jpg)
✓ 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
![Page 31: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/31.jpg)
✓ 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
![Page 32: Theme Frameworks: The Future Of WordPress Themes](https://reader034.fdocuments.in/reader034/viewer/2022051512/5405659b8d7f729e768b4c2e/html5/thumbnails/32.jpg)
Thanks for listening!David Wang@blogjunkie
http://blogjunkie.nethttp://buzzmedia.com.my
32