38
Creating Custom Child Themes for WordPress (aka How to make WordPress pretty without breaking it) Presented by: Tracy Levesque , co-owner of YIKES, Inc. yikesinc.com [email protected] @yikesinc @liljimmi

Creating WordPress ChildThemes - WordCamp Montreal 2012

Embed Size (px)

DESCRIPTION

My Presentation on Creating Child themes for WordPress for WordCamp Montreal 2012. August 19, 2012. Files can be found at: https://github.com/TheTracyL A video of the presentation in on YouTube: http://youtu.be/aUmi1ubGJS4

Citation preview

Page 1: Creating WordPress ChildThemes - WordCamp Montreal 2012

Creating Custom Child Themes for WordPress

(aka How to make WordPress pretty without breaking it)

Presented by: Tracy Levesque, co-owner of YIKES, Inc. yikesinc.com [email protected] @yikesinc @liljimmi

Page 2: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Who I amWho I am

GeekI can wrap my head

around most geeky concepts

DesignerI use bitmap and vector

editing programs every day

Front-EndDeveloper

I use HTML and CSSto make websites

look nice. I usea text editor andFTP to do this.

WordPressEvangelical

I love myself some WordPress and developmost of my sites on it

Page 3: Creating WordPress ChildThemes - WordCamp Montreal 2012

A ProgrammerI can understand

enough PHP to bedangerous, but I

can't write it.

A Database ExpertI can make my way through

PHPMyAdmin, but that'sabout it.

A Sys AdminYou lost me at

chmod.

A MimeI am not a

professional mime,just an ironic mime.

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Who I am notWho I am not

Page 4: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What I can do

Page 5: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What I can do

Page 6: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What I can do

Page 7: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What I can do

Page 8: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What I can do

Page 9: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What I can do

Page 10: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What I can do

Page 11: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What I can do

Page 12: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What do all of thesesites have in common?

Page 13: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

They are all child themesof Twentyten or Twentyeleven

What do all of thesesites have in common?

Page 14: Creating WordPress ChildThemes - WordCamp Montreal 2012

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 Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Why use a Child Theme?

Page 15: Creating WordPress ChildThemes - WordCamp Montreal 2012

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 Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

So how do you customize thelook-and-feel of a WordPress?

Page 16: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

How it Works

Your child theme's 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.

Page 17: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Let's get started!Where your theme files go

Each theme has its own folder inside /wp-content/themes

Create a folder foryour child theme in/wp-content/themes

Page 18: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

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]Template: twentyelevenVersion: 1*/

@import url("../twentyeleven/style.css");

The parent theme's folder

The code that loads the parent theme's CSS file

Page 19: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

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 theme's folder.

Page 20: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Ready? Here we go!

Demo time....

Page 21: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Upload and activate

Upload your child theme folder, containing your 2 files, to /wp-content/themes and then go check outAppearance > Themes in yourWordPress admin.

Your child theme is now listed under “Available Themes.” Hit activate and you will be in business.

Page 22: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Where we are at

The 2 files now in your child theme illustrate how a child theme's files effect the parent's files – they either modify and add functionality to its identically named file, or completely overwrites it.

Page 23: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Let's make some style changes

Demo time....

Page 24: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Editing template filesIf 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.

Page 25: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

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

Page 26: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Let's make some template changes

Demo time....

Remove the WordPress credit from the footer (no offense!!)

Page 27: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Gettin' fancy with template tagsTemplate 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

Page 28: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Let's use some template tags

Demo time....

Add a credit to the footer that uses include tags and a conditional tag.

Page 29: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

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.

Page 30: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

What your template file needsFirst, 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

Page 31: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Let's make a new template

Demo time....

Make a template called Kittens.

Page 32: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Modifying functionalityfunctions.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 <!--more--> 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.

Page 33: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Let's change the header image size

Demo time....

Change the size of the header image.

Page 34: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Where we are at now

Now our child theme is modifying files, overwriting files and adding files to our parent theme.

Page 35: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

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.

Page 36: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

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.

Page 37: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Question Time

?

Page 38: Creating WordPress ChildThemes - WordCamp Montreal 2012

Tracy Levesque [email protected]@yikesinc @lilimmi

Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)

Thank you!Merci!

Slides: slideshare.net/thetracyLFiles: github.com/thetracyL