Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Find a great theme and adapt it as a child theme

Find a great theme and adapt it as a child theme

This is the extended slides version of my short talk @wordcampch #wcch


Christian Zumbrunnen

May 03, 2014


  1. Find a great theme and adapt it as a child

    theme Christian Zumbrunnen switchplus ag @chzumbrunnen @switchie
  2. What we cover •  Finding and installing a pleasant WordPress

    theme •  Modifying the theme •  Creating a (Why and how)
  3. 1 Finding and installing a pleasant theme

  4. paid or free? paid •  sustainable •  support •  well

    worth free •  might not be sustainable or not be able to give support Find a nice theme at the WordPress.org themes repository or a trustworthy commercial provider but never google for free WordPress themes and download from unknown sources.
  5. Hints on choosing a theme Many free WordPress.org themes are

    excellent quality. (All themes within the directory are closely reviewed and must meet rigorous theme review guidelines to ensure quality and security)
  6. Hints on choosing a theme •  the price tag doesn't

    necessary always mean better worth. (although I highly recommend to pay for premium whenever your happy with a theme)
  7. time is better invested then money / invest time not

    (just) money Hints on choosing a theme
  8. Hints on choosing a theme read reviews, support questions and

    discussion in the forums etc. - it's worth it
  9. Hints on choosing a theme more bells and whistles is

    not better – clean WordPress best practices code is nobody sells a theme with: "horrible code, many beginners mistakes in code”
  10. finished step 1 Finding and installing a pleasant theme I

    chose the free theme «sorbet»
  11. It looks like this

  12. 2 Customize a theme (or child theme)

  13. places to modify a theme •  In the backend UI

    – Theme customizer – Theme options – Widgets – CSS •  In the file system – CSS / images – Template files
  14. In the backend UI The theme customizer and theme options

    often offer enough options for basic adjustments and customization: •  changing a logo / header image / background •  fonts / colors •  layout variants
  15. Example Changing the Background Image, the Header Image, and some

    Colors in Sorbet.
  16. Changing the Background Image, the Header Image, and some Colors

    in Sorbet.
  17. BUT... I can’t change all from the backend, eg. font-family,

    color, size
  18. Hint There is (almost) no difference in handling a theme

    in the backend, parent or child. But the customizer saves theme-specific: Changes in the parent don’t influence the child.
  19. In the backend UI CSS As style sheets are «cascading»

    you can overwrite styles of the theme. It’s not always needed to edit .css files as some themes offer an entry field to add custom css or have an extensive theme options panel.
  20. theme option panels

  21. in the file system If you need to edit files

    do it in a child theme!
  22. 3 Creating a child theme! Why and how?

  23. Why? •  To keep you from having to choose one

    of those three options if an update of your chosen theme is available…
  24. Option one •  Update and loose most of your customizations

  25. Option two •  Not update and risk – a security flaw

    – not profiting from the new and improved [whatever] – feeling bad
  26. Option three •  manually compare the changes from version X

    to version Y and update them file by file line by line and factor in all your customizations •  Not an option
  27. Why – positively said •  To give you a proven,

    solid way to create a customized theme without danger to damage the original theme. •  The child theme mechanism enables you to override theme templates and stylesheets with your own customizations in a safe way without the need to manipulate the original theme. •  You profit from all the glory of the parent theme (including the experience of it’s developer) and still can create additions, change design and functions…
  28. Does your chosen theme work as a parent theme? • 

    in most cases YES, if the theme is coded properly
  29. Does your chosen theme work as a parent theme? • 

    No, if there are major flaws in the original themes (like hardcoded paths and the like) •  No, if the theme is a child theme already (e.g. Genesis) – No grandchildren – But one parent theme can have many children ! create a sibling (copy the child theme)
  30. How to create a (child) theme? •  Themes are a

    series of files in the wp- content/themes folder of your WordPress installation •  You need either access to the file system on your server (FTP, SFTP, SSH) or you can create the (child) theme locally and upload it via backend (zipped). •  There are also some plugins to do it from the WordPress backend
  31. None
  32. None
  33. None
  34. A (parent) theme needs •  style.css •  index.php and most

    likely has a lot of additional files: •  functions.php •  header.php / footer.php •  sidebar.php •  single.php / content.php / content-page.php / archive.php / comments.php / 404.php…
  35. None
  36. The template hierarchy This files follow the template hierarchy. Which

    means: WordPress looks for the most specific file first and uses it, if found, otherwise uses a more generic file until it finally uses index.php
  37. The template hierarchy explained •  http://codex.wordpress.org/ Template_Hierarchy •  http://wphierarchy.com/ (interactive)

    •  http://marktimemedia.com/redesigning-the- template-hierarchy/ (wallpaper) •  http://2013.minneapolis.wordcamp.org/ 2013/04/27/wordpress-theme-template- poster/ •  http://www.texto.de/das-geheimnis-der-wp- template-hierarchie-template-sheet-zum- ausdrucken-600/ (deutsch)
  38. None
  39. None
  40. None
  41. Template hierarchy - example •  If you click a Category,

    Tag or Author you normally switch to an archive template. •  To see on which template file your on, you can use a Plugin like Query Monitor
  42. A child theme needs •  style.css All other files it

    takes from the parent theme except there is one in the child theme folder. Therefore you only copy the files you want to adapt into the child theme folder.
  43. Style.css

  44. None
  45. Now it looks like this

  46. More Meta Information It’s possible to add more than just

    the Theme Name, Description and Template name in the comment section of the style.css (see next slide example for a Twenty Fourteen Child theme), but it’s not needed.
  47. None
  48. In our example: sorbet

  49. Example •  style.css – ! drop-shadow for Site Title •  Changes

    in template files for: – ! different ©info in footer – !Only excerpts for archives – !Mail in author archives
  50. changing the footer.php - parent

  51. changing the footer.php - child

  52. Result

  53. only excerpts for archives Explanation: Instead of having a separate

    file for each template, we use conditional statements like if ( is_search()) ) in content.php. This has in essence the same effect as using a search.php template, but helps do less repetition. if ( is_search()) || is_archive() ) ask if either (OR) condition is true.
  54. mail in author archives Explanation: just adding code to the

    is_author() part of archive.php
  55. Result child parent

  56. functions.php •  Doesn't need any special comments, just <?php ?>

    •  will add / not replace functions if ( !function_exists( ’any_function' ) ){ function any_function() { // Do something. } }
  57. Child themes allow you to stand (or sit) on the

    shoulder of giants. So start creating your very own child theme!
  58. Questions?

  59. Contact •  christian.zumbrunnen@switchplus.ch •  @chzumbrunnen •  @switchie •  www.switchie.ch /