Creating custom child themes for WordPress

  • 2,982 views
Uploaded on

Creating custom child themes for WordPress (aka Making WordPress pretty without breaking it) . …

Creating custom child themes for WordPress (aka Making WordPress pretty without breaking it) .

Themes are a major part of any WordPress powered website. Tracy takes us through the power of child themes, including creating and customizing the Twenty Eleven default WordPress theme, in her presentation.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,982
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Creating Custom ChildThemes for WordPress (aka Making 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.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
  • 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. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. How do I know what to edit? The template filenames 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
  • 25. Lets make some template changes Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. Lets make a new template Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi
  • 30. 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 ● Change the size of the header image ● 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
  • 31. Lets change the header image size Demo time.... Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. Question Time ? Tracy LevesqueCreating Custom Child Themes for WordPress tracy@yikesinc.com(aka How to make WordPress pretty without breaking it) @yikesinc @lilimmi