Build Your Own Business Website header image

Lesson 2 – Part 8 – Best Practices #6 Always Work on a Local Copy of Your File

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
5 Comments… add one
5 comments… add one
  • Sami Barkaoui April 4, 2012, 2:34 pm

    You really rocks Rick!

    Congratulations with that amazing teaching work
    I love the people who teach what they’ve learned 🙂

    We live actually a learning revolution with Internet!

    • Rick Anderson April 6, 2012, 6:34 am

      That’s one of the things I love about technology available to us. Anyone can teach and anyone can learn.

  • Elana Peled November 8, 2012, 10:49 am

    You are an awesome teacher. Can’t thank you enough for this info…I love it!

  • Alex Vasilev December 11, 2012, 11:27 am

    Hi Rick,

    Seeing as how we are ‘almost’ never supposed to use display:none; …I was wondering if you could give one or two examples where using display:none; is okay? For example, we’re using an Alexa plugin that hides itself using this method. I am assuming this is an example where this is okay. Lessons are fantastic, by the way.



    • Rick Anderson December 11, 2012, 11:45 am

      Alex, There will be occasions where display none is essential – such as when using javascript to hide and show stuff. There are also occasions where the display none hides something innocuous that would be difficult to do otherwise. For example if you are displaying the author’s name on all posts typically but want to remove it on “product” posts. This rule comes out of 3 years of watching inexperienced developers recommending it to folks on DIY Themes forums. Folks have suggested using it to remove sidebars, to hide the header or the footer, stuff that is way too significant to remove that way.

      The problem is that Google could misunderstand the purpose of the display none. It does not want a web page to display one type of content to search engines while displaying another type of content to the end viewer. Spammers used to use this technique to “fool” Google into returning pages in search results based on the hidden content.