Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes
What are child themes, and why use them
-
Upload
utsav-rathour -
Category
Technology
-
view
2.009 -
download
1
description
Transcript of What are child themes, and why use them
![Page 1: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/1.jpg)
![Page 2: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/2.jpg)
Working with Child Themes
Utsav singh @rathourBlogs at: http://codepixelz.com
(@codepixelzmedia)Dev @ Jasper IT Solutions
![Page 3: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/3.jpg)
Why bother?Because we should.
Better way to theme
Automattic recommends.
Next developer will thank you.
![Page 4: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/4.jpg)
Bother to Explain?
Of course NotThat is why I am here.
![Page 5: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/5.jpg)
A quick survey:
Who among here...
• Understands what a child theme is?
• has created and used child themes?
![Page 6: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/6.jpg)
Scenario #1
![Page 7: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/7.jpg)
Scenario #2
Let me make some crazy changes to the theme code.
Oh wow! An Update. *clickity click*
![Page 8: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/8.jpg)
Been there before?How does it feel?
![Page 9: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/9.jpg)
Enter:
• Inherits the functionality of parent theme
• Allows you to:- Modify Parent theme- Add Features to the Parent theme
• Safest and easiest way to modify
Child Theme
![Page 10: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/10.jpg)
Like Father Like Son
![Page 11: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/11.jpg)
Like Father Like Son
Is just like the parent.
A little modification here and there
A little features added here and there
![Page 12: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/12.jpg)
Why use Child Theme?Changes are lost while updating, parent theme
Speeds up Development Process
Overrides the parts of parent theme that you specify, without actually changing the theme itself.
![Page 13: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/13.jpg)
Great another week or two of learning
Nope, this is easier than most of you have thought it would be.
This is moreover like any other theme.
![Page 14: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/14.jpg)
How to create a Child Theme?
![Page 15: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/15.jpg)
How to create a Child Theme?
![Page 16: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/16.jpg)
How to create a Child Theme?
/*
Theme Name: Twenty Thirteen Child Theme
URI: http://codepixelz.com/twenty-thirteen-child/
Description: Twenty Thirteen Child Theme
Author: Utsav Singh Rathour
Author URI: http://codepixelz.com
Template: twentythirteen
Version: 1.0.0
*/
Create style.css inside the folder and add this
![Page 17: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/17.jpg)
How to create a Child Theme?
![Page 18: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/18.jpg)
![Page 19: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/19.jpg)
How to create a Child Theme?
Why this Kolaveri D?
@import url("../twentythirteen/style.css");
![Page 20: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/20.jpg)
![Page 21: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/21.jpg)
What next?Go Ahead, make CSS changes that you wanted to make.
Customize
![Page 22: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/22.jpg)
But I have more than just CSS to change
![Page 23: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/23.jpg)
Working with Templates
Simply create a file with same name and it
overwrites same file from Parent theme
Eg: header.php in child replaces parent’s header.php
![Page 24: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/24.jpg)
Working with Templates
• Parent’s header.php
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );get_search_form();
• Child’s header.php
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );//get_search_form();
![Page 25: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/25.jpg)
![Page 26: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/26.jpg)
Including a File
• require_once( get_stylesheet_directory() . '/my_included_file.php' );
why get_stylesheet_directory()?Because get_template_directory() returns Parent themes path.
• get_template_part( 'content', get_post_format() );
Note: It looks for say, content-video.php on child theme, if not found; before falling back to content.php on child. Searches for the file in parent.
![Page 27: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/27.jpg)
Handling Functions
• Child’s, functions.php is loaded before Parent’s functions.php
• you can make the user functions replaceable by a child theme, by declaring them conditionally
![Page 28: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/28.jpg)
Handling Functions
Make sure your parent theme has functions defined this way.
if ( ! function_exists( 'theme_special_nav' ) ) { function theme_special_nav() { // Do something. } }
![Page 29: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/29.jpg)
But wait…
• Just because you can, doesn’t mean you should.
• Be wise: “Measure Twice, Cut Once”
• Almost anyone can become a parent, but not all are good parents. And same applies for themes.
![Page 30: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/30.jpg)
Good Parent and Bad Parent
• Good Parent's functions look like:
if ( ! function_exists( 'do_this' ) ) {//Something here}
• Bad Parent's functions look like :
function do_this(){// Something here}
![Page 31: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/31.jpg)
When not to use Child theme?
• When you are creating a theme and know, you won’t update
• Using a theme that never updates.
• Because it is confusing to client.
• Because it is a little slow.
![Page 32: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/32.jpg)
Go Ahead! Experiment!Find more at: http://codex.wordpress.org/Child_Themes
![Page 33: What are child themes, and why use them](https://reader037.fdocuments.us/reader037/viewer/2022110307/5555f8dad8b42a8a5f8b5002/html5/thumbnails/33.jpg)
Questions?