Finally! The day has come that I can get you enthused by talking about theme development. This is one of the things I really like doing for a client, because with each client we get to improve our default code and make future projects a lot easier.
My goal for this post is to get you going by talking about structure and some techniques. There’ll be other post explaining parent and child-theme development.
But first, let me convince you!
To convince you that the use of a custom theme is more rewarding then using bought or free themes I have created a little list below.
With a custom theme:
- You don’t load unnecessary files. Bought and free themes usually come with A LOT of code. This comes from the fact that they try to cover everything for their eind-user. But most of the time you won’t need half of what is being loaded or you’ll need slight changes to the code being loaded resulting in even more code.
- You get to be the boss of your structure
- You can arrange the styling based on the content the client has. This is a big task, but if you create a styling base (in the form of a parent-theme) which you can use across projects you keep your sanity and the client keeps the liberty to create new content.
Have fun! I mean.. thusfar I have made loads of themes for clients. Most of those stem from two parent themes, I just created child-themes based on those parents for clients. I will talk about this in a later post. So be sure to stay active on our blog!
Like I said before, a big plus for us is creating our own structure and keeping things neat. Here’s a small example of what the structure of a client’s theme can look like:
– Parent Theme
– Client Theme (child of Parent)
The Sass and eventual CSS for our theme
All images needed for this project
The scripts needed for this theme
Page templates, singlular and overview templates, etc.
Smaller template parts used throughout the project like share-sections, or code for a single column
Working with SASS
I strongly advise that, if you are going to be making your own theme, you use a CSS-preprocessor. For this I use Sass. Sass makes your css manageable. Why isn’t this the case with normal CSS you might ask? Well.. with SASS you can:
- Make functions which you can use over and over in your projects without copy/pasting code around.
- Work with variables. This makes it really easy to change your font-color or font-style if your project demands this all of a sudden and helps re-use parent-themes but keep them fresh for new clients
- You can nest your code! Yes you read it correctly. No more using “ .header ul” and “.header ul li” instead of typing all this boilerplate you can just nest.
- Make use of Imports and compile everything into one file. This keeps code separated neatly in different files (making it easier to find stuff) without affecting load-time in the end.
Sass retains it’s own structure
In our structure-example above I mentioned Sass already. We also have a clear folder-structure for working with this tool, which is:
- $ Main.css
As you can see the structure of your css-folder changes a bit by using Sass. BUT it makes it way easier for you to see where you’ve put your code. You can also add your own sass files of course! All the sass files get imported into main.scss. We use GruntJS to compile Sass and get our main.css file, but there are plenty of compilers out there!
I hope I convinced you to make your own theme. If you need some help you can try to play with our empty theme canvas called Carte Blanche. Most of what we covered in this post will be in that open source project.
In the next post we’ll discuss actually building a new (parent) theme and in the post after that we look into creating child themes off the originally created parent.
I’ll be seeing you all in the next post.