Since I’m still learning when it comes to WordPress theme development, I wanted to share my experiences with all of you. I know there are lots of other people out there just beginning their WordPress journey and thought you might have some of the questions (or run into a few of the problems) that I have.
This is the first in a series of posts that will cover basic WordPress theme development from start to finish. I hope you’re able to learn something from these posts – even if it’s something small.
Installing WordPress on a Mac
I recently released my very first WordPress theme, but before I could start coding I had to get my local host up and running.
Below are the steps I used for locally installing WordPress on a Mac. Why am I only writing about local installation on a Mac? Because that’s what I have. If I ever install WordPress on a PC I’ll be sure to update this post. So for those of you with Macs – let’s get started!
Download & Setup MAMP
I recommend using MAMP for local installations of WordPress on a Mac. First things first, you need to download MAMP (Mac Apache MySQL PHP) which you can get for free from their website by clicking on the nifty button below.
Once you have it downloaded, install MAMP like any other program by dragging the folder into your applications folder.
Now that you have Mamp installed on your computer you will have to to adjust your default MAMP settings.
- First you’ll want to open MAMP, and you should get a start up (see img below -left)
- Click on the “Preferences” button.
- This should open a second screen (see img below – right)
- Click on the “Ports” button to update the values selected.
- It’s recommended you use 80 for your Apache Port and 330 for your MySQL Port.
The adjustments to the ports will allow you to exclude the port number from your localhost URL and protect your local host respectively. Even thought using port 80 requires you to enter your admin password each time your start your servers, it really doesn’t bother me and it makes me feel more secure about my secret theme creations.
While you’re in your preferences you’ll also want to set your PHP to the latest version and choose a document root location for Apache (100% your choice – I made a new folder in my docs just to keep things organized).
Now it’s time to start up your servers and add a database.
- >Open Mamp
- Click on “Start Servers”
- You will see a welcome screen such as below
- Click on phpMyAdmin
- You should be taken to a new screen where you are given the option to create a new database. Think about what you want to name your database. Test, wordpress, wp, wpdev – whatever works for you (just remember the name because you’ll need to use it for another step later on).
- Enter the name and click create.
Bam! You are now all set up to install WordPress locally! Look at you – being all tech savvy.
WordPress is famous for their easy installation. To start – download the latest version of WordPress from their site by clicking on the button below.
Once downloaded, double click to extract the folder. Open the “WordPress” folder and drag all of the other contents into your Applications/MAMP/htdocs folder.
Step 1: Edit Your Hosts File
This is an important step to be sure you can later enable multisite. In order for mutlisite to work, you need to remove the post number from the localhost URL. So we are going to map a brand new URL to our localhost. First open Terminal and type the following:
sudo nano /private/etc/hosts
You might be prompted for your admin password, so just type it and hit enter. Then you will be taken to the screen below. Use the down arrow to go to the bottom of the list and add (with a tab in between, and where “test” is the name you gave to your MAMP database):
Hit “control + x” to exit the menu. Make sure to enter “Y” when asked to save your changes.
Step 2: Edit wp-config-sample.php
Go to MAMP/htdocs and rename the “wp-config-sample.php” file to “wp-config.php” and open it up. Now edit the files using the name of the database you created as well as “root.”
Save the file. Now go to your home directory (which should be http://whatever-your-database-name-is) and follow instructions to complete installation.
Step 3: Complete The WordPress Installation
When your local host URL, you should see a screen such as the one below where you will enter your main info for your WordPress installation. Fill out the form and hit “Install WordPress”.
Now you should have WordPress installed locally!
Setup A Multisite WordPress Installation
Multisite is a great functionality you’ll want to use with your localhost when developing WordPress themes. This way you can create many test site environments where you can immediately see changes you make to your themes without having to use a live site. There is no time like the present to install multisite, and since you have a fresh WordPress install from the steps above there is nothing to backup (but if you choose to enable multisite at a later time, you should backup your site before starting this step).
Show Hidden Files – Important!
Part of Multisite will include editing the .htaccess file which happens to be a hidden file. I spent a while looking for it, then felt like a complete noob when I finally realized it was hidden. Open Terminal again and enter the following code to show all hidden files:
defaults write com.apple.Finder AppleShowAllFiles true killall Finder
This resets Finder to show all of your naughty hidden files, and will give you less of a headache when we move on to later steps.
Open up your wp-config.php file again. Now we’re going to add in the following code to turn on WordPress’ step-by-step instructions for adding multisite:
WP Install Network Settings
Make sure your MAMP servers are running. Now login to your localhost site. Under tools, there should be a network option. Here you can choose to use sub-directories or sub-domains (I used sub-directories but that’s just my preference) and continue with network setup. The next page should ask you to add a site name and admin email.
Then click install and let WordPress work it’s magic.
Edit .htaccess and wp-config.php files
Next you should be presented with a screen similar to this one:
Just continue to follow the directions. You used to have to create a /blogs.dir file in your wp-content folder, however it appears that with WordPress 3.5 you no long have to do this step (I didn’t do it, and haven’t run into any problems yet ;-). Open up the wp-config.php file and paste in the related code:
And do the same with the .htaccess file (which you made visible in an earlier step):
Add Sites To Your MultiSite
Now all you have to do is log back into your WordPress dashboard and go to “My Sites,” network admin and then sites to add new ones.
From here you can add you desired site name, title, and admin email.
Success! You can now install any network enabled themes on your new site(s) for testing. Create as many or as few sites as you’d like and get developing!