WordPress Child Themes

751 views
679 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
751
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordPress Child Themes

  1. 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
  2. 2. WORDPRESSCHILD THEMESBronson Quick sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  3. 3. OVERVIEW  What is a child theme?  Choosing a parent theme  Using Firebug  Your first child theme  Let’s override some styles!  Let’s override some templates  Google Fonts API  Pluggable functions (why they are great)  Add your own screenshot By the end of this talk you should be confident with child themes!2 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  4. 4. WHAT IS A CHILD THEME?  Who has hacked a theme (be honest)?  Who has updated a theme and lost their changes?  Who hasn’t updated a theme on a site because you know you’ll lose your changes?  Enter the child theme!  Parent (base) theme; child (modified) theme The terminology is a little confusing but you’ll 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. 5. CHOOSING A PARENT THEME  Find a theme you “kind of” like  Colours  Responsive  Functionality  Reputable author Or if you have a “hacked” theme then it’s 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. 6. USING FIREBUG  http://getfirebug.com/  F12  Right-click Inspect Element  Chrome Developer Tools I love Firebug!5 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  7. 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. 8. YOUR FIRST CHILD THEME /* Theme Name: Anthem Child Theme Theme URI: http://www.sennza.com.au/ Description: Child theme for the Anthem theme Author: Bronson Quick Author URI: http://www.sennza.com.au Template: anthem Version: 1.0 */ @import url("../anthem/style.css"); That’s it!7 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  9. 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. 10. LET’S 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 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  11. 11. LET’S OVERRIDE SOME STYLES! @media screen and (max-width: 1400px) { #container { margin: 35px; } } I like a fixed margin below 1399px10 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  12. 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 parent’s functions.php”  You can add extra functionality to your theme in this file Think twice when you add functions in here…sometimes you should be making a plugin!11 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  13. 13. GOOGLE FONTS API function sennza_custom_scripts_styles(){ $subsets = "latin,latin-ext"; $protocol = is_ssl() ? https : http; $query_args = array( family => Bree+Serif|Sanchez:400italic,400, subset => $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 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  14. 14. GOOGLE FONTS CSS body { font-family: Sanchez, serif; color: #364449; } http://www.google.com/webfonts13 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  15. 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. 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. 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. 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. 19. LET’S OVERRIDE SOME TEMPLATES!  Copy footer.php into your child theme  Change: <?php if ( $copy_text = anthem_option( copyright_text ) ) { echo <span class="copy-text"> . $copy_text . </span><span class="separator"> | </span>; } ?> to <?php if ( $copy_text = anthem_option( copyright_text ) ) { echo <span class="copy-text"> . $copy_text; } ?> You’ve now “hacked” your footer18 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  20. 20. LET’S OVERRIDE SOME TEMPLATES!  Copy post-footer.php into your child theme  Change <a href="<?php the_permalink(); ?>" class="permalink"><?php the_time( F jS ); ?></a> to <a href="<?php the_permalink(); ?>" class="permalink"><?php the_time( F j, Y ); ?></a> You’ve now “hacked” your post footer19 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  21. 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 parent’s functions.php” if ( ! function_exists( theme_special_nav ) ) { function theme_special_nav() { // Do something. } } I love theme developers who write pluggable functions!20 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  22. 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‘, ) ); You’ve overridden a pluggable function!21 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  23. 23. ADD YOUR OWN SCREENSHOT  Make a 300x225 screenshot of your site and save it as screenshot.png You’ve got a screenshot of your child theme 22 of 24 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  24. 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. 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

×