Creating WordPress ChildThemes - WordCamp NYC 2012

9,764 views
9,088 views

Published on

My Presentation on Creating Child themes for WordPress for WordCamp NYC 2012. June 9, 2012. Files can be found at: https://github.com/TheTracyL

Published in: Technology, Business
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
9,764
On SlideShare
0
From Embeds
0
Number of Embeds
1,782
Actions
Shares
0
Downloads
113
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Creating WordPress ChildThemes - WordCamp NYC 2012

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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.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 LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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 <!--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 LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi
  32. Lets change the header image size Change the size of the header image (soon to be irrelevant, but, for now, still a good demo). Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi
  33. 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
  34. What about other parent themes? You dont have to use Twentyeleven or Twentyten as your parent theme, there are some other great starter themes that 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
  35. 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
  36. Question Time ? Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi
  37. Thank you! 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

×