Understanding theRelationship BetweenParent & Child Themes
Hashtag#thisisthebesttalkeveratawordcampanditsaboutparentan         dchildthemesimeanhowcoolisthatright
Hashtag  #wckc
About Me
About Me
About MeBetween Jobs
About Me
About Me
About Me
About Me
What is a parent theme?
What is a child theme?
What is a child theme?
What is a child theme? “A WordPress child theme is a themethat inherits the functionality of another  theme, called the pa...
What is a child theme?  “A WordPress child theme is a themethat inherits the functionality of another  theme, called the p...
Why a child theme?
Setupwp-content  themes    twentyten    childtheme
Setupwp-content  themes    twentyten    childtheme       style.css
wp-content                 themes                   twentyten                   childtheme                      style.css/...
wp-content                 themes                   twentyten                   childtheme                      style.css/...
wp-content                 themes                   twentyten                   childtheme                      style.css/...
wp-content                 themes                   twentyten                   childtheme                      style.css/...
The FlowChild Theme   Parent Theme style.css      style.css
The FlowChild Theme   Parent Theme style.css      style.css
The FlowChild Theme   Parent Theme style.css      style.css
The FlowChild Theme   Parent Theme style.css      style.css index.php     index.php
The FlowChild Theme   Parent Theme style.css      style.css index.php     index.php home.php
http://codex.wordpress.org/Template_Hierarchy
The FlowChild Theme     Parent Theme  style.css       style.css index.php       index.phpfunctions.php   functions.php
The FlowChild Theme         Parent Theme  style.css           style.css index.php           index.phpfunctions.php   +   f...
The FlowChild Theme           Parent Theme  style.css              style.css index.php               index.phpfunctions.ph...
The Flow           Child Theme              Parent Theme             style.css                 style.css            index....
The Flow           Child Theme              Parent Theme             style.css                 style.css            index....
The FlowChild Theme               Parent Theme  style.css                  style.css index.php                  index.phpf...
Actions and Filters
Actions are the hooks that the WordPress core launches atspecific points during execution, or when specific eventsoccur.Acti...
Actions are the hooks that the WordPress core launches atspecific points during execution, or when specific eventsoccur.func...
Actions are the hooks that the WordPress core launches atspecific points during execution, or when specific eventsoccur.func...
Actions are the hooks that the WordPress core launches atspecific points during execution, or when specific eventsoccur.func...
Parent Theme<div id=”header”>  // Do some stuff  if (has_action(child_header)) :    do_action(child_header);  else :    //...
Parent Theme      <div id=”header”>        // Do some stuff        if (has_action(child_header)) :          do_action(chil...
Buffet Frameworkhttp://wordpress.org/extend/themes/the-buffet-framework         Carrington Core       http://blog.carringt...
Understanding the                        @techguytom  Relationship      http://techguytom.comBetween Parent &             ...
Parent and child themes
Parent and child themes
Parent and child themes
Parent and child themes
Upcoming SlideShare
Loading in...5
×

Parent and child themes

2,368

Published on

This deck is from my WordCampKC talk on

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

  • Be the first to like this

No Downloads
Views
Total Views
2,368
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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&amp;#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 &amp; 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&amp;#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&amp;#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&amp;#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&amp;#x2019;s required is the style.css file\nand that&amp;#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&amp;#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&amp;#x2019;s current directory &gt; into the parent theme directory &gt; 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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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&amp;#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
  • Parent and child themes

    1. 1. Understanding theRelationship BetweenParent & Child Themes
    2. 2. Hashtag#thisisthebesttalkeveratawordcampanditsaboutparentan dchildthemesimeanhowcoolisthatright
    3. 3. Hashtag #wckc
    4. 4. About Me
    5. 5. About Me
    6. 6. About MeBetween Jobs
    7. 7. About Me
    8. 8. About Me
    9. 9. About Me
    10. 10. About Me
    11. 11. What is a parent theme?
    12. 12. What is a child theme?
    13. 13. What is a child theme?
    14. 14. What is a child theme? “A WordPress child theme is a themethat 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. 15. What is a child theme? “A WordPress child theme is a themethat 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. 16. Why a child theme?
    17. 17. Setupwp-content themes twentyten childtheme
    18. 18. Setupwp-content themes twentyten childtheme style.css
    19. 19. wp-content themes twentyten childtheme style.css/*Theme Name: Child ThemeTheme URI: http: //example.com/Description: Child theme for Twenty TenAuthor: Tom JenkinsAuthor URI: http: //example.com/about/Template: twentytenVersion: 1.0*/
    20. 20. wp-content themes twentyten childtheme style.css/*Theme Name: Child ThemeTheme URI: http: //example.com/Description: Child theme for Twenty TenAuthor: Tom JenkinsAuthor URI: http: //example.com/about/Template: twentytenVersion: 1.0*/
    21. 21. wp-content themes twentyten childtheme style.css/*Theme Name: Child ThemeTheme URI: http: //example.com/Description: Child theme for Twenty TenAuthor: Tom JenkinsAuthor URI: http: //example.com/about/Template: twentytenVersion: 1.0*/
    22. 22. wp-content themes twentyten childtheme style.css/*Theme Name: Child ThemeTheme URI: http: //example.com/Description: Child theme for Twenty TenAuthor: Tom JenkinsAuthor URI: http: //example.com/about/Template: twentytenVersion: 1.0*/@import url("../twentyten/style.css");
    23. 23. The FlowChild Theme Parent Theme style.css style.css
    24. 24. The FlowChild Theme Parent Theme style.css style.css
    25. 25. The FlowChild Theme Parent Theme style.css style.css
    26. 26. The FlowChild Theme Parent Theme style.css style.css index.php index.php
    27. 27. The FlowChild Theme Parent Theme style.css style.css index.php index.php home.php
    28. 28. http://codex.wordpress.org/Template_Hierarchy
    29. 29. The FlowChild Theme Parent Theme style.css style.css index.php index.phpfunctions.php functions.php
    30. 30. The FlowChild Theme Parent Theme style.css style.css index.php index.phpfunctions.php + functions.php
    31. 31. The FlowChild Theme Parent Theme style.css style.css index.php index.phpfunctions.php + functions.php function say_something($word) { echo "Bob says “ .$word; }
    32. 32. The Flow Child Theme Parent Theme style.css style.css index.php index.php functions.php + functions.phpfunction say_something($word) { function say_something($word) { echo "Simon says “ .$word; echo "Bob says “ .$word;} }
    33. 33. The Flow Child Theme Parent Theme style.css style.css index.php index.php functions.php + functions.phpfunction say_something($word) { function say_something($word) { echo "Simon says “ .$word; echo "Bob says “ .$word;} }
    34. 34. The FlowChild Theme Parent Theme style.css style.css index.php index.phpfunctions.php + functions.phpif (!function_exists(say_something)){ function say_something($word) { echo "Bob says “ .$word; }}
    35. 35. Actions and Filters
    36. 36. Actions are the hooks that the WordPress core launches atspecific points during execution, or when specific eventsoccur.Actions and Filters
    37. 37. Actions are the hooks that the WordPress core launches atspecific points during execution, or when specific eventsoccur.function header_additions() { echo “I’m in the header section”;}add_action(wp_head, header_additions);Actions and Filters
    38. 38. Actions are the hooks that the WordPress core launches atspecific points during execution, or when specific eventsoccur.function header_additions() { echo “I’m in the header section”;}add_action(wp_head, header_additions);Actions and FiltersFilters are the hooks that WordPress launches to modify textof various types before adding it to the database or sending it to the browser screen.
    39. 39. Actions are the hooks that the WordPress core launches atspecific points during execution, or when specific eventsoccur.function header_additions() { echo “I’m in the header section”;}add_action(wp_head, header_additions);Actions and Filtersfunction custom_excerpt_more( $more ) { return Read More...;}add_filter( excerpt_more,custom_excerpt_more );Filters are the hooks that WordPress launches to modify textof various types before adding it to the database or sending it to the browser screen.
    40. 40. Parent Theme<div id=”header”> // Do some stuff if (has_action(child_header)) : do_action(child_header); else : // Do other stuff endif;</div>
    41. 41. Parent Theme <div id=”header”> // Do some stuff if (has_action(child_header)) : do_action(child_header); else : // Do other stuff endif; </div> Child Themefunction child_header() { // inject some html to replace what’s there}add_action(child_header, child_header);
    42. 42. Buffet Frameworkhttp://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
    43. 43. Understanding the @techguytom Relationship http://techguytom.comBetween Parent & tom@techguytom.com Child Themes
    1. A particular slide catching your eye?

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

    ×