47
with Child Themes Nick Adams @nickadamstv @nickadamstv

Getting Started with Child Themes

Embed Size (px)

Citation preview

  1. 1. Nick Adams @nickadamstv @nickadamstv #wcyhm
  2. 2. A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. - WordPress Codex
  3. 3. Your Parent Theme is like your head. Your Child Theme is like a hat. Customizing the Child Theme is like changing the hat. Updating the Parent Theme is like getting a haircut.
  4. 4. If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved. - WordPress Codex
  5. 5. When you edit the CSS file(s) in your theme, you are changing the theme files. When you update a theme, it overwrites those files. Your changes will disappear with it.
  6. 6. Technically: No. If you arent using a child theme, but you are using a plugin to manage custom CSS, such as JetPack, then this isnt the case. But remember, if youre using JetPacks Custom CSS module and you change your themes, your custom CSS will disappear.
  7. 7. I will be using the current WordPress default theme: Twenty Fifteen I will be editing the files live on the site. (Dont do this in real life. Ill explain soon.) I needed a third bullet point.
  8. 8. Twenty Fifteen with no modifications.
  9. 9. Only Twenty Fifteen is installed.
  10. 10. functions.php style.css Yup thats it!
  11. 11. functions.php
  12. 12. How does it know which is the parent theme?
  13. 13. style.css
  14. 14. Put both of those files, functions.php and style.css into a folder together and name it whatever you are naming your child theme. Put that folder into a zip file.
  15. 15. Zip file with the folder inside.
  16. 16. Files inside the folder within the zip file.
  17. 17. Add Themes page with Upload Theme in the top left.
  18. 18. Find your new child theme file on your computer, then select it and press Install Now.
  19. 19. What it will say if the Parent Theme is already installed.
  20. 20. Parent Theme is not installed, but can be installed from the WordPress.org Theme Directory.
  21. 21. Parent Theme is not installed and cant be automatically installed from the WordPress.org Theme Directory.
  22. 22. Child Theme is active!
  23. 23. Note: Whenever possible, you should not make changes to your websites files directly on the server, unless youre 100% sure that it wont cause problems. Whenever possible, make a copy of the file you want to edit, make the changes on your computer and then use FTP to upload the new file.
  24. 24. Lets change the font of the Entry Title. We can see in the Inspector that its class is entry-title.
  25. 25. I have added the change to my Child Themes style.css file. Note that there isnt any other text in this file. All of the Parent Themes styles are still in the Parent Themes files. But my changes to the Child Themes style.css file will override the styles in the Parent Themes style.css.
  26. 26. Note the theme you are currently editing.
  27. 27. Dont forget to click update.
  28. 28. Oh, look! A different font!
  29. 29. How about changing the sidebar background
  30. 30. The sidebars background being changed in the style.css file.
  31. 31. Blue is always fun.
  32. 32. Make a quick change to the font colors in the sidebar.
  33. 33. That looks pretty good.
  34. 34. Making a functionality change. Keep track of which files youre editing so that you dont accidentally edit the wrong file.
  35. 35. Changes to style.css override any preexisting styles for that element or class that exists in the Parent Themes style.css Changes to functions.php will be loaded in addition to the Parent Themes functions.php This means that if you need to remove an action, you will need to declare that in the Childs functions.php
  36. 36. You can now update Twenty Fifteen anytime an update is available without having to worry about losing any of your changes. You can also install this Child Theme on any other WordPress site and it will look exactly the same there, no extra configuration required. You can even upload it to WordPress.org
  37. 37. Typically, a Starter Theme is one that you are expected to edit directly and turn into its own parent theme. It is often incomplete. Underscores, also called _s, is a very popular example of a starter theme.
  38. 38. Typically, a Framework is a parent theme which often has little or no styling, which you are supposed to create a Child Theme for to add styles and functionality. Genesis is a very popular example of a framework.
  39. 39. Theme: Nickadams.tv/wordcamp-hamilton.zip
  40. 40. Nick Adams @nickadamstv @nickadamstv #wcyhm