Click here to load reader

Creating WordPress ChildThemes - WordCamp Montreal 2012

  • View
    1.714

  • Download
    1

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

Text of Creating WordPress ChildThemes - WordCamp Montreal 2012

  • 1. Creating Custom ChildThemes for WordPress(aka How to make WordPresspretty without breaking it)Presented by:Tracy Levesque, co-owner of YIKES, Inc. [email protected] @yikesinc @liljimmi

2. Who I amGeekDesigner I can wrap my head I use bitmap and vector around most editing programs every daygeeky concepts Front-End DeveloperI use HTML and CSSWordPressto make websitesEvangelical look nice. I use I love myself somea text editor and WordPress and developFTP to do this.most of my sites on it Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 3. Who I am notA ProgrammerA Database ExpertI can understandI can make my way through enough PHP to be PHPMyAdmin, but thatsdangerous, but I about it.cant write it. A MimeI am not a A Sys Admin professional mime,You lost me at just an ironic mime. chmod. Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 4. What I can do Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 5. What I can do Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 6. What I can do Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 7. What I can do Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 8. What I can do Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 9. What I can do Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 10. What I can do Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 11. What I can do Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](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 [email protected](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 themesof Twentyten or Twentyeleven Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 14. Why use a Child Theme?WordPress Development Rule #1Never EVER touch WordPress core code. EVER!This means do not edit:Wordpress core filesPlugin filesTheme filesWhy? 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 [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 15. So how do you customize thelook-and-feel of a WordPress?You create your own theme that is a child of anothertheme (in this presentation the parent theme will beWordPress 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 [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 16. How it WorksYour child themes folder is a safe land where you canadd css and php files without causing any permanentdamage.If you break something you can just hit undo or remove your file. All parent themefiles will remain intact. Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 17. Lets get started! Where your theme files goEach theme has its ownfolder inside/wp-content/themesCreate a folder foryour child theme in/wp-content/themes Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](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 fileThe 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 parenttheme Twentyeleven.Author: [You]Author URI: [Your URL] The parent themes folderTemplate: twentyelevenVersion: 1*/ The code that loads [email protected] url("../twentyeleven/style.css");parent themes CSS file Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 19. What your theme needsThing #2 a screenshotThis is the thumbnail image that shows up under Appearance > Themes in theWordPress admin.You can find the screenshot image file, screenshot.png, in/wp-content/themes/twentyelevenOpen the file in your favorite bitmap editor, turn it into your own screenshot andsave it into your child themes folder.Tracy LevesqueCreating Custom Child Themes for [email protected](aka How to make WordPress pretty without breaking it)@yikesinc @lilimmi 20. Ready? Here we go!Demo time....Tracy LevesqueCreating Custom Child Themes for [email protected](aka How to make WordPress pretty without breaking it)@yikesinc @lilimmi 21. Upload and activateUpload your child themefolder, containing your 2 files,to /wp-content/themesand then go check outAppearance > Themes in yourWordPress admin.Your child theme is now listedunder Available Themes. Hitactivate and you will be inbusiness. Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 22. Where we are atThe 2 files now in your child theme illustrate how a child themes files effect theparents files they either modify and add functionality to its identically namedfile, or completely overwrites it.Tracy LevesqueCreating Custom Child Themes for [email protected](aka How to make WordPress pretty without breaking it)@yikesinc @lilimmi 23. Lets make some style changesDemo time....Tracy LevesqueCreating Custom Child Themes for [email protected](aka How to make WordPress pretty without breaking it)@yikesinc @lilimmi 24. Editing template filesIf you look in the twentyeleven folder you can see all the template files thatmake up the theme. The template files control how your site looks and displaysinformation. You can create your own versions of these files in your child theme.Tracy LevesqueCreating Custom Child Themes for [email protected](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 cheatsheets: 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 [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 26. Lets make some template changesRemove the WordPress credit from the footer (no offense!!)Demo time....Tracy LevesqueCreating Custom Child Themes for [email protected](aka How to make WordPress pretty without breaking it)@yikesinc @lilimmi 27. Gettin fancy with template tagsTemplate tags let you insert dynamic content into your templates.Include/function tags - Used to grab and displayinformation or execute other template files Check out the WP Codex Function ReferenceConditional tags - Used to grab and display contentdepending 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 [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 28. Lets use some template tagsAdd a credit to the footer that uses include tags and a conditional tag.Demo time....Tracy LevesqueCreating Custom Child Themes for [email protected](aka How to make WordPress pretty without breaking it)@yikesinc @lilimmi 29. Making your own templatesTwentyeleven gives you 3 templates tochoose from: Default, Showcase andSidebar.You can make as many additionaltemplates as you like.Templates you create will appear in theTemplate drop-down menu on the Pageedit screen. Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 30. What your template file needsFirst, a name (this goes at the top of your file)Second, at least these 2 include tagsLast, any other content and tags you want to add Tracy LevesqueCreating Custom Child Themes for WordPress [email protected](aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi 31. Lets make a new templateMake a template called Kittens.Demo time....Tracy LevesqueCreating Custom Child Themes for [email protected](aka How to make WordPress pretty without breaking it)@

Search related