Tips For Keeping Your CSS & Functions Organized

One of thing that sets The­sis apart from other themes is the way you can edit it. You are only required to edit two files to make any cus­tomiza­tions through­out your whole website.

Those two files, as you may know, are custom_functions.php and custom.css. The rea­son­ing behind this is 100% for orga­ni­za­tion pur­poses. In reg­u­lar Word­Press themes, you have many files to work from. In The­sis, you just have two. It makes so much more sense, and it will ulti­mately make your site run faster.

The only prob­lem I have with edit­ing only two files is that every­thing can start to get rather clut­tered. You con­trol every ele­ment and every piece of the lay­out in these two files, that if you have a lot of cus­tomiza­tions — you’re going to have a mess.

The rea­son this even occurred to me is because my other blog, Blo­gus­sion is a very heav­ily edited ver­sion of The­sis that has a lot of cus­tom CSS, and a lot of dif­fer­ent func­tions. I looked into the files one day and real­ized that I made a mess!

As I was edit­ing, this idea for a The­sis Thurs­day post came into my head. I’m going to share with you the things I did to keep my files more orga­nized. You can apply some of these tips to any theme really, but I’m going to be speak­ing in The­sis through­out this tuto­r­ial (yes, I did just refer to The­sis as a language).

“.cus­tom” is ONLY needed on styles you are edit­ing from the default style!

This was a mis­take I made at first, and is some­thing I think is being made on some other The­sis pow­ered blogs as well.

If you read the instruc­tions in the default custom.css file, you will see that:

You can use the “cus­tom” class to over­ride *any* CSS dec­la­ra­tions con­tained in the style.css file.

If you skim through things like me, that file prob­a­bly read to you as “Use .cus­tom to add CSS here.” Just know that you only need to add “.cus­tom” in front of the class you are edit­ing from the default style.css. If you made some­thing up on your themes, you do not need “.cus­tom” in front of it!

Cre­ate A Color Code Chart

I actu­ally picked this trick up from Chris Coyier, and I think that any designer, not just a The­sis designer should lis­ten to.

Design­ing has a lot to do with con­sis­tency. In your theme, you don’t want to use a lot of dif­fer­ent col­ors because it can look really weird and tripped out. I find that if you cre­ate a color chart of all of the col­ors you use through­out your cod­ing, you will be in some good shape.

This is what I did at Blo­gus­sion, I com­mented these color codes at the top of the file and when­ever I needed a spe­cific color, I just scrolled to the top and got it.

COLOR CHART
RED:#B82626
BLACK:#312F2F
LIGHT GRAY:#CCC
DARK GRAY:#B82626
WHITE:#F1F1F1

You don’t even have to keep it in your CSS, maybe a file you keep some­where on your desk­top or something.

Use Com­ments!

Using com­ments in your CSS will help a lot, espe­cially in The­sis. Because you usu­ally don’t write many of your own styles, but edit them, hav­ing some com­ments around are cru­cial for editing.

You don’t know what most of the names are, and what exactly they con­trol from the name all the time. So by dis­tin­guish­ing where each line of code goes, it will help you a lot.

Limit Com­ments, Cre­ate Func­tions Table

This is some­thing I’ve done exper­i­men­tally. The func­tions file is PHP based, and I am not really knowl­edge­able with the lan­guage. I don’t know how files are orga­nized usu­ally, but this is what I can say I do in my custom_functions file.

A. Cre­ate A List of All Func­tion Names

When I name my func­tions, I copy and paste the name to the top of the file. This is kind of like the style sheet color chart I talked about above. I com­ment in at the top “Func­tions Chart” and put all of the func­tion names below it. Since I have a lot of func­tions, this is ideal for me to do.

B. Remove Any Other Comments

Once I have all of the func­tion names at the top, I don’t need com­ments to make read­ing the func­tion name eas­ier. I would nor­mally just add a com­ment above each func­tion with the name because look­ing at all of the dif­fer­ent PHP code would get me confused.

C. Now Locat­ing Func­tions Is Easier

If you need to find a func­tion now, you can just open up custom_functions.php, look through your name chart, go to your Search Box (usu­ally CTRL/CMD + F) and paste the func­tion name right in. It will find it, and jump you right down to the func­tion you want to edit.

I hope I explained that well enough for you to under­stand! You can also apply the same thing with your CSS, I think it’s way eas­ier than remem­ber­ing the names of the func­tions and classes if you have a nice lit­tle table at the top of the page to remem­ber it all for you.

More The­sis Orga­ni­za­tion Tips

• Mul­ti­ple Cus­tom Page Templates
• The­sis Tuto­r­ial — Cre­at­ing New Wid­get Areas
• The­sis Open­Hook Plugin
• Using Fire­bug for CSS

I hope you have learned a thing or two about keep­ing your The­sis files nice and clean. A lot of these tips will be use­ful for you if you do a lot of cus­tomiza­tions, but if you don’t have that many, it may not be as handy.

Tagged as: css, file organization, style sheets