Tips for Keeping Thesis Functions and CSS Organized

One of thing that sets Thesis apart from other themes is the way you can edit it. You are only required to edit two files to make any customizations throughout your whole website.

Those two files, as you know, are custom_functions.php and custom.css. The reasoning behind this is 100% for organization purposes. In regular WordPress themes, you have many files to work from. In Thesis, you just have two. It makes so much more sense, and it will ultimately make your site run faster.

The only problem I have with editing only two files is that everything can start to get rather cluttered. You control every element and every piece of the layout in these two files, that if you have a lot of customizations – you’re going to have a mess.

As a Thesis skin developer, I have to find ways to keep all of my functions and CSS organized so I can go back to them later and make proper changes.

I’m going to share with you the things I do to keep my files more organized. You can apply some of these tips to any theme really, but I’m going to be speaking in Thesis throughout this tutorial (yes, I did just refer to Thesis as a language).

1. When to use .custom in CSS

This was a mistake I made at first, and is something I think is being made on some other Thesis powered blogs as well.

If you read the instructions in the default custom.css file, you will see that:

You can use the “custom” class to override *any* CSS declarations contained in the style.css file.

You only need to add .custom in front of the class you are editing from the default style.css. If you made something up on your themes, you do not need .custom in front of it!

2. Create A Color Code Chart

Designing has a lot to do with consistency. In your theme, you don’t want to use a lot of different colors because it can start to look weird and inconsistent. I find that if you create a color chart of all of the colors you use throughout your coding, you will be in some good shape.

What I will do sometimes is create a color chart and place it at the top of my CSS files. Just so I can refer back to the colors later:

[css]
/*———-
COLOR CHART
RED:#B82626
BLACK:#312F2F
LIGHT GRAY:#CCC
DARK GRAY:#B82626
WHITE:#F1F1F1
————*/
[/css]

Always make sure to comment it out!

You don’t even have to keep it in your CSS, maybe a file you keep somewhere on your desktop.

3. Use Comments!

Using comments in your CSS will help a lot, especially in Thesis. Because you usually don’t write many of your own styles &mdash but edit them, having some comments around are crucial for future editing.

You don’t know what most of the names are, and what exactly they control from the name all the time. So by distinguishing where each line of code goes, it will help you a lot.

More Thesis Organization Tips

I hope you have learned a thing or two about keeping your Thesis files nice and clean. These tips will be useful for you if you do a lot of customizations, but if you don’t have that many, they may not be as handy.

4 comments add yours

  1. Nice point about .custom, it was not something I realised when I first started out with Thesis. However, I still use it for my own styling since I can tell at a quick glance in FireBug whether it’s my code or Thesis code that’s affecting an element.

    (Not so much a problem during a build, more helpful when you’re tweaking one of your older sites)

    Thanks 🙂

    • That’s another good point, using/not using .custom plays a big role in how I use Firebug. I still sometime use it when I shouldn’t, but it’s a habit of being a Thesis developer I guess, haha.

  2. This is a great nuggets to have. Keep the value coming in.

Leave a Comment