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 may 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.
The reason this even occurred to me is because my other blog, Blogussion is a very heavily edited version of Thesis that has a lot of custom CSS, and a lot of different functions. I looked into the files one day and realized that I made a mess!
As I was editing, this idea for a Thesis Thursday post came into my head. I’m going to share with you the things I did 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).
“.custom” is ONLY needed on styles you are editing from the default style!
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.
If you skim through things like me, that file probably read to you as “Use .custom to add CSS here.” Just know that 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!
Create A Color Code Chart
I actually picked this trick up from Chris Coyier, and I think that any designer, not just a Thesis designer should listen to.
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 look really weird and tripped out. 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.
This is what I did at Blogussion, I commented these color codes at the top of the file and whenever I needed a specific 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 somewhere on your desktop or something.
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, but edit them, having some comments around are crucial for 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.
Limit Comments, Create Functions Table
This is something I’ve done experimentally. The functions file is PHP based, and I am not really knowledgeable with the language. I don’t know how files are organized usually, but this is what I can say I do in my custom_functions file.
A. Create A List of All Function Names
When I name my functions, 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 comment in at the top “Functions Chart” and put all of the function names below it. Since I have a lot of functions, this is ideal for me to do.
B. Remove Any Other Comments
Once I have all of the function names at the top, I don’t need comments to make reading the function name easier. I would normally just add a comment above each function with the name because looking at all of the different PHP code would get me confused.
C. Now Locating Functions Is Easier
If you need to find a function now, you can just open up custom_functions.php, look through your name chart, go to your Search Box (usually CTRL/CMD + F) and paste the function name right in. It will find it, and jump you right down to the function you want to edit.
I hope I explained that well enough for you to understand! You can also apply the same thing with your CSS, I think it’s way easier than remembering the names of the functions and classes if you have a nice little table at the top of the page to remember it all for you.
More Thesis Organization Tips
- Multiple Custom Page Templates
- Thesis Tutorial — Creating New Widget Areas
- Thesis OpenHook Plugin
- Using Firebug for CSS
I hope you have learned a thing or two about keeping your Thesis files nice and clean. A lot of these tips will be useful for you if you do a lot of customizations, but if you don’t have that many, it may not be as handy.
{ 1 trackback }
{ 13 comments… read them below or add one }
Nice tips !!
Thanks I always mess up by adding more codes to my files, and in the end when I go back to edit them I always mess up with my theme.
I know, me too!
I don’t know what’s worse, coding a bunch of unnecessary CSS without thinking about it, or going back and removing it all.
I have kept the same color palette through several redesigns of my website. I store it in a spreadsheet for easy reference. For each color, I have the hex code, the RGB code, and an actual color sample. I also list what I tend to use the color for–background, text, links, etc. It was a bit tedious to set up, picking custom colors from a color picker for each color, but has save me loads of time since then.
Hi,
I have tried to keep my custom function file as clean as possible, but have descriptive comments to help me understand later. I have put all my hooks on top so that I can reference them quicker.
In order to keep your custom_functions.php file better organized, you might find my Thesis Extensions technique useful. Each hook/handler function combo can go into a unique descriptively named file.
Nice !
CSS is one of the main reason for my love in Thesis !
S.Pradeep Kumar´s last blog ..How And Why To Convert Your Blog Into A Do Follow Blog?
Thanks for the tips, I’m new to Thesis, CSS, and blogging in general!
One that really stood out to me was adding a color chart to your CSS files.
Yeah, that’s really useful if you use it right. Thanks for stopping by!
Buddy when I clicked these links “Valid xHTML | Valid(ish) CSS” it showed the validation page of this post .. but in some other blogs .. they showed validation page of blog’s homepage instead..
Note : I commented this hoping this is done by mistake.. but you might also did like what it is now.. !
Cheers !
S.Pradeep Kumar´s last blog ..Miles To Walk Before 2009 (Site Goals)
Check the links in the Footer section named “Under The Hood” and not the links in the above comment !
S.Pradeep Kumar´s last blog ..Miles To Walk Before 2009 (Site Goals)
hello everyone.., great place this asnio!
I have a question maybe not to related to the post but more to thesis designing.
The scenario looks like this:
I’ve added a function the other day which uses the “thesis_hook_after_headline” hook.
I wannit to add this post rating plugin for wordpress and so I build the function:
function post_rating()
{
if (is_single()) { ?>
<?php }
}
add_action(‘thesis_hook_after_headline’, ‘post_rating’);
everything was great until I tried to give it some style through the custom_css file.
So, the question is how do I access this function or this hook through css?
What i tried is something like:
.post_rating {
text-align: right;
padding-top:5px;
padding-bottom:5px;
}
or
.custom .post_rating {
text-align: right;
padding-top:5px;
padding-bottom:5px;
}
and there were a few other ways I tried it but non of was effective
so the part which I don’t know is:
.custom .post_rating { - is this place here
text-align: right;
padding-top:5px;
padding-bottom:5px;
}
I would really appreciate it if someone had some solutions or the answer.
thanks in advance.
Great tips. I already did the color-chart at the top thing, but doing something similar with functions is going to really help me keep track.
katinka´s last blog ..Free will, freedom and philosophy series