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
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
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
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
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
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
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
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
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
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
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
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?
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?
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?
You create your own theme that is a “child” of another theme (in this presentation the parent theme will be WordPress 3.3.2 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?
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.
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
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
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.
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....
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.
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.
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....
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.
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
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!!)
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
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.
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
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.
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.
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 (soon to be irrelevant, but, for now, still a good demo).
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.
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?
You don't have to use Twentyeleven or Twentyten as your parent theme, there are some other great starter themes that people have built for WordPress:
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.
Tracy Levesque [email protected]@yikesinc @lilimmi
Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)
Question Time
?
Tracy Levesque [email protected]@yikesinc @lilimmi
Creating Custom Child Themes for WordPress(aka How to make WordPress pretty without breaking it)
Thank you!Slides: slideshare.net/thetracyL
Files: github.com/thetracyL
Top Related