This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
Integral to any WordPress developer's arsenal is the local server. In this tutorial, I want to walk you all the way from installing a local server to theming, exporting databases, and beyond.
What We Will Do
In this tutorial, I will take you through the entire process of installing a local server on your computer, creating a mock site, and deploying that site in production. By the end of this tutorial, you should be able to understand how to:
- Install a local server and configure WordPress locally
- Import content into your local database
- Create and edit a site or plugin locally
- Install and configure WordPress on your production server
- Import database content into your production site
- Transfer the wp-content folder that houses plugins, themes, and other elements
- Sit back and enjoy clients that love you because of minimal downtime!
And, really to me that last point is what it's all about. I understand that there are some limitations of local servers and sometimes a maintenance mode is necessary, but by utilizing a local server you can effectively eliminate almost all downtime on a normal site. Without further ado, let's dig in!
Step 1. Install and Configure a Local Server
I personally use MAMP (I'm a Mac guy all the way), and it is available for download here. For you Windows users, I would recommend XAMMP, which is available here. There is also an XAMMP version for Mac users.
Click on the link above to download to application. Once it downloads drag the application icon into your application folder (for Mac users), or use the XAMMP installer for Windows users.
After installing, you will find MAMP in /Applications/MAMP. XAMMP will be located in Start -> Programs -> XAMMP. That's it for the install! Once you open MAMP, be sure to take a look at the preferences by clicking on the "Preferences" button. Your ports should be set up like this on Mac:
Starting the Local Server for the First Time
Now that the local server is installed, we will need to start the Apache and MySQL servers. XAMMP also comes with Filezilla and Mercury as included, optional services.
To start up the servers for MAMP, go to: /Applications/MAMP and click on the MAMP icon. The control panel will look like this:
In the above images, we can see the green lights mean that our servers are active. On my older MacBook, this was not always the case (I will address that later). For now, green means go! You can open MAMP's start page by clicking the "Open Start Page" button. This will take you to your phpinfo, phpMyAdmin access, and other important configuration settings that we will use later.
For XAMMP, the control panel, accessed at \xampp\xampp-control.exe, will look like this:
Again, this is straightforward stuff. Click "Start" to start the Apache and mySQL servers. The admin area can be accessed by typing http://127.0.0.1 or http://localhost into your browser.
Congratulations on installing your local server!
Step 2. Installing and Configuring WordPress on Your Local Server
- From within your local server's phpMyAdmin, create a new database named "wordpress". You can add that on the very first page that comes up when you click on the phpMyAdmin link.
- Unzip the WordPress folder and copy it to applications/MAMP/htdocs for MAMP, and programs/XAMMP/htdocs for XAMMP users. The new URL for MAMP will be http://localhost:8888/wordpress/. If you are working on a site that will later be named something else like "blog", now would be a good time to rename the folder. The URL will change accordingly.
Since I also develop sites without Wordpress, I have copied the whole folder over instead of taking the contents out. By leaving root items in their own folder, this also allows me to test Drupal, Joomla, and Magento themes.
- In the wordpress folder, duplicate the wp-config-sample.php file, and rename it to wp-config.php.
- Open wp-config.php in an editor, and starting at line 17, you want to edit the following with your configuration found on your local server's start page:
// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', 'database_name_here'); /** MySQL database username */ define('DB_USER', 'username_here'); /** MySQL database password */ define('DB_PASSWORD', 'password_here'); /** MySQL hostname */ define('DB_HOST', 'localhost');
Obviously, we named our database "wordpress" in step 1, so that goes there. For MAMP users, the username and password can both be set to "root" as that is the default admin user. By default on XAMMP the user "root" has no password.
You can add more users to the wordpress database in phpMyAdmin if you want. The hostname should stay as "localhost".
- With wp-config.php still open, we also want to go ahead and get our unique authentication keys. To do that, visit https://api.wordpress.org/secret-key/1.1/salt/ and use the code that displays to replace lines 45-52:
define('AUTH_KEY', 'put your unique phrase here'); define('SECURE_AUTH_KEY', 'put your unique phrase here'); define('LOGGED_IN_KEY', 'put your unique phrase here'); define('NONCE_KEY', 'put your unique phrase here'); define('AUTH_SALT', 'put your unique phrase here'); define('SECURE_AUTH_SALT', 'put your unique phrase here'); define('LOGGED_IN_SALT', 'put your unique phrase here'); define('NONCE_SALT', 'put your unique phrase here');
- Save and close wp-config.php.
- Begin the installation process by visiting wp-admin/install.php. In MAMP, if you're site URL is http://localhost:8888/wordpress, then you will enter http://localhost:8888/wordpress/wp-admin/install.php.
- If your wp-config.php settings are correct, then you will be prompted to enter the blog name, your email, and username info.
If an error appears, don't worry! The issue will be in your wp-config.php file. Go there and figure out which setting above is incorrect.
Now, WordPress should be active and ready on your local server. You can access the admin dashboard on MAMP at http://localhost:8888/wordpress/wp-login.php. If you changed the folder name, then change "wordpress" to the new name. XAMMP users can do away with the :8888 or enter 127.0.0.1/wordpress/wp-login.php.
Step 3. Create and Edit Your Site
Starting with Themes and Plugins
Your default WordPress installation will come with a default theme called Twenty Ten. To add more themes, you can copy them straight into the wp-content/themes folder or you can install them via the WordPress dashboard in "Appearance -> Themes". Themes can be edited locally via "Appearance -> Editor" or a text editor.
Plugins can also be installed the same way, either copy them into wp-content/plugins or find new plugins via the WordPress dashboard in "Plugins -> Add New". Plugins can also be edited locally via "Plugins -> Editor" or a text editor.
Having a local server is also a great way to test new plugins and find which ones work for your sites. Every WordPress developer should have a tool bag full of plugins that they can make work for them at their disposal.
So now that we have our theme and our plugins, what about content? Well, click here to download an XML file full of WordPress post content that should help you get started.
To import that XML content into your local server:
- Go to "Tools ->Import"
- In the list of options that appears, click "Wordpress", since you are uploading WordPress content. This will also apply when you import data from this site to your production site.
- If this is the first time that you have imported content, you will be asked to install the WordPress Importer. Click "Install Now". This actually installs a new plugin in our wp-content/plugins folder named "wordpress-importer".
- After it is installed, click on the link to activate and run the importer.
- Browse to the posts.xml file (or any other exported WordPress database file), and upload.
- On the next screen, attribute the new posts to an author (usually admin), and be sure to click "Download and import file attachments". I find this to be helpful if I am importing new data.
Now, if you visit the admin dashboard, you will see that you now have posts, categories, comments, pages, and users to utilize as you test and develop themes and plugins.
Importing data does not overwrite existing data, it only adds to what is there. So don't worry about that as you import.
Getting Those Pretty Permalinks
This is something that frustrated me greatly when I first started working, but the solution is simple.
First, open your httpd.conf file in /Applications/MAMP/conf/apache/. Lines 378-381 will look like this:
<Directory /> Options Indexes FollowSymLinks AllowOverride None </Directory>
Replace that code with:
<Directory /> Options Indexes FollowSymLinks AllowOverride All </Directory>
Your pretty permalinks should be all good to go, which should also help quicken your production.
Step 4. Ready the Production Server
Now that you have installed and configured WordPress on your local server, you can apply the same principles to install WordPress on your production server.
The nice thing is that since you only need to change some wp-config.php database settings, you can simply do the following to get WordPress up and running in a production environment:
- Log into our server's control panel, navigate to phpMyAdmin, and create the database named "wordpress".
- While logged into phpMyadmin, make sure to note username, password, and database host address, as we will need to edit these values in wp-config.php.
- Edit wp-config.php to match the new server settings.
- Upload the entire WordPress folder via FTP to your production server. Again, this may be named something else if you want it to be in a sub-folder (ex. http://mysite.com/blog/ - where "blog" is your WP install). If you want to install WordPress in the root of your site, move the folder over to the root folder of your site, and then move the contents out into your root folder leaving the original WordPress folder empty. You can then delete that folder. This will also ensure that you move over all of the plugins and themes that you have been testing with. You can delete unwanted plugins and themes in your production enviroment by removing them from the wp-content folder or disabling them in the WordPress dashboard.
- Complete the famous 5-minute install as outlined before. Remember, if there is an error, it is almost always due to an error in the wp-config.php settings. WordPress will even tell you this on its error page.
Now WordPress is active in production, but it lacks content. We must get our local server content that we have perfected over to our live site.
Step 5 . Transferring Your Database Content and Files
Exporting the Local Server Content
In order to export our local server content, we need to log in to our local WordPress dashboard, again http://localhost:8888/wordpress/wp-login.php for MAMP users and http://localhost/wordpress/wp-login.php for XAMMP users.
Next, scroll down to "Tools -> Export".
Since this is the first export, select "All Content" and click "Download Now". As WordPress states, "This will contain all of your posts, pages, comments, custom fields, terms, navigation menus and custom posts.".
Immediately (depending on the size of the database), you will have an XML file which has a name structure of sitename.wordpress.year-month-day.xml. This is the file that we will import just like we did with posts.xml on our local server.
Importing Content into Production
Since we just learned how to import new data into our local server, use the same principles to install your content from your local server to your production server
Exporting and Importing Directly in phpMyAdmin
I also want to point out that you can also import and export directly in phpMyAdmin. To export our local server data, we would:
- Open phpMyAdmin from the MAMP or XAMMP start page.
- Click on our database named "wordpress" or whatever you have named the WordPress database.
- Click on the "Export" tab, and choose an XML type export.
- Be sure to check the box for "Save as file". Since the content of my site was small, I chose not to compress it, but I would highly recommend it for larger databases.
This will save a database backup XML file directly to your hard drive. Now you can import it via WordPress or your production server's phpMyAdmin.
To import our newly created XML file (mine saved as wordpress.xml), repeat steps 1 and 2 from above, but at step 3, click "Import". That screen will look like this:
Browse to your saved XML file, and click the radio button for XML under "Format of imported file".
And that's all folks! You now have a fully functional site that you created and configured on a local server, but exported and deployed into production.
Local Environment Tips and Tricks
In addition to the tutorial above, I wanted to throw out a couple of things that I do while working in my local environment that have proven helpful when moving to production:
Secure Your Site Before it Goes Live
This last year was the first time that I had a site get hacked. I know that may be old hat for some, but there is nothing like getting a call from a client to report it. Now, the good news was that it was easy to take care of and secure, but through that experience I learned that you can never go wrong with securing your site early.
One of the easiest things to do to add a layer of security to your site is to create a blank index.php file and place it in your wp-content folder, wp-content/plugins, wp-content/themes folder. This is a quick fix that can be done at the beginning of the development process to create an added layer of security for your site by preventing indexing of your content.
In that index.php file, I would just add the following code:
<?php //This is for added security, and it prevents indexing. ; ?>
Use Downtime to Learn New Things
My local server has proved invaluable in my learning the ins and outs of WordPress plugins and themes. Because I don't need the internet anymore, I can download the themes and plugins I want and whenever I get the chance look over the files and functions.
This may sound pretty common sense, but having my local server and using it regularly has really shaped the way I develop by allowing me to learn practically from others' work in their code. And the great thing is that if I still haven't understood something, I can come back to it later because it isn't live and it isn't affecting anyone.
Understand the Limitations of a Local Server
Now after all of the positive things, here are a few items that should be noted when working with a local server - primarily from my experiences with MAMP :
- Be prepared if the local servers won't start. There was a time, specifically with my MacBook and MAMP, that every time I went to start on a site, MAMP would just freeze. I would spend the first 15 minutes of a project I was excited about trying to figure it out. Kind of killed the excitement a little! To remedy this, try "Force Quitting" MAMP. If that doesn't work, OSX 10.5 and 10.6 users can usually open up Activity Monitor (located in Applications/Utilities), select "My Processes", and look for multiple instances of "mysqld". If there are multiple running, delete all but one. That should get things back to normal.
- For MAMP, the green lights to indicate the servers are on are not always reliable. To test this, just click on the "Start Page", and if it comes up then you are good to go.
- Some form actions and advanced functions may not work properly. I have experienced this with an Amazon S3 plugin that I developed. For these things, I will often set up a custom WordPress page template or plugin folder, install it to my site via FTP, and test on a private page. You could even install a subdirectory to accomplish more testing or use Multipress.
Thanks for walking through the process of installing a local server, configuring a WordPress site on it, and then migrating that site to a production environment.
I would encourage any of you that have more experience than me to please post below any other local setups that you have, any more ideas of how to streamline the migrating process, and any other tips and tricks to working locally. I am just one voice of the community after all.
Thanks for reading!