Creating WordPress ChildThemes - WordCamp Montreal 2012

Creating Custom ChildThemes for WordPress (aka How to make WordPress pretty without breaking it) Presented by: Tracy Levesque, co-owner of YIKES, Inc. yikesinc.com tracy@yikesinc.com @yikesinc @liljimmi

Who I am Geek Designer I can wrap my head I use bitmap and vector around most editing programs every day geeky concepts Front-End DeveloperI use HTML and CSS WordPress to make websites Evangelical look nice. I use I love myself some a text editor and WordPress and develop FTP to do this. most of my sites on it Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Who I am not A Programmer A Database Expert I can understand I can make my way through enough PHP to be PHPMyAdmin, but thats dangerous, but I about it. cant write it. A Mime I am not a A Sys Admin professional mime, You lost me at just an ironic mime. chmod. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What I can do Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What do all of these sites have in common? Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What do all of these sites have in common? They are all child themes of Twentyten or Twentyeleven Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Why use a Child Theme? WordPress Development Rule #1 Never EVER touch WordPress core code. EVER! This means do not edit: ● Wordpress core files ● Plugin files ● Theme files Why? ● Stuff gets broken ● Other plugins and themes may not work with your hacks ● Updates wipe out your changes Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

So how do you customize the look-and-feel of a WordPress? You create your own theme that is a “child” of another theme (in this presentation the parent theme will be WordPress 3.4.1 default theme, Twentyeleven). ➔ Your child theme overrides the design elements you want changed and otherwise falls back to the parent. ➔ Your child theme can also modify or add functionality to the parent theme. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

How it Works Your child themes folder is a safe land where you can add css and php files without causing any permanent damage. If you break something you can just hit undo or remove your file. All parent theme files will remain intact. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets get started! Where your theme files go Each theme has its own folder inside /wp-content/themes Create a folder for your child theme in /wp-content/themes Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What your theme needs In order for your child theme to work it needs 2 things (really 1 thing, but 2 is cooler) Thing #1 – a style.css file The CSS file tells WordPress to load the parent theme after your theme. /* Theme Name: [Your Theme Name] Theme URI: [Your URL] Description: The custom theme for [Your Theme Name] using the parent theme Twentyeleven. Author: [You] Author URI: [Your URL] The parent themes folder Template: twentyeleven Version: 1 */ The code that loads the @import url("../twentyeleven/style.css"); parent themes CSS file Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What your theme needs Thing #2 – a screenshot This is the thumbnail image that shows up under Appearance > Themes in the WordPress admin. You can find the screenshot image file, screenshot.png, in /wp-content/themes/twentyeleven Open the file in your favorite bitmap editor, turn it into your own screenshot and save it into your child themes folder. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Ready? Here we go! Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Upload and activate Upload your child theme folder, containing your 2 files, to /wp-content/themes and then go check out Appearance > Themes in your WordPress admin. Your child theme is now listed under “Available Themes.” Hit activate and you will be in business. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Where we are at The 2 files now in your child theme illustrate how a child themes files effect the parents files – they either modify and add functionality to its identically named file, or completely overwrites it. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some style changes Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Editing template files If you look in the twentyeleven folder you can see all the template files that make up the theme. The template files control how your site looks and displays information. You can create your own versions of these files in your child theme. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

How do I know what to edit? The template file names are pretty logical, but you can use these handy cheat sheets: ● Anatomy of a WordPress theme infographic ● Template file(s) WordPress uses when it displays a certain type of page? Quick overview of some template files: ● header.php – The global header for your site ● footer.php – The global footer for your site ● index.php – The posts (blog) page ● page.php – Static pages. ● sidebar.php – Your sidebar widget areas ● single.php – A single post Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make some template changes Remove the WordPress credit from the footer (no offense!!) Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Gettin fancy with template tags Template tags let you insert dynamic content into your templates. Include/function tags - Used to grab and display information or execute other template files ➔ <?php the_date(); ?> ➔ <?php echo home_url(); ?> ➔ <?php bloginfo(); ?> ➔ <?php wp_list_pages(); ?> ➔ Check out the WP Codex Function Reference Conditional tags - Used to grab and display content depending on what page it is and what conditions it matches. ➔ is_home() ➔ is_single() ➔ is_page() ➔ is_category() ➔ Check out the WP Codex Conditional Tags page Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets use some template tags Add a credit to the footer that uses include tags and a conditional tag. Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Making your own templates Twentyeleven gives you 3 templates to choose from: Default, Showcase and Sidebar. You can make as many additional templates as you like. Templates you create will appear in the Template drop-down menu on the Page edit screen. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What your template file needs First, a name (this goes at the top of your file) <?php /* Template Name: [Type your template name here] */ ?> Second, at least these 2 include tags <?php get_header(); ?> <?php get_footer(); ?> Last, any other content and tags you want to add Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets make a new template Make a template called Kittens. Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Modifying functionality functions.php controls the functionality of your theme. You can modify and add to this functionality in your child theme. You can do stuff like: ● Add custom post types ● Customize the  link ● Customize the admin ● Change the excerpt length ● Enable shortcodes in text widgets ● Add custom thumbnail sizes ● Change the size of the header image (soon to be an admin function in WordPress 3.4) ● And much much more...really anything you can program. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Lets change the header image size Change the size of the header image. Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Where we are at now Now our child theme is modifying files, overwriting files and adding files to our parent theme. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

What about other parent themes? Do you like HTML 5 Boilerplate, Twitter Bootstrap, grids, responsive design? Whatever your preference, there are great starter and development themes people have built for WordPress. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Where do you go from here? After getting the basics down the possibilities are really endless. There is a wealth of information and resources on the Internets. Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Question Time ? Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

Thank you! Merci! Slides: slideshare.net/thetracyL Files: github.com/thetracyL Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi

http://www.yikesinc.com	410
http://dev.yikesinc.com	5
http://frugalishous.wordpress.com	1

Creating WordPress ChildThemes - WordCamp Montreal 2012

by YIKES, Inc. on Aug 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 416

Statistics

Creating WordPress ChildThemes - WordCamp Montreal 2012 Presentation Transcript