parent and child themes

47
Understanding the Relationship Between Parent & Child Themes

Upload: tom-jenkins

Post on 29-Jan-2018

2.851 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Parent and child themes

Understanding the Relationship Between

Parent & Child Themes

Page 2: Parent and child themes

Hashtag

#thisisthebesttalkeveratawordcampanditsaboutparentandchildthemesimeanhowcoolisthatright

Page 3: Parent and child themes

Hashtag

#wckc

Page 4: Parent and child themes

About Me

Page 5: Parent and child themes

About Me

Page 6: Parent and child themes

About Me

Between Jobs

Page 7: Parent and child themes

About Me

Page 8: Parent and child themes

About Me

Page 9: Parent and child themes

About Me

Page 10: Parent and child themes

About Me

Page 11: Parent and child themes

What is a parent theme?

Page 12: Parent and child themes

What is a child theme?

Page 13: Parent and child themes

What is a child theme?

Page 14: Parent and child themes

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.”

Page 15: Parent and child themes

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

Page 16: Parent and child themes

Why a child theme?

Page 17: Parent and child themes

Setupwp-content

themestwentytenchildtheme

Page 18: Parent and child themes

Setupwp-content

themestwentytenchildtheme

style.css

Page 19: Parent and child themes
Page 20: Parent and child themes

wp-content

themestwentytenchildtheme

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*/

Page 21: Parent and child themes

wp-content

themestwentytenchildtheme

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*/

Page 22: Parent and child themes

wp-content

themestwentytenchildtheme

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*/

Theme Name: Child Theme

Template: twentyten

Page 23: Parent and child themes

wp-content

themestwentytenchildtheme

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");

Page 24: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

Page 25: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

Page 26: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

Page 27: Parent and child themes
Page 28: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

index.php index.php

Page 29: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

index.php index.php

home.php

Page 31: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

index.php index.php

functions.php functions.php

Page 32: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

index.php index.php

functions.php functions.php+

Page 33: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

index.php index.php

functions.php functions.php+

function say_something($word) {echo "Bob says “ .$word;

}

Page 34: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

index.php index.php

functions.php functions.php+

function say_something($word) {echo "Bob says “ .$word;

}

function say_something($word) {echo "Simon says “ .$word;

}

Page 35: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

index.php index.php

functions.php functions.php+

function say_something($word) {echo "Bob says “ .$word;

}

function say_something($word) {echo "Simon says “ .$word;

}

Page 36: Parent and child themes

The FlowChild Theme

style.css

Parent Theme

style.css

index.php index.php

functions.php functions.php+if (!function_exists('say_something')){

function say_something($word) {echo "Bob says “ .$word;

}}

Page 37: Parent and child themes
Page 38: Parent and child themes

Actions and Filters

Page 39: Parent and child themes

Actions and Filters

Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur.

Page 40: Parent and child themes

Actions and Filters

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');

Page 41: Parent and child themes

Actions and Filters

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');

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.

Page 42: Parent and child themes

Actions and Filters

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');

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.

function custom_excerpt_more( $more ) { return 'Read More...';}add_filter( 'excerpt_more', 'custom_excerpt_more' );

Page 43: Parent and child themes

<div id=”header”>// Do some stuffif (has_action('child_header')) :do_action('child_header');

else :// Do other stuff

endif;</div>

Parent Theme

Page 44: Parent and child themes

<div id=”header”>// Do some stuffif (has_action('child_header')) :do_action('child_header');

else :// Do other stuff

endif;</div>

Parent Theme

Child Themefunction child_header() {// inject some html to replace what’s there

}add_action('child_header', 'child_header');

Page 45: Parent and child themes
Page 46: Parent and child themes

Buffet Frameworkhttp://wordpress.org/extend/themes/the-buffet-framework

Carrington Corehttp://blog.carringtontheme.com/

Hybridhttp://wordpress.org/extend/themes/hybrid

Thematichttp://wordpress.org/extend/themes/thematic

Page 47: Parent and child themes

http://techguytom.com

@techguytom

[email protected]

Understanding the Relationship

Between Parent & Child Themes