Welcome back to the 8th and final part of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In this final part of the lesson, we are going to look at rule #6 which is always edit your local copy of custom.css for the Thesis theme. Never edit the live copy of that file.
I can’t emphasize this enough. This is something many people I have taught have avoided because they were either afraid of this for some reason or they felt it took too long or they didn’t feel it was important. But I can tell you that the professionals always do their editing on a local copy of their custom.css file and once they’ve done the editing there then they upload it to their live server. They don’t ever do an edit on their live server.
Less Prone to Error When Editing a Local Copy of custom.css
Another way of saying this is that best practices means never using the Thesis Custom File Editor to edit your files. The Custom File Editor is one of the worst ideas ever devised for WordPress. It looks deceptively simple; it looks like it’s an easy way for you to edit your code. But in point of fact, what’s it is really an easy way of doing is of crashing and killing your website so that you can’t ever recover from it.
Editing the live copy of your site is very bad practice and especially for people who aren’t experts at it – it’s very prone to error. It doesn’t have the facilities of showing you when you’ve made a mistake and the consequence of that is that you may not notice that you’ve made a mistake.
Easier to Recover from a Disaster When Editing a Local Copy of custom.css
For example, if we’re working on our custom.css file and we make a mistake say, .custom #header and misspell the color: brtn instead of brown. Okay, now that is an error and it’s a relatively simple one but it is nevertheless, an error. And in a text editor like NetBeans it tells you that an error has been made and it underlines that with red squiggly and shows you a little symbol. The same thing is true with this, here we have an extra curly bracket and we’ve got something here that says this is an error. To the extent that it’s an error, it can affect the way the site displays. Well, you’ll never see those if you edit inside the Custom File Editor.
Also, if you make a mistake that breaks your site while editing within your Custom File Editor it can be very difficult to overcome or to come back from. It doesn’t matter that you got 5 commands just right if on the 6th command you put in something that breaks the site and the only way to fix the website is to upload a clean copy of that page using FTP. But when you do that, you overwrite that page and you lose all of the edits that you made before that.
And point in fact, since this is your site backup system anyway and since FileZilla is the way that you’re going to keep a copy of the website work that you’ve done in a safe place, it just makes sense to use this as not just a method of website recovery, but a method of managing your work in such a way as to be very easy to recover from. If you are doing the editing on a local file and you make a mistake and that crashes your site, it’s a simple thing to come back over here to NetBeans and to undo and get rid of those edits in NetBeans, save it again, upload it again, and you’re back to your fixed state. Often, that’s not something that you can do when you’re using the Custom File Editor.
Easier to Troubleshoot When Editing a Local Copy of custom.css
And finally, it can be very difficult to troubleshoot. You may make errors while editing the Custom File Editor that don’t break the site but prevent the CSS from working. For example, this week I had 5 or 6 sets of emails with a member who was suggesting to me that he was having problems with CSS. And the problem was that he had an error in his CSS some place that he couldn’t see because he used the Custom File Editor.
He wasn’t using an error checking code editor. So he couldn’t see that there was an mistake and it was one of these where there was an extra bracket and that threw everything off. Now you can see that in this case, once I put an extra bracket in there, this lost its italics and this lost its bold. And if you don’t see that little extra bracket right there, you don’t realize you’ve got an error. And it can be difficult to find that extra punctuation in a tool like Firefox and Web Developer because it’s all black and white, you don’t see any color coding, you don’t have any error checking. These little things, they look very much the same and it can be very difficult for you to catch that type of error.
The final thing is that it’s often the case that if you’re using your Custom File Editor then you may be cutting and pasting from a web page and that is an absolutely horrible idea. If you take a code from a web page and paste it directly into your custom file via the Custom File Editor, you may be copying special characters or HTML symbols or things that you don’t see but are going to throw the site off.
For example, a lot of tutorials written by people who don’t really know what they’re doing will just be in this text format like this, and so when you are required to have double quotes, they’ll have a double quote that looks just like that. Well, this is called a smart quote and smart quotes are different than double quotation marks in web development. Smart quotes inside of a function or inside of a CSS designation can break that designation or break that function. So if you just go copy something out of a web page and paste it into your page, it can break it.
So for all of those reasons, rule #6 is one of the most important. Always edit your local copy of custom.css then upload that local copy to your site and test. Don’t ever edit the live copy of your custom.css or custom functions.php file. And if you disregard that advice, I absolutely guarantee you are going to make an error that will end up in an email to me saying, “This code that I have is not working,” and it’s always going to be because there is an error some place that you couldn’t see because what you did was pasted it or typed it in your Custom File Editor.