0
THEME
FRAMEWORKS
A Glimpse Into
The Future Of
WordPress Themes
Presented by David Wang
WordCamp Malaysia 2010


          ...
Hi, I’m David Wang :)
aka @blogjunkie

Blogger, web geek (10 years+)

Freelance web design (5 years+)

Online Marketing St...
THEME

      ?
WHAT IS A

FRAMEWORK

            3
A Theme Framework Is A
Theme Framework Is Not A
Theme Framework
✓ Solid codebase to serve as a
  foundation for other proj...
5
X
Not 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 Them...
Premium Themes



                 +
                     custom.css




                 custom_functions.php




       ...
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 ...
16
WordPress for Businesses:
  Even Better as a CMS




                            17
Developers: Faster &
More Efficient Projects

         Standardised code
       Development helpers
       SEO & semantic ...
?
HOW DO
I START
          19
Types of Theme Frameworks
                                               Custom CSS &
   Child Theme        Upgradable Cor...
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...
Example: Thematic

                                 Parent Theme

                                   Child Theme




 Pare...
Separate your customisations
• Create a file called custom.css in your theme directory.

• Modify your themeʼs header.php b...
TwentyTen - a great starting point

                                     27
Learn to use Hooks
• Put your custom functions into functions.php

• Hook the functions into WordPress actions & filters

•...
Thematic Theme Hooks
thematic_before()              thematic_belowcommentslist()

thematic_aboveheader()         thematic_...
WP 3.0 Features make
frameworks more powerful
✓   Improved Child Theme support
✓   Custom header image
✓   Custom backgrou...
Theme Frameworks are
The Future
✓ Premium themes will add features
  to cater to power users
✓ Regular themes will add fea...
Thanks for listening!
        David Wang
        @blogjunkie
     http://blogjunkie.net
   http://buzzmedia.com.my




   ...
Upcoming SlideShare
Loading in...5
×

Theme Frameworks: The Future Of WordPress Themes

3,128

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,128
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
72
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Theme Frameworks: The Future Of WordPress Themes"

  1. 1. THEME FRAMEWORKS A Glimpse Into The Future Of WordPress Themes Presented by David Wang WordCamp Malaysia 2010 1
  2. 2. Hi, I’m David Wang :) aka @blogjunkie Blogger, web geek (10 years+) Freelance web design (5 years+) Online Marketing Strategy & Training 2
  3. 3. THEME ? WHAT IS A FRAMEWORK 3
  4. 4. A Theme Framework Is A Theme Framework Is Not A Theme Framework ✓ Solid codebase to serve as a foundation for other projects ✓ Theme hooks (actions & filters) ✓ Like developing a plugin 4
  5. 5. 5
  6. 6. X Not True Frameworks 6
  7. 7. A Little History 7
  8. 8. Themes - a major attraction 8
  9. 9. Themes you may have customised before 9
  10. 10. 10
  11. 11. Child Themes • Parent Theme forms the base • Customisations made in Child Theme • Upgrade by replacing Parent Theme 11
  12. 12. Premium Themes + custom.css custom_functions.php 12
  13. 13. Hooks - a defining characteristic of theme frameworks 13
  14. 14. WHY ? SHOULD I CARE 14
  15. 15. Bloggers: Build A Better Blog • More cost effective • Point & click options, widgets, child themes & skins • Better support 15
  16. 16. 16
  17. 17. WordPress for Businesses: Even Better as a CMS 17
  18. 18. Developers: Faster & More Efficient Projects Standardised code Development helpers SEO & semantic code Theme Hooks 18
  19. 19. ? HOW DO I START 19
  20. 20. Types of Theme Frameworks Custom CSS & Child Theme Upgradable Core Functons Sandbox, Thematic, WP-Framework, Frugal, Thesis, Hybrid Carrington Headway Create a Child Edit template files Edit custom CSS & Theme to customise directly to customise functions file Replace Parent Replace core files to Copy customisations Theme to upgrade upgrade to new theme 20
  21. 21. themehybrid.com 21
  22. 22. themeshaper.com/thematic 22
  23. 23. zy.sg/the-buffet-framework 23
  24. 24. 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 Theme Description: Example Child Theme Template: parent-theme */ /* Import the parent theme style (if you want) */ @import url(../parent-theme/style.css); 24
  25. 25. Example: Thematic Parent Theme Child Theme Parent & Child theme must be in the same directory 25
  26. 26. 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 <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/ custom.css" type="text/css" media="screen" /> • Modify the body tag to <body class="custom"> • Implement your customisations in custom.css .custom #header { /*custom styles for header*/ } 26
  27. 27. TwentyTen - a great starting point 27
  28. 28. 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 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'); 28
  29. 29. Thematic Theme Hooks thematic_before() thematic_belowcommentslist() thematic_aboveheader() thematic_abovecommentsform() thematic_header() thematic_belowcomments() thematic_blogtitle() thematic_abovemainasides() thematic_blogdescription() thematic_betweenmainasides() thematic_belowheader() thematic_belowmainasides() thematic_abovecomments() thematic_abovefooter() thematic_abovecommentslist() thematic_after() 29
  30. 30. WP 3.0 Features make frameworks more powerful ✓ Improved Child Theme support ✓ Custom header image ✓ Custom background image ✓ Simple navigation menus ✓ Author templates ✓ Custom post types & taxonomies 30
  31. 31. Theme Frameworks are The Future ✓ 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 31
  32. 32. Thanks for listening! David Wang @blogjunkie http://blogjunkie.net http://buzzmedia.com.my 32
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×