The following post on ‘breaking your blog’ and setting up test blogs was submitted by Michael Martin from Pro Blog Design.
One of the best kept secrets in design is that we don’t always know what we’re doing. Understanding design theory and color and all the rest of it is one thing, but when you’re backed into a corner, it’s your instinct that takes over.
You get a feeling that something might work, and you roll with it. If it works, great. If it doesn’t, try something else.
This works with designers because we can fix our mistakes. As a blogger however, you may not be so comfortable. What happens if you break your blog? The answer is to set up a blog that doesn’t matter if you break it.
Why Experiment With Your Design?
The best thing about designing on the internet is that nothing is ever quite finished. You can spend weeks building a fantastic design, but long after you release it, you can keep on making changes.
The internet gives us the ability to continually improve our blogs, and we should use that. Is every single aspect of your blog perfect? Not likely.
How would things look with a smaller header? The sidebar on the other side? A different color for links? By experimenting with every idea that takes you, you can decide which work and which don’t, landing you one step closer to perfection.
Setting Up A Test Blog
To safely experiment with your design, you set up a second blog. You copy your theme over to the second blog, and make all the changes there. If things go wrong, then no harm done. Just wipe the slate and start over.
On a free hosted blog, such as Blogger, all you have to do is register a second account.
With a self-hosted blog, such as WordPress, you can either install a second blog on your web server, or locally on your computer. The second option is very easy to do, and preferable because you can use your own text-editor on the files, and it’s much faster.
Installing WordPress on Your Computer
You need to install a web server (Apache), PHP and MySQL. Fortunately, a few nice guys have done all the hard work for you. All you need to do is download and install a single file (Windows, Mac, Linux).
When the installation is finished, you need to start your server, create a new database, and then install WordPress.
For Windows users: (Mac and Linux users may have to check their own documentation, though things will be pretty similar)
1. To start your server, select “Start WampServer” from the WampServer group in the startup menu.
2. In your system tray, you will see a new icon. Click it and a list of options will appear.
3. Choose the “phpMyAdmin” option. On that screen, there will be a “Create New Database” section. Fill the name “wordpress” into the box, then click “Create”. Now close phpMyAdmin.
4. Click the system tray icon again and choose the “www directory” option. It loads Windows Explorer with the folder where you will put your web files.
5. Create a new folder (Called “wordpress”) and copy over all of the WordPress files (Everything that you’d normally upload to a server). Also copy over your blog’s theme into /wp-content/themes/.
6. Open up wp-config-sample.php, and change the details (You can set up a password in phpMyAdmin if you want, but if you’re the only one at the computer, it’s not needed, and it’s one less password to remember!).
define(‘DB_NAME’, ‘wordpress’); // The name of the database
define(‘DB_USER’, ‘root’); // Your MySQL username
define(‘DB_PASSWORD’, ”); // …and password
define(‘DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this value
7. Rename wp-config-sample.php to wp-config.php (The usual WordPress install).
8. Click the icon once again, and choose the “Localhost” option. This will load your web browser. Under the “My Projects” section of the sidebar, you’ll see a wordpress link. Click it and that’s you! Just finish up the WordPress install as normal.
With that done, all that remains is to fill in a few dummy categories, posts and comments. Your local WordPress is ready, and you’re free to experiment as much as you please. Just save a copy of the theme somewhere safe, so that if you break something, you can replace your files with the copies.
Checking That Your Theme Works
You don’t want to upload a design that works for you, but not for everyone else. It is easy to forget that we aren’t all using the same browser, so you should check how your changes look in the major browsers.
The good news is that small changes rarely cause trouble in different browsers. The problems tend to occur when you change the size/layout of certain parts of the page.
The browsers you should install, and test your theme with are:
- Internet Explorer 7.
- Internet Explorer 6 (To get this with IE7, XP users should use Multiple IEs, but Vista users need more).
- FireFox (I also recommended that you check in Opera and Safari, but for the changes you’ll be making, you can often assume that if it works in FireFox, it works in these 2 as well).
All of that may seem a little scary to some, but it’s not. Setting up WordPress doesn’t take long, and the confidence you get from knowing your mistakes don’t matter is unbeatable. You’ll have a better looking blog in no time.
So, what changes have you thought about making to your blog before, but haven’t tried to do yet?
Isn’t it sometimes possible to save copies of the CSS files and the viewsource html…..
and then, simply insert those?.
I prefer to set up a test blog on my webserver. It is easier to manage and can be edited anywhere. If you were are worried about duplicate content ruining your SEO then add a nofollow tag.
One other benefit I found with an online test blog is that I can get a developer community from it. People who feel involved in the stake of altnoise can go to the test blog and make suggestions to help on the improvements.
I am also setting up a vision team for the blog based off the test blog.
I can’t seem to find the download for Windows…
Mariella, I think the correct link for WIndows is here.
I’m lucky to have local hosting which includes apache and fanatastico, and already I’m testing 2 versions of my forthcoming blog thanks to fantastico’s 1-click-wordpress install feature!
Great blog post Martin, interesting advice :)
Well this is the first time i have heard that we can install a wordpress blog in windows. Will test it for sure, if it works then it will be a boon for bloggers and webmasters
I could setup WordPress online quite easily because to speak the truth I just had to click next and next. But when it came to installing it locally in my computer I had quite a tense time.
I did it successfully, but I still am confused about it.
I will definitely take this article as help for me.
Cheers.
HI Daren
I am constantly tweaking my blog at first I use to think that I should leave it the way it is but I keep on finding new ways of improving it’s design.
Interesting concept. This helps especially when you try posting stuff on a live site, and you find mistakes, this could affect the viewers. It’s better to try it locally first before going live. Thanks for the tip. I learned something today.
Miss Universe – It is, but things can still go wrong. What happens if you don’t copy over everything? Or too much? Or you already have a CSS class with the same name? This is about being safe while you play about. :)
Miracle – That’s your call. Do you not find that you work a lot faster when it’s all done locally though? Sharing it with others, and getting their feedback, is great, but I would only use the online test blog for showing it to them. I’d still do the development work locally.
Mariella – The link is wrong. Sorry! You can use either the one Martin linked to (It’s the same package that I’ve linked to for Apple and Linux), or Wampserver. :)
Martin – Fantastico is good, but you’ll still end up playing with your files at some point. WP is quick to install so I don’t mind it. And thanks for sharing the right link!
Alex – Glad you liked it.
FWE – Let me know how you get it on. I think you’ll like it!
Sangesh – It’s definitely a little tricky the first time, especially considering how many options there are. The thing is, you don’t actually need to touch most of them. So long as you know how to start your server, and where to put your files, you can ignore all the rest. :)
Nice post Michael!
Maybe as a follow up you could post on tips and tricks for porting your local WP install (and database) over to your webserver.
great advice. I’m a designer and am always fiddling with my site. I’ve made a few crucial mistakes when hacking some of my theme files and even put my site out of action for quite a few hours more than once.
I think with the nature of the web at the moment it is very important to keep freshening things up, keep improving and extending and making things more interesting for your readers.
I’ve got a copy of my theme in my themes folders and if i make any huge mistakes, which I am bound to do at some stage I can quickly flip over to the spare while I’m fixing what I’ve broken.
I was wondering however, is it possible to run one blog with more than one theme? I mean having the theme switch if you click on a certain category maybe?
Very nice idea here. Never thought of installing WP locally and testing code changes.
@ nomad,
It is possible to have more than one “theme” that your site works on. You would need to look around for a CSS switcher, try a google search for them as there are quite a few out there. It also depends on your platform (wordpress, typepad, etc.) as to which one will work best.
The only problem with this is from a usability standpoint that if someone comes to your blog and they click on a new category or however you set it up, it might confuse them as to if they are on the same site.
If you are looking to change things around a bit on your site depending on where the user is, try changing the colors, etc of certain areas and see how it looks. This would probably be a better option and easier to maintain in the long run. It would take just a few changes on your CSS file to do.
I agree – you should always be experimenting with your design.
If you get really serious you can use multivariate testing to show different variations of your design,
You should at-least use crazyegg to see where people are clicking on your site.
Jason
http://www.sitesalary.com
Nice one, I test my sites always before uploading a change to the live server.
Michael, u may want to update the link for Mac to MAMPP, rather than XAMPP.
If you blog is installed at the root, as most blogs are, why not install WP again as a subdomain or subdirectory?
i.e.
demo.domain.com
domain.com/demo
Most web hosting companies provide 25 SQL databases (and therefore 25 instances of WordPress) before you have to upgrade to the next package.
Nice article Michael. I use this technique myself. I have a test blog that I use to test any change I make to my theme design as well as to use for developing new themes for clients. It works very well for me.
For those who may want to set up a testing environment on their PC that is similar to what your web host has, I just wrote an article with a full video tutorial on my site.
VitaminCM.com
Good Luck, I hope this helps.
when I was testing and perfecting my new blog design I installed the theme on one of my not so popular blogs that I had just started, and worked on it there.
Nomad-One – Yep, that’s possible. If what you’re after is a slightly different stylesheet for each category, it’s very easy to do. You’re using WordPress, which means that you can use conditional tags in your theme. Have a read of that article, and see if you can make sense of it. Otherwise, let me know and I’ll write up a guide on my blog. :)
Elliot – It can definitely be done using CSS, yep, but for a novice coder, it might just be more confusing. Having a different stylesheet for each category isn’t optimal, but it is easy to understand.
Jimson – You could, but installing it locally is better because everything is faster and you can use your own tools. e.g. I can use Dreamweaver to edit the template files, ctrl+s to save them and then refresh FireFox instantly. No download times etc. Whenever you’re making lots and lots of little changes and refreshing them, it saves you a lot of time overall. (And you can install multiple wordpresses in the one database. Just change the table prefix. :) )
Thanks for the step-by-step instructions and advice. I’m always changing things based on feedback from my visitors and this will make it a lot easier to experiment without worrying about messing things up on my original site.
Here’s a nice tool where you can check your site on different versions of IE:
http://ipinfo.info/netrenderer/
By the way, why do people still use the old versions of IE anyway? Clearly they still live in the dinosaur age.
Sly from Slyvisions.com
While I was getting my new theme ready, I created a new subdomain and copied my database over so I could see what the site would really look like. I also setup WordPress to work as a “private blog” so it wouldn’t start pinging other sites and attract attention. Then I installed the “maintenance mode” plugin to keep out any other people or search engines. It worked like a charm — I got everything set up and copied the theme over with no problems.
Sounds good Brian. That’s exactly the sort of use this should be put to. :)
i get stuck here
1. To start your server, select “Start WampServer” from the WampServer group in the startup menu.
i do not see the wampserver group in the startup menu.
i installed xampp from the link you provided using the installer option. it said the installation was okay. i have the xampp control panel applet on my desktop. it says all the services are up. i have an apache friends start menu group, but that’s it.
where do i go from there?
Thank you.
frank
Good advice on creating a second blog to try out new things. In the past I would just use the “Maintenance mode” plugin (hides all content to non-admin/guests and displays a “Site is undergoing maintenance” sign) and quickly change things.
Please, please, please give us a step-by-step on installing on a Mac, OSX 10.5. Please…..
Great post, Michael. I use WAMP and like it quite a bit, and I’ve also set up a second blog on my domain to use as a testing ground that I can more easily share with others, like clients or people whose opinions and feedback I value.
You never know what gems you’ll find here!
I’m designer and what i can say from my experience is that its really hard to rate own design and especially just almost after finishing it in one day. You need few days to rate it more objectively and see some cons of design, some not looking good things.
Thats why is a good thing to ask your friends what do u tihnk about blog design, functionality, navigation to give you better idea what could u improve next.
A sample blog can be an opportunity because you can gain feedback before you push something “live.”
Investor’s Journal – Thankfully you see less and less of those maintenance signs these days. Maintenance time is down-time, and something we all want to avoid. :(
Mark – Thanks. :)
Dan – That’s true, especially for large changes (Like full redesigns), but for small changes, I’m usually quite happy to get the feedback after they’ve been on my real blog (You get more feedback that way, and people get to see things exactly as they would be)
Great advice, a local install is a good idea.
I use local server to build and check my pages.
I can recommend AppServ application. Installation is easy
AppServ 2.5.9
* Apache 2.2.4
* PHP 5.2.3
* MySQL 5.0.45
* phpMyAdmin-2.10.2
http://www.appservnetwork.com/
Excellent post
A great way to test our your site in pretty much all browsers on various OSes is http://browsershots.org/.
I’m not affiliated in anyway, just a happy user.
I was thinking of trying this myself but never got around to it. Now I got a tutorial to follow, thanks.
Hi, I’m a PR student at the University of South Florida and we are studying the growing popularity of blogging. If I wanted to get an influential blogger’s attention such as you, how would I go about getting my issue out to the masses?
Great idea, I’ve got a locally hosted wordpress that I use to play around with new plugins / design my themes.
please, i need a step by step on doing a local install in osx 10.5
I can tell the writers are not technical ppl here. No offense intended. :)
But most modern blogs have a way to view more than one theme on the board.
For instance wordpress has a theme per post option – it is as simple a writing a draft, assigning the theme to the draft and previewing it…..
I am certain that other blogging platforms would have similar methods, including a way to maniplulate the url, since the theme is usually stored in a PHP variable.
You hit the nail on it’s head with this one.
Continous innovation how successful brands are made.
Again…Thanks for spelling it out so simply.
“So, what changes have you thought about making to your blog before, but haven’t tried to do yet?”
Well I’ve thought about the changes I wanted to do to my blog and I went straight into changing it. Why waste time thinking of when to change? In fact I’ve just changed my site design yesterday!
Anyway if you wish to test your web design on different browsers, you can visit BrowserShots. It’ll take some time to load though.
Martin and Michael, thanks a lot! :D
A very useful post. I always tweaked things up on the server itself but that was limited for the fear of breaking it up. Set up done. Thanks for sharing.
very true.experimental really counts when starting a blog.but however,when your blog is establishing itself,psychologically,it may be a little difficult to break it down.this is the same like you created a lego masterpiece and you just simply tear it down.
Great post, especially for novice bloggers not that familiar yet with all the tools of the trade.
Jason – Crazy Egg is a great tool. I use it regularly as well. :)
Sumesh – Thanks for sharing. I’m a PC user, so I haven’t actually tried any of the Mac products. The one I linked to is just one that I know works. I can’t vouch for any of them being best.
Max – Glad you found it useful.
Sly – lol – There are always people who don’t want to upgrade. Usually because they don’t realise/don’t care about the new features or whatever else the upgrade does. We just have to live with it. xD
Pachecus – Looks like another good alternative. Thanks.
glblguy – I used to use that a while back, but it was so slow. You have to wait quite a while between taking a picture and actually seeing it. It’s much nicer to just have all the browsers (Even if getting IE6 on Vista was a pain in the neck…)
Sean – I know that that was probably addressed to Darren (The real blogger here), but my 2 cents is not to see us as bloggers. We’re just people. If you want a busy person to help you out with something, it’s usually best to offer them a nice reason to do so in return (Not necessarily money! :P )
Dozens – I’m sorry, I don’t have a Mac. Have you looked at the installation guide on xampp? There doesn’t seem to be much to it (Provided you know how to access the terminal?)
Shane – I think you’ve missed the point here. It’s not about putting different themes onto different parts of your site. It’s about updating the whole site, and not breaking it in the process.
Latarsha – Glad you liked it.
Hafiz – lol – Well that’s true! Just so long as you have an idea of what you’d like to play with.
Adam – I think we’re all a little guilty of that. If the change in question is a big enough one, it can be a little too risky to make the changes on the live site.
Constructicle – You don’t need to break it down. You’re just re-doing certain parts. Think of it as adding an extra layer to your masterpiece. :)
Xampp is by far the best one to use for Windows users but even better is Portable xampp from Portableapps.com, All you have to do is extract the file in your C: and click on one of the icons that says start xampp, then type localhost to setup phpmyadmin and localhost/mysite which is located in htdocs where you should place your wordpress installation.
Michael, you’re a mind-reader! I’ve been stalling for time about setting up WP on my own computer, seeking a clear set of instructions to take the scariness out of it… just like these instructions of yours. Thanks much!