WordPress Design Sandbox

When creating a website, it’s best not to make experimental changes to your code directly on your server for the whole world to see. What if you accidentally mess things up beyond all recognition and don’t remember exactly what you did? It’s a good idea to test developmental changes in a protected environment where you know they won’t effect anything that’s mission critical. Typically this is simple to do as you can just edit the files on your local machine before uploading them. Making a test bed for WordPress, however, is a bit more difficult due to the nature of dynamic page generation.

WordPress uses PHP to pull data from a database, and then subsequently creates the needed HTML based off of that data. Without the PHP, your page would merely render as junk. Thus, in order to see a design change made in your CSS, you’re usually forced to upload the file to your server so WordPress has access to its heart and soul. Not anymore…

The Sandbox

In an effort to make things easier on WordPress users wanting to customize the default installation, I’ve created a static version of the default WP template and have placed it in a zip file along with a clean copy of wp-layout.css and print.css. The template includes a sample entry that utilizes many common HTML elements so you can tell exactly what they would look like on your page.

In this developmental sandbox, you can make structural code changes, try out new CSS techniques, whatever you want…all without having to worry about messing up your live site. Once you get things the way you like them, simply update your real files accordingly, and you’re good to go!

Installation

  1. Download wp-design-sandbox.zip
  2. Create a new directory on your local machine in which you’d like to place the test files
  3. Unzip the three files into the newly created directory
  4. Design away

37 Comments

  1. Posted November 15th, 2004 at 1:10pm | Permalink

    Thanks! This is exactly what I needed.

  2. Posted November 16th, 2004 at 12:10pm | Permalink

    Same here, I find it so hard to work on the design with the dynamic WP templates. I was thinking of doing this myself, thanks for saving me the time and beating me to it.

  3. Posted November 17th, 2004 at 3:44am | Permalink

    Most Excellent! Thank you. Now I can blow it as many times as I need and not have to worry about destroying the server!

  4. Tommy Andersson
    Posted November 17th, 2004 at 12:21pm | Permalink

    Yup!…Exactly what I needed!…

  5. Posted November 19th, 2004 at 3:29pm | Permalink

    Awesome thanks! P.S. Found you through scripty goddess.

  6. Posted November 20th, 2004 at 7:31am | Permalink

    Simply put, thank you so much!

  7. Posted November 20th, 2004 at 11:43pm | Permalink

    Brilliant idea! I can’t wait play with this…

  8. Posted November 21st, 2004 at 6:53am | Permalink

    Very good idea. Sometimes visitors thought I’m running a live-redesign-show on the server. I’ll test it next time. Thank you.

  9. Natasha
    Posted November 21st, 2004 at 8:43pm | Permalink

    I’m new to Wordpress. If you only knew how helpful this is. Thanks so much. I also found your site through Scripty Goddess, just in case you were wondering. Thanks again.:)

  10. Posted November 22nd, 2004 at 12:04pm | Permalink

    this rocks! i’ve been waiting/looking for something like this - Thank You!
    (i got here through scripty too)

  11. Posted December 3rd, 2004 at 6:22pm | Permalink

    Oh, how I wish I had found this yesterday! I’m sure my server was ready to divorce me! LOL! Thank you soooo very much! (Ps…Scripty sent me!)

  12. Posted December 5th, 2004 at 1:42pm | Permalink

    They really ought to include this in the install package! I think people are right when they say the best way to learn is to break things, and this makes it a lot less painful.

    Well done!

  13. Posted December 18th, 2004 at 11:03am | Permalink

    Amazing. Your generosity in sharing your secrets is simply beyond compare.

  14. Jason
    Posted December 20th, 2004 at 2:37am | Permalink

    Great info, thanks.

  15. Posted December 22nd, 2004 at 10:05am | Permalink

    Great idea of creating one page with all frequently used tags included. Nice job!

  16. Posted January 11th, 2005 at 1:19pm | Permalink

    SO glad Scriptygoddess referenced this on her site. Thank you, this will save me so much time!

  17. Posted February 24th, 2005 at 4:01pm | Permalink

    Thank you very much for this. It really helped me figuring out the different sections without blowing up my site.

    Regards
    Bill R.

  18. Posted February 25th, 2005 at 6:36am | Permalink

    Is this based on 1.2.x series? Can this also be used for developing the newest release (1.5 aka 1.3)?

  19. Posted March 7th, 2005 at 1:32pm | Permalink

    I hope this can help me… I want to change my template, but I new to WordPress and also to everything relate to codes and stuff…
    I have a new template in mind… but I am not allow to change in my wordpress (it have to be writable???).
    Thanks for this tip!!!

  20. Catherine
    Posted March 23rd, 2005 at 8:36am | Permalink

    excellent - thank you! came here via scriptygoddess, btw.

  21. onga
    Posted May 1st, 2005 at 6:43am | Permalink

    is this the main_template ?

    how would we do it just copy the static html and place inside the server wp template ?

    not sure i understand

  22. Posted June 2nd, 2005 at 11:34pm | Permalink

    just what i needed!! :D
    i was just going to have a /development directory on the my server… but this is much easier having it on your local machine. :)

  23. ptryk
    Posted August 2nd, 2005 at 9:18am | Permalink

    cool.. but perhaps i am not seeing its full potential but it seems to be limited to widget testing.. not bad, but seems like lots of extra work since the problem still arrises of updating on final server integration…….

    if you want to locally test YOUR site, check out
    http://www.tamba2.org.uk/wordpress/xampp/

  24. nchenga
    Posted October 6th, 2005 at 12:27am | Permalink

    does this work for newer WP versions such as 1.5.2?

  25. Posted October 31st, 2005 at 6:48pm | Permalink

    I don’t see how this helps? You still need to create the theme templates for wordpress at some point and your script doesn’t provide ANY support for that. Am I missing something ?

    Xampp is perfect for local development. I don’t know anyone who edits their wordpress template files on the live server!

  26. Posted November 14th, 2005 at 3:16pm | Permalink

    is this the main_template ?

  27. Posted January 16th, 2006 at 4:49am | Permalink

    how does it perform under wp 2.0 ?

    rgds
    jakob
    http://boyer-draeby.dk

  28. Posted March 27th, 2006 at 1:46pm | Permalink

    Finally I am able to create pages without uploading changed files to my webspace to see the changes.
    Perfect.

  29. Posted March 30th, 2006 at 1:03pm | Permalink

    Thanks… very helpful tool!

  30. Posted June 27th, 2006 at 6:03am | Permalink

    thanks you thanks you thanks you. this is perfect for my needs!

  31. MZ
    Posted October 13th, 2006 at 12:48pm | Permalink

    THANK YOU!!!!! Exactly what I was looking for.

  32. Posted March 29th, 2007 at 11:26am | Permalink

    Greetings, the wp-design-sandbox.zip file is giving me a “corrupt” error after downloading… Can you please check?
    I look forward to giving this a try!
    Thanks

  33. Posted March 31st, 2007 at 1:32pm | Permalink

    Cool, It’s a great tool.

    I am looking for it a long time.

    Thank you

  34. Posted May 13th, 2007 at 8:53pm | Permalink

    it is a very useful tool,i think

    i often need to find my theme yesterday to find sth

    thank you for the great job~

  35. Posted June 18th, 2007 at 10:13pm | Permalink

    Okay, I’m going to give this a go for a new site. Love the idea of not messing with the original. Does it work with the newest version of Wordpress?

    Thanks!

  36. Posted September 24th, 2007 at 5:05am | Permalink

    What is the sandbox

  37. Posted March 22nd, 2008 at 6:49pm | Permalink

    Thank you so much this will def come in handy!

Post a Comment

Your email address is never published nor shared. Required fields are marked *

*
*