How To: Edit Your Website Without Breaking It

Local Development for Non Coders
How many times have you been trying to tweak the code on your site in the “Editor” built into WordPress only to hit save and be rewarded with a blank white screen and no idea how to fix it? Congratulations, you just broke your site! That’s because you, my darling friend, have been cowboy coding. Don’t worry, it happens to all of us at some point because pretty much everyone is guilty of doing their edits this way until they learn that there’s a better way – namely doing your development locally.

What we’ll cover in this post:

  • Installing MAMP
  • Configuring your first MySQL Database
  • Installing WordPress to your new site!

Typically when this happens it is because you made a typo or other error in one of the PHP files (generally the Functions file) and this breaks your site because these are the files that form the bridge between the website you see in the browser and the database where all of your site’s information is stored and when the code isn’t just so these complicated technological marvels get utterly confused.

Pin For Later

Some of you might have figured out that using the Editor is a good way to get locked out of your site (the hard way too, if you’re anything like me…) and have started making changes to your site via an FTP client or your host’s file manager. This is a better solution because if you screw something up you just remove the new code, re-save, and your site is back the way it was. It’s not the best solution though because all of these changes are happening on your live site and that means anyone who happens to visit at that moment sees a wacked out site and will promptly leave.

Why develop locally?

Local development means that your computer acts as a server instead of your web host, and there are a couple of benefits to this:

  • No waiting between making your changes (and saving) and them appearing on your site. Since you don’t have to wait for your server to respond it’s lightening fast.
  • You are the only one that can see it, which means you can screw it up 😉 without your visitors seeing it until you’re ready.
  • White screens are fixed with a edit and save of the PHP files instead of panic and hair-pulling

I definitely use local development when I am working on a client’s site, but I also maintain a local version of my own site. Having  a local copy makes it easy to test out changes, and provides me with a backup in case anything crazy happens on my site and I need to reload it.

The Tools

Local development requires a couple of tools, and while there are many options out there, these are my favorites (and bonus they are all free!):

  • MAMP – this is the lynchpin of the whole system, and while originally only available for Macs is now also available for Windows!
  • Brackets – a code editor (like the Editor on WordPress but better) that allows you to make changes to your files in a user-friendly format
  • Cyberduck – once you are happy with your site you will need an FTP client to quickly upload the updated files and push them to your live site.

Configuring MAMP and Creating Your First Database

Once you have installed your tools, open up MAMP. You will see a screen that looks like this:

Changing MAMP Settings

You can start and stop the server from here, open the WebStart page (which is we will talk about in a moment), and update your preferences. Let’s start there – click Preferences to open the settings menu. You can change a couple of things like the version of PHP and Ports here, but for now you can ignore those. Click the tab “Web Server” so we can set up your document root.

Configuring MAMP Root Folder

Click on the folder icon will allow you to select the folder that you want to contain your website files. I choose to make a folder on my dropbox called “Test Sites” which contains a folder for each site I’m working on within it. I made Test Sites my document root, and then I can access every site from there when the server is running. Create your own folder in whichever location makes sense to you, and make it your document root before we continue. MAMP open webstart page

Clicking on Open Webstart page will bring up the MAMP web dashboard (which may have opened automatically if your settings allow it). From here you can see a lot of information about your server such as the username and password (which is usually root for both initially) and you can access the tool “phpMyAdmin” which is where we will create our new database.

Configuring the MAMP settings for Local WordPress Development

phpMyAdmin can be found in the “Tools” dropdown or by clicking the link below MySQL

 

Once you have accessed phpMyAdmin you will need to create a new database for your new website. On the left hand side of the page you will notice some databases exist already in the tree – mine has a lot more than the fresh install, so I’ve blurred them out, but you wont see them on your computer. Click the “new” button to get started.

Creating a new database with phpMyAdmin for Local WordPress Development

A new screen will display with a list of all the databases that exist and at the top will be a box to create a new database. Give your database a name (I prefer to use an identifying name for the site instead of “WordPress” but if you don’t plan to have more than one site then it doesn’t matter). Leave the dropdown box at “Collation” and click “Create.

Creating a new database with phpMyAdmin for Local WordPress Development

You’re all done – congrats you have created your first MySQL database.

Famous WordPress Five-Minute Install

The next step in this process is installing WordPress to your local server. Don’t worry, it’s easy!

  1. Download the latest copy of WordPress from their site and unzip it. Open up the folder.
  2. Drag and drop the contents of the folder to your site’s folder in the Document Root you selected earlier.
    • Example: my document root is called “Test Site” and within it I have “AdrianneElayne” as it’s own folder. I  would drag and drop all of the files and folders I just downloaded inside of “AdrianneElayne”.
  3. Head over to your new site at “LocalHost:8888/your-folder-name” to install WordPress. You will be rewarded with the following screen:WordPress Install Select Language
  4. After selecting your preferred language, click continue. You will see a screen warning you that you will need your database credentials to install your site. WordPress Install Warning
  5. Remember that database we created earlier? This is the name it is looking for. For the purposes of this post I created a database I named “Demo” and installed WordPress into a folder within Test Sites called “Demo” as well. Unless you changed them, your username and password should still be “root” and since we are running each site off of it’s own database (if you need more than one) you can leave the prefix at “wp_”. WordPress Install Database Credentials
  6. Hitting submit will bring you to this cheeky page. Click “Run the install”.WordPress Install Ready to Install
  7. Assuming everything works as expected you will next see the following screen which will be where you create your Administrator credentials. Choosing a strong username and password here isn’t as critical as if the site were live and open to hackers, however if you plan to port this site to a live site (including user accounts) you should just to be safe so you don’t forget in the future.

    WordPress Install Setup Admin Account

    I would un-check the “Allow search engines to index this site” while you are developing.

  8. Clicking “Install WordPress” is the final step which will bring you to a screen displaying your username and giving you a button to click to login to your new site.

So that’s how you install WordPress to your local server! What you do next is entirely up to you 🙂 In the next part of this series I will show you how to make edits to your themes using Brackets to customize your site, and in the final segment we will talk about pushing those changes to your live site using either FTP or a plugin.

Leave a Comment