Imagine this. You’re working hard on your blog design, making changes on the sidebar, adding images to your footer. Ahh you know, I’ll change that text into another colour and font. Maybe I’ll change the margin to the image, shift it further to the right.

You’re hard at work, making all these changes, unaware that you’ve actually deleted some lines in your code. You click on the Save button. When you refreshed your blog, OMGWTFBBQ and all that, it’s wonky. The changes you wanted aren’t there! Why is the sidebar shoved all the way to the bottom of the page? Where’s the text? Why is the header not showing? OMG I BROKE MY BLOG!

The problem is, you’re not the only one seeing all these changes. Assuming that it’ll take you at least several hours to find and troubleshoot the problems, all your readers and visitors who access your blog will see the unsightly changes too. It might be a while before things go back to normal. If this happens during the week and you simply do not have the time to fix it till the weekend, it will be days of wonky and messy layout.

Yikes.

So the question is: How do you make changes to your blog design without doing it on your actual blog?

I’m sure every blogger has his/her way of going about this issue. Today, I’m going to share mine with you.

Create a new blog!

Yep. Just create a new blog, one that people will not know about. I have a few which I create for my design prototypes. If you’re on Blogger, just create a new blog. If you’re on WordPress.com, create a new blog. If you’re on self-hosted WordPress, create a new subdomain (I’ll get to that in a bit).

You can name the blog anything. I’m a boring one, I just call mine Test Blog 1, Test Blog 2, and so on. This blog will have exactly the same design as your actual one. It will have the same CSS/HTML codes, PHP files, widgets, plugins, etc. The only code you do not put into your test blog is your web stats code. E.g. do not put in Google Analytics code into the test blog. Other than that, everything will remain the same as the original blog.

If you’re not very confident in making minor or major changes to the design of your actual blog, do it on the test blog.

For self-hosted WordPress users, create a subdomain

Instead of buying a new domain name for your test blog, just create a subdomain. It’s free! Please note that this option is for those who is on a webhost service, not just the domain. If you’re on Blogger, etc and has your own domain, just create a new blog on the platform you’re already on.

Okay, back to the subdomain. For example, if your blog is beautybloggingrox.com, you can create a subdomain called designprototype.beautybloggingrox.com. This is done through your cPanel.

1. Go to Domains -> Subdomains -> Create New Subdomain.
2. Following my earlier example, add “designprototype”. Leave everything else to default.
3. Once your subdomain is created, access your server files via FTP.
4. In your public_html folder, create a folder called “designprototype”

Once you’ve added all that, treat the subdomain like a new blog. All you have to do is install WordPress on it (onto the directory “designprototype”), and you’re done!

Make the test blog look like the real thing with ” dummy posts and comments”

When you create a new blog, there will be nothing in it. If you want to make any changes to the code that will reflect changes to how your posts, images on your posts will look like, create mock posts for it. This is how web designers do it. You can copy and paste some of your old posts to the test blog. I like to add dummy text using Lorem Ipsum, but with a twist. Check out Hipster Ipsum for funny dummy text 😛

I normally create up to 8 dummy posts, enough for the posts to go to the next page.

With dummy posts, you would also want to add dummy comments. If you want to make design changes as to how you want your comments to look like, you would need to have comments in the first place. Since no one knows about your test blog, you’ll have to add your own dummy comments.

Make changes on the test blog

Go ahead and make any changes on the code on the test blog. Once you’re happy with how your test blog looks like and everything looks fine, copy the edited files and codes to the original blog. This way, your original blog is still working fine, and your readers do not see any gradual changes. I like the element of surprise, don’t you? 🙂

Save original files and code

If you’re not keen on creating a new blog just for design prototypes, then always backup the original design files and code before you make any changes. For Blogger, copy and paste all the original code onto a new file, save it as a TXT file somewhere on your computer.

If you’re not happy with the changes you’ve made to the code, or if you managed to break it somewhere, then recall that file you saved earlier, copy and paste the code back to Blogger. Even though no changes were made, nothing’s broken and you would not lose anything.

This goes for self-hosted WordPress as well, especially if you’re working on PHP files. Always save an original copy first before making any changes.

Unfortunately, for WordPress.com, you can’t make any changes to the CSS code unless you pay for it.

************************************************************

There you go. This is how I make changes to my blog layout, create new designs, testing new plugins, etc without actually affecting my actual blog unless everything is 100% working fine. It takes a bit of time setting up at first, but once you’ve gotten that sorted, it’s very easy for future use.

What about you? How do you make changes to your blog design without breaking it? Let us know!