Austin WordPress Meetup

Bringing together WordPress users of all levels

You are here: Home / WordPress Themes / WordPress Theme Anatomy and Child Themes – Part I

WordPress Theme Anatomy and Child Themes – Part I

WordPress Themes, Intermediate WordPress, Design / by

WordPress Theme Anatomy

Presenter: Corey Ellis

Notes from Corey’s presentation: http://urli.st/s8c

WordPress theme development in WordPress codex

Stepping into Templates

What is necessary for a WordPress theme:

  • At minimum a WordPress theme needs two files:
    • index.php – controls structure of site (what the site does)
    • style.css – the stylesheet for the site (how the site looks)
  • Most WordPress theme will have more files, but these two are mandatory for a WordPress theme to work.
  • Most themes will also include functions.php as well as wp_head(); and wp_footer(); hooks in a php file

header.php file

  • Anything inside the section < head > < /head > is just information that doesn’t display in a browser window but is necessary for things to work
  • In the section < body >< /body > is what the user will see
  • The < title > tag controls what is shown in the browser window
  • wp_head(); and wp_footer(); are hooks that tell the browser what to execute in the header or footer; often used by plugins
  • the tag < body class >  allows you to modify the body class in your CSS: see body class reference in the Codex

How to view stylesheet and other structural information of a website

  •  inspection tools that you can use to see/modify the code of a website
  •  does not actually commit changes but allow you to see how a change would look
  • Firebug for Firefox
  • Chrome Developer Tools 
  • will work on any website; great way to learn

Other PHP files

  • header.php and footer.php control the header and footer
  • everything else (category.php, single.php, sidebar.php etc.) control what’s in the middle
  • Themes will have one or more php files which will assemble a page with the header, footer, body, sidebar etc. depending on which page is requested – e.g. single.php is the page created to display a single blog post
  • Template hierarchy graphic (from WordPress Codex) determines which page WordPress will display in the browser

 

Building Child Themes

Presenter: Bobbie Wilson

Why use a child theme?

  • You can use child themes to practice your theme skills
  • If you want to modify an existing theme, you can make changes and when the parent theme is updated, your changes won’t get overwritten

How to build a child theme

  • WordPress Codex on child themes
  • All themes will be found in your WordPress install in the directory: wp-content/themes
  • You will create a new directory for your new theme. It will have its own folder at the same level in the directory as the parent theme. So you might have /themes/twentytwelve and /themes/twentytwelvechild as two separate folders both within the themes folder.
  • A child theme needs a style.css file. You can create it in any text editor and save it in a folder named for the child theme. So you can create a new child theme called Playground and save a style.css file in a folder called playground.
  • Inside your style.css you will need to insert certain code:
/*
Theme Name:     Twenty Twelve Child (or whatever you're calling it)
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve                             
Version:        0.1.0
*/
  • The template name has to be typed exactly the same way the parent theme folder is named in your themes directory
  • In your style.css you then need a line that includes the parent theme, to pull the parent theme styles into the child theme. Again, this will need to be typed exactly as the parent theme is named in the themes directory:
@import url("../twentytwelve/style.css");
  • The child theme will inherit everything in the parent theme unless there are styles in the child theme; all child theme styles will override the parent styles.
  • You can add php files to your child theme, including your own functions.php file. Just don’t duplicate functions in your child theme or your child theme will crash.

Slight digression: 

 

%d