I am sure a lot of you have created awesome WordPress sites on your local PC/Laptop, and spent ages using some outdated search and replace plugin trying to update all those http://localhost/ urls.
In this tutorial I’m going to show you the best way in my opinion to create and develop a child theme and use local DMS resolution so all those pesky urls stay the same. Can it be done you ask? Sure and actually its easier than you think!
Getting Tooled Up
Choosing the right tools for any job is important. Of course a lot depends on the host OS but for the purpose of this post we’re using MAC OSX.
To run WordPress locally you are going to need a webserver. MAMP is the perfect tool for the job here as it offers the latest PHP/mySQL with a nice UI.
We are using the PRO version as it includes unlimited local domain resolution.
To get WordPress up and running with MAMP the WordPress Codex has a nice little writeup here.
After installing you need to make a couple of changes to the usual settings.
The default ports for MAMP are set to 8888 and 8889 for Apache and mySQL.
This is so MAMP does not need super user privileges when it starts up but you should change them to 80 for Apache and 3306 for mySQL.
Also make sure the username/group is set to your username and group like I have in this screenshot.
You need to do this so WordPress does not need to ask for permissions to install plugins and write files.
Next you are going to need a decent text editor.
Create the site
Now its time to create your first localhost site.
So lets pretend you have a client with a proposed URL that is http://www.some-random-site76.com
We are going to use MAMP Pro to simulate that domain locally so all the image/css urls in the database will be http://www.some-random-site76.com and not something like http://localhost:8888/wp1/.
The reason for this is that you wont have to go into the database and do a search and replace to get rid of all those nasty localhost urls.
At this point if you open the URL in your browser you should see the default MAMP welcome page looking something like this.
The next step is the one your used to, installing WordPress and DMS.
Nothing unusual here just follow the normal install process remembering to use the url you setup in MAMP.
Check out the next page where we create a child theme.
A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child theme allows you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.
Now we have WordPress and DMS all up and running on your custom domain its time to make a child theme and create that masterpiece for the client!
To create the child theme we need to create a new theme folder in our WordPress wp-content/themes folder. If you have never created a child theme or have no idea what one is, here is a link to the WordPress Codex Page for child themes.
In your new theme folder create a brand new style.css and put something like the following into it.
Now go to your WordPress admin themes page and you should see a new theme listed. Activate your new child theme!
So now you can add all your custom css for the new awesome site to the style.css file.
Alternatively if you are feeling particularly awesome you can create a style.less file in the same folder and start writing in the LESS language and DMS will see the LESS file and automatically compile it for you!
Uploading The Site
After all that hard work you are ready to upload the finished site to the webhost of your clients choice.
So you have installed WordPress on the webhost of your clients choice and uploaded DMS and your brand new child theme. The next step is usually to export all the posts locally then import them into the new host and then spend hours with an old search and replace tool fixing image paths, am I right?
Not any more!!
If you have followed this tutorial so far your local database will have all the right URLs for the remote site, so all we have to do is export the local database and import it into the remote site, thats it!
Back to MAMP, lets find the phpmyadmin link…
Click the phpmyadmin button there, you see the all familiar phpmyadmin user interface, just navigate to your database and click the Export tab at the top, couldn’t be any easier!
Now you need to use the database tool provided by the webhost of your clients choice to import the same database, most hosts provide phpmyadmin, lets hope his does too!
All thats left to do is log into wp-admin and make sure your child theme is still active!!
We have setup the perfect localhost environment for developing WordPress themes.
We created a child theme and uploaded it to a webhost.
We never had to search and replace any posts for localhost urls because we are now awesome!