Does Thesis support child themes? That is a question many users have. The answer is definitively “yes”.
This tutorial will show you the best way to make a child theme for Thesis. We’ll start with a barebones class, then add in some flair to show you the possibilities. I think you’ll be delighted by how simple making a child theme with Thesis really is.
If you aren’t familiar with the Thesis Custom Loop API, quickly run over it as it is the foundation for what we’ll cover here.
The Basics
Every child theme needs to have, at the very least, a style.css. In theory, your whole child theme could simply be that one file. The basic example includes the necessary header information and one line of CSS.
The functions.php file, though not required by WordPress, is where all of your Thesis child theme customizations should occur. Do not include a custom folder with child themes! Thesis custom folders belong to Thesis, not the child theme.
It is important to point out that WordPress treats child themes in an interesting way. The child theme’s functions.php file is actually included before the parent theme’s. That means that each Thesis child theme must first include Thesis’ functions.php file in order to access the yummy Thesis goodness contained within.
You may also notice that we are using a class instead of a bunch of disparate functions. This is for a few reasons:
- To use the Custom Loop API
- Better organization
- Classes are how you will interact with Thesis 2.0, so you need to understand them
To use the child theme:
- Create a folder in the themes directory
- Create a style.css file and a functions.php file
- Copy/paste the code below to the relevant file (or just download the tar ball here)
- Navigate to Appearance > Themes and Switch to the child theme
- Visit your home page. The background should be black.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
|
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
Advanced Customization
Now that we’ve covered the basics, lets dive into some real customization. Basically, what we’re doing here is:
- forcing Thesis to regenerate CSS
- exclude the Thesis style.css and include the child’s style.css
- filter out styles related to the nav coloring, then adding our own back int
- remove the containing div from around the nav menu
Be sure to copy/paste the code below to the correct files, or you can download the tar ball here.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|