Uploaded byEddie Johnston
WordPress theme frameworks
The document discusses WordPress theme frameworks and what makes a good framework. It provides examples of frameworks like Thematic that have extensive markup, multiple hooks for customization, and modular CSS. Good frameworks act as a solid starting point and make customizing themes quick and easy through their strong foundations and ability to be built upon.
More Related Content
Similar to WordPress theme frameworks
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
WordPress theme frameworks
- 1. WordPress Theme Frameworks.A Rough Guide. Wordcamp Ireland, 6th March 09.
- 2. Eddie Johnston WebDesigner / Developer Strandhill, Sligo
- 3.
- 4. What is aFramework? word•press frame•work | w ə rd pres ˈ frām ˌ w ə rk | noun a theme designed specifically for customising & extending . • an excellent foundation for custom theme development. • a way to spend less time coding & more time designing. ORIGIN c. 2006: Sandbox . (RIP Jan 22 nd , 2010)
- 5. What is aFramework?
- 6. Analogy ~ aTheme. Looks great. Built with particular functionality. Can be difficult to modify and personalise. Designed as an end product.
- 7. Analogy ~ aFramework. Looks drab. Built for multiple usage scenarios. Created with modification in mind.
- 8. Analogy ~ aFramework. Designed to be a solid starting point.
- 9. How They Work.Act as a starting point . Don’t edit Framework files. Create a child theme to edit. Inherit all functionality & style. Just change the parts you need to.
- 10. Advantages. Give a great headstart. Minimum repetition. Consistent code in all projects. Core can be easily updated. Changes wont be overwritten.
- 11. Creating a Framework./* Theme Name: mychild Template: kubrick */ #headerimg { display:none; } #content .narrowcolumn { width:300px; } style.css function mychild_header_color () { . . . } add_filter( 'kubrick_header_color' , mychild_header_color ); > mkdir mychild; vim mychild/style.css; functions.php 2. Point to the framework. Style as required. 1. Create a child-theme directory and stylesheet. 3. Override specific functionality.
- 12. Poor Framework Themes.Most themes are not suitable. Markup is too light. Functions cant be easily modified.
- 13. Poor Framework Themes.Not designed for expansion.
- 14. Poor Framework Themes.Changing appearance can be tricky Changing functionality can be a chore
- 15. Great Framework Themes.Main characteristics: Produce extensive, descriptive markup. Provide multiple hooks.
- 16. Great Framework Themes.Solid foundations, designed to be built on .
- 17. Great Framework Themes.Customising is quick & easy.
- 18.
- 19. Thematic. An excellentframework. Extensive markup. Multiple hooks. Modular CSS. Great Widget functionality. Community Developed.
- 20. Extensive Markup. Semantic class and id labels. <body class= "wordpress y2010 m03 d01 h10 home blog not-singular loggedin mac firefox ff3" > thematic <body class= ”home blog logged-in" > kubrick Good SEO nofollow feeds, noindex archives.
- 21. Multiple Hooks. 150 filters , 60 actions. <h3> Title </h3> <h3> <span> Title </span> </h3>
- 22. Multiple Hooks. 150 filters , 60 actions. function pre_widget_title ( $pre ) { return $pre . '<span>' ; } function post_widget_title ( $post ) { return '</span>' . $post ; } add_filter( 'thematic_before_title' , pre_widget_title ); add_filter( 'thematic_after_title' , post_widget_title ); functions.php <h3> <span> </span> </h3> <h3> </h3>
- 23. Multiple Hooks. 150filters, 60 actions . <p> Hello World </p>
- 24. Multiple Hooks. 150filters, 60 actions . function my_page_access () { ?> <div id= "access" > <div class= "menu" > <ul class= "sf-menu" > <li><a href= "http://perfectpints.com/.." >Find </a></li> <li><a href= "http://perfectpints.com/.." >Craic </a></li> <li><a href= "http://perfectpints.com/.." >Shop </a></li> <li><a href= "http://perfectpints.com/.." >Profile </a></li> </ul> </div> </div> <?php } remove_action( 'thematic_header' , thematic_access ); add_action( 'thematic_header' , my_page_access ); functions.php
- 25. Modular CSS. Commonlyre-used CSS separated. /* Theme Name: mychild Template: thematic */ /* 1. Reset browser defaults */ @import url ( '../thematic/library/styles/reset.css' ); /* 2. Apply basic typography styles */ @import url ( '../thematic/library/layouts/2c-r-fixed.css' ); /* 3. Apply a basic layout */ @import url ( '../thematic/library/styles/18px.css' ); /* 4. Apply default theme styles and colors */ @import url ( '../thematic/library/styles/default.css' );
- 26.
- 27.
- 28.
- 29. Great Widget Support.
- 30. Community Developed. Anyoneknow how to add a span to the inside of every heading tag? If you wait till tomorrow, I should have an easy solution. Need to do some tests first.
- 31.
- 32. Community Developed. Superstuff, works a treat! Here you go. Check out the latest version from the source and add this to your code …
- 33. A Future DefaultWP Theme?
- 34. A Future DefaultWP Theme?
Editor's Notes
- #2 This Session on WordPress Theme Frameworks covered what frameworks are, how they work and why theme developers should use them. It also gave an overview of the Thematic framework, described its main features and gave some real world examples of these features in use.
- #3 I came from a Computer Science background originally. I spent a long time in research (in Machine Learning / Artificial Intelligence) and was more of a programmer than a designer but always had an interest in website design and development, mostly as a hobby. I decided to move to the Northwest of Ireland (Sligo) about a year ago and because there weren’t too many jobs going in AI decided to try turn my hobby into my career. I set up a small web development business called Beanstalk.
- #4 I figured that a lot of my work would be WordPress related (most of the people I work with are small business owners) and had been playing about with themes for long enough to realise that if I was to do this as my job, I’d need a good solid platform to work from (otherwise I’d be making life hard for myself). I started doing some research into good base themes. Initially I worked with Kubrick as a starting point but knew there had to be a better approach. I moved from Kubrick to Sandbox which was much better, and eventually settled on using Thematic as the base to all of my work. My Workflow has improved immensely through the use of Framework and I’d thoroughly recommend giving them a whirl.
- #5 So what exactly IS a Framework? It’s just a theme. But one designed specifically for customising & extending. The first real Framework was Sandbox which was released in 2006 by Scott Wallick and Andy Skeleton. IT was different from other themes at the time in that it had a very minimalist style (almost a blank canvas) but very expressive and well marked up html.
- #6 Sandbox was the first WP theme to use contextual classes which allowed almost anything to be changed visually via CSS alone (I.e. without editing the PHP of the theme). The Idea for Sandbox originated in Nepal where Wallick spent three years on a Peace Corps placement. He was sick of downloading bloaty, meaty blogs with his 28kb modem and started working on a minimalist theme that would later develop into Sandbox. Development of Sandbox stopped in 2010 because the key functions that generated the contextual classes had been ported to WP Core.
- #7 If a framework is a theme, then how do they differ? Themes (like designer computers) are really designed as an end product and can be difficult to personalise.
- #8 A framework is like a kit pc. They look drab out of the box but are designed to be personalised.
- #9 You can end up with some highly functional, great looking products.
- #10 Frameworks work by acting as a starting point for theme development. You don’t actually edit the framework files themselves but create a child theme. The child theme inherits all of the style and functionality of the parent theme so you just have to change the parts you need to. This has a number of advantages.
- #11 Frameworks give a great headstart to your design projects because all of the basic will be in place (like structure, text formatting, typography, line spacing) and you just have to add the style / function that’s unique to every theme. You’ll have consistent code across all of your projects (which makes theme easier to maintain) and the core Framework files an be updated easily without affecting your child themes.
- #12 Creating and using a Framework is easy. Just create a child theme directory, point to the Framework from your style.css file and start overriding or styling the CSS in the same file. You can override specific functionality in your child themes functions.php file if you wish, but this isn’t a required step. Note that ANY theme can be used as a Framework. In this example we’re using Kubrick as our Framework (!)
- #13 However, most themes are unsuitable for use as a Framework because the markup the produce (I.e. the (x)html) is too light and not designed to be extended with ease. The functions within the theme are often difficult to override too.
- #14 Most themes aren’t designed for expansion / personalisation because they don’t have a solid foundation designed for building on.
- #15 Changing their appearance and functionality can be tricky and is likely to involve a lot of work.
- #16 Great Framework themes output very extensive markup (ala Sandbox) that is easy to style. They provide multiple opportunities for changing their functionality through the provision of action and filter hooks (explained later).
- #18 Customising a good Framework theme is easy and the amount of work involved will be minimal relative to the scale of the Framework.
- #19 The more you use and get used to Frameworks, the more you’ll benefit from them.
- #20 Thematic, released in 2008 by Ian Stewart, is an excellent Framework to use. There are others, but Thematic appears to be the most popular in online polls and for good reason, At time of writing, the current release is 0.9.6.2.
- #21 Thematic produces markup like Sandbox (the classes are probably a little more developed). If you wanted, you could do things like rotate the theme of you blog in line with the time of year (or time of day) using CSS alone. While most themes produce pretty good semantic markup these days (I.e., they use html elements as per how they were designed to be used, tables for tabular data, italics for emphasis text etc), Thematic has a few things it does quite well, like nofollow links to your RSS feeds by default, and noindex your blog archives to minimise duplicate content. The great things about all of these features is that they can be very easily overridden or removed.
- #22 You can override the functionality of Thematic through its Filter and Action Hooks. A filter is basically an opportunity to ‘filter’ the default output of the Framework. Thematic provides approximately 150 filterable functions. As an example, suppose you wanted to change the tags that surround the titles of your widgets. By default, these are level-three headings (<h3>’s), We might want to put a span between the headings and the title text to allow us to easily use an image for the title instead of text (this is an old image replacement technique, it would be advisable to use something like sIFR nowadays).
- #23 To do this, we would just need to add our own filter to the Thematic functions that produce the opening and closing <h3> tags - thematic_before_title and thematic_after_title. Our filters simply take the output of these default functions and add a span to them. Done!
- #24 An action is like a placeholder in the Framework that you can inject your own code into.
- #25 In this example, I’m removing the menu that is created by the Framework and putting in a static men that points to pages on another domain. Again, this is straightforward to do and can be implemented in your functions.php file. You don’t have to go editing the header template.
- #26 Thematic comes with a number of minimalist but functional CSS files as standard. This example is best viewed by downloading the Framework and commenting out each stylesheet in turn. You can choose to use these basic styles as your own core sylesheet or create a custom one.
- #27 I’ve made my own core stylesheet with a strict grid-based layout. This makes it much easier to create nice layouts as every element has its place on the grid.
- #28 I create a separate stylesheet for each new project to style colours, images, alignment etc. The core styles are inherited from my core sheet.
- #29 Using Thematic and a good core stylesheet allows me to create any kind of design, they don’t all have too look similar.
- #30 Thematic makes working with Widgets extremely easy. There are 13 widget areas in the current release (some of which are shown above). To use the widget areas, you just drag and drop you widgets into the required bar in the back-end. Installation of widgets is also easy - just create a widgets directory in your child theme and drop the widget files into them. Thematic automatically scans for this widgets directory when its building the widget list.
- #31 One of the aspects of Thematic that makes it really stand out are the excellent help forums. When I first started using it, I posted a question on the forum which had a response from one of the Thematic contributors within a few minutes..
- #32 I left it with him overnight and came back to the forum the following day.
- #33 Chris had created a new release of Thematic with the two new hooks overnight. I downloaded the latest version from the repository and my problem was solved. Amazing.
- #34 One of the other reasons for using Thematic over other themes is the recent news that Ian Stewart announced.
- #35 Ian is now working as part of the new Theme team with Automattic, so we’re likely to see some of the features that make Thematic great in future WP default themes. Enough said, download Thematic now at http://themeshaper.com/.