WordPress Child Themes

Download WordPress Child Themes

Post on 27-Jan-2015

472 views

Category:

Documents

2 download

Embed Size (px)

DESCRIPTION

Bronson Quick from Sennza explains what WordPress child themes are without too much lingo and does a demonstration to show how child themes work!

TRANSCRIPT

<ul><li> 1. SPONSORS, HOUSEKEEPING, NEWS! Envato http://envato.com/ http://themeforest.net/category/wordpress http://wp.tutsplus.com/ WordPress 3.5! Toilets, water, packing upProps to Envato!sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza</li></ul> <p> 2. WORDPRESSCHILD THEMESBronson Quicksennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 3. OVERVIEW What is a child theme? Choosing a parent theme Using Firebug Your first child theme Lets override some styles! Lets override some templates Google Fonts API Pluggable functions (why they are great) Add your own screenshotBy the end of this talk you should be confident with child themes!2 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 4. WHAT IS A CHILD THEME? Who has hacked a theme (be honest)? Who has updated a theme and lost their changes? Who hasnt updated a theme on a site because youknow youll lose your changes? Enter the child theme! Parent (base) theme; child (modified) themeThe terminology is a little confusing but youll love child themes!http://codex.wordpress.org/Child_Themes3 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 5. CHOOSING A PARENT THEME Find a theme you kind of like Colours Responsive Functionality Reputable authorOr if you have a hacked theme then its time to make a child theme!4 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 6. USING FIREBUG http://getfirebug.com/ F12 Right-click Inspect Element Chrome Developer ToolsI love Firebug!5 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 7. YOUR FIRST CHILD THEME Add a background pattern Add some margin and a box shadow Add some media query Add Google Fonts Add the CSS for Google Fonts Fix the paragraphs and line height Fix the broken galleries Fix the Info tab Alter footer.php to remove a pipe Alter the date in post-footer.php Alter a pluggable function6 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 8. YOUR FIRST CHILD THEME/*Theme Name: Anthem Child ThemeTheme URI:http://www.sennza.com.au/Description:Child theme for the Anthem themeAuthor: Bronson QuickAuthor URI: http://www.sennza.com.auTemplate: anthemVersion:1.0*/@import url("../anthem/style.css");Thats it!7 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 9. ADD A BACKGROUND PATTERN http://subtlepatterns.com/Because texture is good mmmkay!8 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 10. LETS OVERRIDE SOME STYLES!#container {-webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);-moz-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);margin: 3% auto;}Adding a box shadow and margin to the container9 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 11. LETS OVERRIDE SOME STYLES! @media screen and (max-width: 1400px) { #container { margin: 35px; } } I like a fixed margin below 1399px10 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 12. CREATE FUNCTIONS.PHP Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parents functions.php You can add extra functionality to your theme in this file Think twice when you add functions in heresometimes you should be making a plugin!11 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 13. GOOGLE FONTS API function sennza_custom_scripts_styles(){$subsets = "latin,latin-ext";$protocol = is_ssl() ? https : http;$query_args = array(family =&gt; Bree+Serif|Sanchez:400italic,400,subset =&gt; $subsets,);wp_enqueue_style( custom-fonts, add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null ); } add_action( wp_enqueue_scripts, sennza_custom_scripts_styles ); http://www.google.com/webfonts12 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 14. GOOGLE FONTS CSS body { font-family: Sanchez, serif; color: #364449; } http://www.google.com/webfonts13 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 15. GOOGLE FONTS CSS #container h1 a, #container h2 a, #container h3 a, #container h4 a, #container h5 a, #container h6 a { font-family: Bree Serif, serif; font-weight: normal; color: #297ed8; } http://www.google.com/webfonts14 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 16. FIX PARAGRAPH article p { font-size: 1em; line-height: 1.4em; } Slight alterations for typography15 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 17. FIX BROKEN GALLERIES article .gallery br { display: inline; } This goes funky in some in-between sizes16 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 18. FIX INFO TAB @media only screen and (max-width: 767px) { body.logged-in header a#toggle { top: 63px; right: 56px; } } This goes also goes funky in some in-between sizes17 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 19. LETS OVERRIDE SOME TEMPLATES! Copy footer.php into your child theme Change: to Youve now hacked your footer18 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 20. LETS OVERRIDE SOME TEMPLATES! Copy post-footer.php into your child theme Change to Youve now hacked your post footer19 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 21. PLUGGABLE FUNCTIONS Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parents functions.php if ( ! function_exists( theme_special_nav ) ) { function theme_special_nav() {// Do something. } } I love theme developers who write pluggable functions!20 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 22. PLUGGABLE FUNCTIONS Copy the entire anthem_setup() function into functions.php Change add_theme_support( post-formats, array( video, quote, link, image, audio, gallery, chat ) ); to add_theme_support( post-formats, array( video, quote, link, image, audio, gallery, ) ); Youve overridden a pluggable function!21 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 23. ADD YOUR OWN SCREENSHOT Make a 300x225 screenshot of your site and save it as screenshot.png Youve got a screenshot of your child theme 22 of 24sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 24. DOWNLOAD THE CHILD THEME https://github.com/BronsonQuick/bq2012 Optional: SASS My code is your code!23 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza 25. THANKS ALOT http://core.trac.wordpress.org/ticket/1323723 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza </p>