WordPress Child Themes

Roy Emory

3/17/16

Child Theme

• A child theme isn’t a standalone entity, but instead modifies or adds to the files of an existing theme. It uses everything present in the parent theme and changes only those parts that you want to be different.

• Two files in Child Theme directory required – style.css Needs specific comments – function.php Blank file*

• Other files optional – Directory structure should mimic parent theme

• http://codex.wordpress.org/Child_Themes • http://premium.wpmudev.org/blog/how-to-create-

wordpress-child-theme/

Example File Structure

• Create new directory in wp-content/themes

• Create style.css with template header

• Create functions.php (optional)

– Will run before parent's functions.php

• Override parent's template files (optional)

Paths and URLs

• get_template_directory()

• get_stylesheet_directory()

• get_template_directory_uri()

• get_stylesheet_directory_uri()

Child Theme style.css

• Required comment – lines starting with “Theme Name:" and “Template:”

• Template: must contain the name of the directory of the parent theme.

– Optional Author name, uri; Source Code uri; Version number; Description; Tags; License type, uri; Copyright;

• Required line(s) Not really required*

• @import (‘../parent_theme_name/style.css’);

• @import (‘../parent_theme_name/core/css/style.css’); may not be needed

EXAMPLE of CHILD THEME style.css comment section /* Theme Name: Twenty Fourteen Child Theme URI: http://yourwebsite.com/twentyfourteen-child/ Description: My first child theme, based on Twenty Fourteen Author: Ralph Somebody Author URI: http://rsomebody.com Template: twentyfourteen Version: 1.0.0 Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated Text Domain: twenty-fourteen-child Description: This theme modifies the style and layout of the twenty fourteen theme. */

Child Theme function.php

• Nothing is required, file can be blank – It is recommended to enqueue the parent’s stylesheet

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

• Purpose: – for code that’s theme-dependent

• new sidebar, new navigation area, modify behavior of existing functions in parent theme…

• Simply a place to use your php coding skills

Twenty Fourteen Child Theme

• Create Child Theme Directory

• Add two empty files in Child Theme Directory

– style.css

• Add two comment lines to style.css

• Look at Appearance -> theme and see new child theme. Activate it and look at site (no change)

• Add css styling as desired

– function.php

Theme Image in Backend

• Without a theme image, – the backend theme will look like the parent theme

• With a theme image, – The backend theme will look the styling and layout of

the child theme

– PNG file, named screenshot.png, placed in your child theme’s folder (a jpg or gif will work)

• Theme image recommended size – Minimum 880 × 660 pixels (recommended)

– Maximum 387 × 290 pixels (will show up as this size)

OVERRIDING PARENT THEME FILES

• For every theme file present in the parent directory, WordPress will check whether a corresponding file is present in the child theme

• Use the same folder tree structure as the parent

• You can use files that exist only in the child theme. Template files are a good example of this.

USING FUNCTIONS.PHP

• The child theme’s functions.php file is loaded in addition to the file of the same name in the parent theme.

– functions.php runs before parent's

• Use theme hooks (filters and actions) to modify your theme

Reference

• https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

The End

CSS-1

• Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. – http://www.w3.org/Style/Examples/011/firstcss

• Every CSS style definition, or rule, has two main components: – A list of one or more selectors, separated by commas,

define the element or elements to which the style will be applied.

– The declaration block, surrounded by curly braces {…}, specifies what the style actually does.

CSS-2

• Selectors – # for ID, . for classes, > for child, pseudo-class (:link,

:visited, :focus, :hover, :active) – Browser specific: -moz, -webkit , -o, -ms – Good explanation of selectors:

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

• Browsers & their version make a difference in how styling appears – What browser(s) do your users use? – CSS2 (complete) vs CSS3 (in development e.g. box-shadow,

border-radius, transform, ...)

CSS-3

• Cascade Rules determine source of styling – Browser, user, author (inline, header, external) – Sort according to origin & importance

• browser styles • normal declarations in user style sheet • normal declarations in author style sheet • !important declarations in author style sheet • !important declarations in user style sheet • Themes sometimes use min but provide non-min

– Matches are scored according to specificity (inline, id, classes, element)

– Last Match wins

Specificity

A number in a higher column can beat any number below.

0, 1, 0, 0 beats 0, 0, 312, 54659392

https://css-tricks.com/css-specificity-is-base-infinite/

CSS Troubleshooting-1

• Browser tools – Firefox F12 Firebug add-on + ColorZilla add-on + CSS Usage add-

on – IE F12 DOM Explorer & Firebug lite – Chrome Developer (Toolbar & F12)

• Search (Google it) • Test

– Comment out chunks of HTML/CSS – Create new test files – Build a simple demo using online tools

• JSFiddle http://jsfiddle.net • CSSDeck http://cssdesk.com • Pastebin http://pastebin.com

CSS Troubleshooting-2

• Syntax – An additional comma after a multiple selector?

– Are you missing a semi-colon after a declaration?

– Are you using an incorrect property?

– Are you using an incorrect value?

– White spaces inside a property?

– White spaces between your value and unit?

– Are you missing a unit value?

• W3C validator http://jigsaw.w3.org/css-validator/ – May be hard to achieve 100% & still be ok.

CSS Troubleshooting-3

• Turn on borders to see if you can select the element – correct the selector if needed

• Does the selector have enough weight?

• Reduce the HTML and CSS down to a small test case so you can isolate the problem.

• Ask for help… – CSS Discuss http://www.css-discuss.org/

– Web Standards Group http://webstandardsgroup.org/

– SitePoint Forum http://www.sitepoint.com/forums/

• http://csswizardry.com/2014/10/the-specificity-graph/

CSS References

• http://www.slideshare.net/maxdesign – The slides Russ Weakly uses in his SitePoint

classes. Lots of CSS stuff.

• CSS Anthology 3rd ed (pdf) – Copyright © 2009 SitePoint Pty Ltd

• HTML5 and CSS3 for the Real World (pdf) – Copyright © 2011 SitePoint Pty. Ltd

• CSS3 for web designers (pdf) – Copyright © 2010 by Dan Cederholm

CSS Best Practices

• Avoid using inline styles & header styles as they are hard to maintain and increase file size

• Avoid importing and linking to multiple CSS files where possible to reduce server hits

• Use multiple declarations, multiple selectors, & shorthand properties where possible

• Avoid !important as it is often unnecessary

• Avoid complex selectors (taxing for browsers) - be only as specific as needed

• Avoid qualifying ID and selectors - generally not needed

• Use a consistent declaration order within each rule so that declarations are easier to find

• Group related rules

• Divide related rules with clear comments.

• Provide helpful information at the top of your CSS files

• Include color notation comment at the top of your CSS file