Understanding the Relationship Between Parent & Child Themes (39
•Download as KEY, PDF•
1 like•1,282 views
This deck is from my WordCampKC talk on
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Understanding the Relationship Between Parent & Child Themes (39
Similar to Understanding the Relationship Between Parent & Child Themes (39 (20)
Recently uploaded
Recently uploaded (20)
Understanding the Relationship Between Parent & Child Themes (39
- 1. Understanding the Relationship Between Parent & Child Themes
- 2. Hashtag #thisisthebesttalkeveratawordcampanditsaboutparentan dchildthemesimeanhowcoolisthatright
- 4. About Me
- 5. About Me
- 7. About Me
- 8. About Me
- 9. About Me
- 10. About Me
- 11. What is a parent theme?
- 12. What is a child theme?
- 13. What is a child theme?
- 14. What is a child theme? “A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.”
- 15. What is a child theme? “A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.” That is what defines their relationship
- 16. Why a child theme?
- 17. Setup wp-content themes twentyten childtheme
- 18. Setup wp-content themes twentyten childtheme style.css
- 20. wp-content themes twentyten childtheme style.css /* Theme Name: Child Theme Theme URI: http: //example.com/ Description: Child theme for Twenty Ten Author: Tom Jenkins Author URI: http: //example.com/about/ Template: twentyten Version: 1.0 */
- 21. wp-content themes twentyten childtheme style.css /* Theme Name: Child Theme Theme URI: http: //example.com/ Description: Child theme for Twenty Ten Author: Tom Jenkins Author URI: http: //example.com/about/ Template: twentyten Version: 1.0 */
- 22. wp-content themes twentyten childtheme style.css /* Theme Name: Child Theme Theme URI: http: //example.com/ Description: Child theme for Twenty Ten Author: Tom Jenkins Author URI: http: //example.com/about/ Template: twentyten Version: 1.0 */
- 23. wp-content themes twentyten childtheme style.css /* Theme Name: Child Theme Theme URI: http: //example.com/ Description: Child theme for Twenty Ten Author: Tom Jenkins Author URI: http: //example.com/about/ Template: twentyten Version: 1.0 */ @import url("../twentyten/style.css");
- 24. The Flow Child Theme Parent Theme style.css style.css
- 25. The Flow Child Theme Parent Theme style.css style.css
- 26. The Flow Child Theme Parent Theme style.css style.css
- 28. The Flow Child Theme Parent Theme style.css style.css index.php index.php
- 29. The Flow Child Theme Parent Theme style.css style.css index.php index.php home.php
- 31. The Flow Child Theme Parent Theme style.css style.css index.php index.php functions.php functions.php
- 32. The Flow Child Theme Parent Theme style.css style.css index.php index.php functions.php + functions.php
- 33. The Flow Child Theme Parent Theme style.css style.css index.php index.php functions.php + functions.php function say_something($word) { echo "Bob says “ .$word; }
- 34. The Flow Child Theme Parent Theme style.css style.css index.php index.php functions.php + functions.php function say_something($word) { function say_something($word) { echo "Simon says “ .$word; echo "Bob says “ .$word; } }
- 35. The Flow Child Theme Parent Theme style.css style.css index.php index.php functions.php + functions.php function say_something($word) { function say_something($word) { echo "Simon says “ .$word; echo "Bob says “ .$word; } }
- 36. The Flow Child Theme Parent Theme style.css style.css index.php index.php functions.php + functions.php if (!function_exists('say_something')){ function say_something($word) { echo "Bob says “ .$word; } }
- 39. Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Actions and Filters
- 40. Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. function header_additions() { echo “I’m in the header section”; } add_action('wp_head', 'header_additions'); Actions and Filters
- 41. Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. function header_additions() { echo “I’m in the header section”; } add_action('wp_head', 'header_additions'); Actions and Filters Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen.
- 42. Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. function header_additions() { echo “I’m in the header section”; } add_action('wp_head', 'header_additions'); Actions and Filters function custom_excerpt_more( $more ) { return 'Read More...'; } add_filter( 'excerpt_more', 'custom_excerpt_more' ); Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen.
- 43. Parent Theme <div id=”header”> // Do some stuff if (has_action('child_header')) : do_action('child_header'); else : // Do other stuff endif; </div>
- 44. Parent Theme <div id=”header”> // Do some stuff if (has_action('child_header')) : do_action('child_header'); else : // Do other stuff endif; </div> Child Theme function child_header() { // inject some html to replace what’s there } add_action('child_header', 'child_header');
- 46. Buffet Framework http://wordpress.org/extend/themes/the-buffet-framework Carrington Core http://blog.carringtontheme.com/ Hybrid http://wordpress.org/extend/themes/hybrid Thematic http://wordpress.org/extend/themes/thematic
- 47. Understanding the @techguytom Relationship http://techguytom.com Between Parent & tom@techguytom.com Child Themes
Editor's Notes
- Get a feel for the room, get them pumped up - find out the understanding level of the room\n
- \n
- \n
- History WordPress 2.3 when moving from blogger for poker blog\nLearned WordPress by customizing my own site then some fellow bloggers sites and I integrated theme and plugin development into my freelance offerings\nI&#x2019;m an Adobe community manager and I manage a group called KCWebCore that meets here in the Regnier Center the second Thurday of the month. We focus on front end web development and were currently doing a group project to build a todo app for web and mobile. Another extra curricular activity I have is as the Technology Chair for the Social Media Club of KC.\nSo what do I do to earn a living... as I stand before you\n
- \n
- \n
- \n
- \n
- for those of you who wanted those bonus points, there I am, the sexy one\n
- for those of you who wanted those bonus points, there I am, the sexy one\n
- To get us started lets cover the basics and step through the terminology & process involved.\nWhen it comes to parent themes any theme that is capable of displaying the contents of your site can be used. There is a caveat though and we&#x2019;ll touch on that a little later.\nBut taking this into account means the base theme delivered with WordPress - 2010 or 2011 can be used as well as any other themes out there.\n
- Any theme that relies on another theme for some of it&#x2019;s functionality\n\n
- Codex: - A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.\n\n
- That statement helps define the relationship\n
- Technically that&#x2019;s easy, I want to differentiate Technically from Practically here because child themes may not be a fit for everyone.\nYou would want to use a child theme if you wanted the ability to update the parent theme with a new version and not have it affect the display of your site.\nSo how does a child theme work?\n
- To begin with we setup a folder for the theme just like any other theme\n
- In order to make this whole thing work all that&#x2019;s required is the style.css file\nand that&#x2019;s where the magic happens\n
- But your skeptical right, we all know that a style sheet does you no good without something to style. And you would be correct but the magic I mentioned comes from the fact that their is a hierarchy involved in the way WordPress handles child themes. So lets dive into that.\n
- At the very top of this stylesheet in the child theme directory we have make our declarations so WordPress knows we are making a them available. And if your used to seeing this you&#x2019;ll find that it looks like a regular themes declaration except for one extra field.\n...\nRight there, the template declaration. Now this is not the theme name but the directory name\n
- If your a minimalist kinda person you can actually just get away with these declarations.\nBut we need to add one more item to bring this all together.\n
- That is to import the parent themes stylesheet. You do this with the import rule and telling WordPress to go back out of it&#x2019;s current directory > into the parent theme directory > then load in the style.css file it finds in that directory. Having to load this file in hints at the way WordPress handles the child themes hierarchy.\n
- WordPress as it loads files will first look in the child theme for a file, if it finds it, it stops looking and uses that file, but if it doesn&#x2019;t find it, WordPress then looks in the parent directory.\n
- This is why we had to add the import rule to the child stylesheet file. We would loose much of the benefit of using a child theme if we had to recreate the entire stylesheet of the parent.\n\n
- And as surprising as it is, we have a functional basic child theme.\n(I know not as entertaining as skeptical dog but when you search for surprise and motivational you end up with a lot of not safe for conference results)\nThe issue though is that it&#x2019;s just a basic child theme.. We can change colors... We can move elements around on a page, but were really just making cosmetic changes. The core functionality of the parent isn&#x2019;t altered.\n
- To extend the power of the child theme beyond the mere cosmetic we need to refer back to our flow. Want to change the front page of your site?\n....\nadd an index file. \nWant to create a custom template? just create the file...\nyour now working just as if you were directly modifying the parent, but without the worry that an update is going to break anything.\n
- While changing and adding files to the directory, remember that WordPress loads everything according to the template heirarchy. If your not familiar with this, you can so a search on the codex or just refer to this link\n
- While were in there replacing files and changing layouts, we find out that there is a function we&#x2019;d like to add. So we add our own functions.php file and away we go right? Wrong, we now run into the same problem we had with the stylesheet. If the child functions file overwrites the parents, then we loose all the benefit of having the parent theme again. Fortunately WordPress knows so this particular file is handled in a completely different way than all the others. Instead of replacing the parents functions file, WordPress merely loads the child file first, then the parents. This has the benefit of being able to add functions to the theme.\n
- Now let&#x2019;s look at a bit of a different scenario. We have a function that outputs some text we pass into it. But in the child theme we want to alter this function in some way.\n.....\nSo instead of Bob says we want it to output Simon says, but this presents a bit of a problem.\n
- In PHP we cannot have more than one function with the same name, in this case that function would be say_something. For the coders out there we do have namespaces but WordPress hasn&#x2019;t integrated them and we need to think about backwards compatibility. So how do we get around this issue? Early I mentioned we had a caveat about using just any theme as a parent and this is a case where not every theme can actually be a parent theme. A theme that is designed to be a parent should have a safeguard added to all of it&#x2019;s functions.\n
- We accomplish this by adding a conditional statement around all parent theme functions, once thats done we now have the inherited ability to over-ride those functions in the child theme.\n
- Awesome, we&#x2019;ve now gone over the basics and set a foundation to allow you to leave here and begin using child themes. But what if you want to dabble in creating not just child themes, but also parent themes. We&#x2019;ve already talked about adding the conditional statements onto the parent themes functions, but in what other ways can we extend the functionality of the parent themes.\n
- So what are these?\nThe codex defines Actions as...\nUhhh, ok, what does that mean. To explain we&#x2019;ll do something by example. If you look at the header.php file in a theme, you should find a line with wp_head in it. When WordPress is parsing the header file and comes to that line, it know it needs to look for other functions within the theme, that are hooking into this call. This is accomplished by doing something like this....\nFilters...\n
- So what are these?\nThe codex defines Actions as...\nUhhh, ok, what does that mean. To explain we&#x2019;ll do something by example. If you look at the header.php file in a theme, you should find a line with wp_head in it. When WordPress is parsing the header file and comes to that line, it know it needs to look for other functions within the theme, that are hooking into this call. This is accomplished by doing something like this....\nFilters...\n
- So what are these?\nThe codex defines Actions as...\nUhhh, ok, what does that mean. To explain we&#x2019;ll do something by example. If you look at the header.php file in a theme, you should find a line with wp_head in it. When WordPress is parsing the header file and comes to that line, it know it needs to look for other functions within the theme, that are hooking into this call. This is accomplished by doing something like this....\nFilters...\n
- So what are these?\nThe codex defines Actions as...\nUhhh, ok, what does that mean. To explain we&#x2019;ll do something by example. If you look at the header.php file in a theme, you should find a line with wp_head in it. When WordPress is parsing the header file and comes to that line, it know it needs to look for other functions within the theme, that are hooking into this call. This is accomplished by doing something like this....\nFilters...\n
- So what are these?\nThe codex defines Actions as...\nUhhh, ok, what does that mean. To explain we&#x2019;ll do something by example. If you look at the header.php file in a theme, you should find a line with wp_head in it. When WordPress is parsing the header file and comes to that line, it know it needs to look for other functions within the theme, that are hooking into this call. This is accomplished by doing something like this....\nFilters...\n
- So what are these?\nThe codex defines Actions as...\nUhhh, ok, what does that mean. To explain we&#x2019;ll do something by example. If you look at the header.php file in a theme, you should find a line with wp_head in it. When WordPress is parsing the header file and comes to that line, it know it needs to look for other functions within the theme, that are hooking into this call. This is accomplished by doing something like this....\nFilters...\n
- So lets talk a real world example, At adcuda we developed our own in house framework and at one time considered going to a parent child theme setup for our client sites. We didn&#x2019;t want to have to reinvent the wheel on every build but our functionality was often different enough between builds that we would be swapping out parts of pages or would want to inject code on occasion.\n\n(discuss parent function....\n
- Now we&#x2019;ve seen a little more on the parent side and were super awesome. If you want to spend some time playing with child themes there are some themes or frameworks out there that are designed for specific use as parent themes.\n\n
- This is by no means an exhaustive list but some of the more popular themes to check out would be..\n\n
- for those of you who wanted those bonus points, there I am, the sexy one\n