Simple Question: How do I edit a website so I can upload all the changes at once?

[kyle246]

I have a wordpress website.

I want to make some big changes to the layout (mostly css). How would I make those changes and view those changes without the changes going live just yet?

Basically, I want all the changes on my website to appear all at once.

I was thinking about downloading my whole website to my computer, then make the changes. As I make the changes, I view it on my computer (and not on the live web.) Then when I am done, upload my whole website again. I don't know if this method is safe or not or if things could get changed when I re-upload.

What is the best way to go about doing this?

[HTMLBasicTutor]

You can get WampServer to install an Apache server locally. Be sure to turn IIS off if you have it running by default.

Install Wordpress from wordpress.org.

Dowload your theme from your live site to your computer and put it under themes folder in your local Wordpress install. Activate it.

Now you can either create some fake content within the local install to test your changes with or try importing your existing content into the local install.

Play with the CSS locally and once done upload to your live site.

[weegillis]

Being a seat of the pants kind of guy, I'd get ballsy and tweak the CSS on the fly. That's me. What @HTMLBasicTutor suggests is infinitely wiser, unless of course you're feeling ballsy.

Since it is just the CSS you're changing then having backed up your old style sheet, you could select the CSS you're going to change, leave it in place but copy it, then paste it underneath so it's lower in the cascade, and execute all the changes on those selectors, removing any properties you do not change (they're still higher up). You're basically overwriting existing style rules. Once your overwrites are working, you can remove their originals, and merge the new with the old.

You can comment out anything you don't wish to test. Run your live test. There's your changes. Doing small projects in an undistracted environment, you can work the CSS on the fly, and implement changes in an orderly way that nobody even notices.

Changes to the chrome might be trickier, but then it's only images and CSS, right? Still all changes that can be done on the fly, if done carefully.

Now I don't advocate this, the wiser advice has already been offered. I only bring attention to the fact the CSS is that simple, and easy to work with, taken in chunks and respecting the specificity, the cascade and inheritance. It is graphics design, not programming, and infinitely more flexible than many would ever imagine. And if you don't like something, you change it back.

[morestar]

Just remember though, that after you've made your changes and want to upload it all to the server, live, that you only need to upload the theme folder...

[jannmirch]

For CSS tweaks I'm with WeeGillis - and agree the smarter thing to do is follow the advice above. But also, I love that in Chrome I can inspect an element and change it right in the browser to see if its doing what I want it to do. when it does I copy and paste it into my CSS file and upload the changes.

But, as you say, you're making a lot of changes. This might not be so practical.

[jhannawin]

Wow, I never realised that was so complex.

[HTMLBasicTutor]

Unfortunately Wordpress makes it too easy to edit live. This is a dangerous situation.
a ) There is the potential of you doing something that breaks the site. (Even pros mess up.)
b ) Those who edit live tend not to backup what they have done once finished in case the server crashes and looses their changes. Web hosts say they back up but what if you did these changes in between back ups and the server crashes. The web host will put things back as they were at their last backup. You will have to remember what changes you did and do them over.

Plus the OP said:

...make those changes and view those changes without the changes going live just yet?

Basically, I want all the changes on my website to appear all at once....

So working live is not an option in this case unless you make a copy of the theme on the server and switch between old and new on the grave yard shift (i.e. the time of day when an oops would affect the visitors least). Still very confusing because unless you know how to change the theme description shown in the themes screen you just might activate and edit the wrong version.

[Easy Anderson]

You can do all of the above, but just make a Sandbox or another installation of what you are working on. Make your changes there, then copy the WP Theme directory over to your REAL site once you are done. That way you never blow things up! Easy Peazey.

Cheers,
Andrew
[removed]

[mmcverry]

What kind of computer are you on? If you're on a Mac, use MAMP to run your web server off your computer. The process is the same to what the other posters have said.

Setup web server
Download site and run off your computer
Make changes (have copies of original files on hand)
Then re-upload all your changes.

MAMP is free and has good documentation, however still took me 6-8 hours to fully understand and use. Also if you use the latest version of firefox, they have a nifty inspector tool like Chrome now for CSS changes.

[ronchalice]

Kind of siding with Easy... I have a test WP instance on each of my server accounts. When I get it right, it's simple to copy the theme folder(s) to the live site right before cutover. With tools like myPHPAdmin it's pretty easy to copy some live data into the test instance if you're look is going to be data dependent.

It also helps to mark up (I use Goodreader on an iPad so as not to mess with paper) a copy of the existing CSS before you begin making changes. In many cases, you'll be able to all the mods in a single sitting.