How to develop WordPress locally with mamp pro and dyndns

When developing websites for clients I always try to make everything as transparent as possible. And for that reason I set up staging environment on my web server, something like separate folder and point the client to that URL while I develop the website, so they can keep track of all the changes and we can communicate better.

Until few months ago this approach was 100% ok with me, I just developed directly on remote server via FTP (my coda editor is perfect for that), but then I started to notice new cool stuff popping up almost every few months or weeks. I’m talking about things like sass, haml, CoffeeScript, version control (git), tools like live reload and CodeKit. And it’s not hard to guess what is the main problem with all this. I can’t use all these new shiny front end development toys, because all of them require local development environment. And then I started using MAMP, free LAMP (linux, apache, mysql, php) server for Mac OS. Great. I could use all of that, and after few projects I realized there is another issue with this set up. Clients can’t see what I’m working on and in order to show it to them – I need to grab all that and copy to staging server, and I have to do that every few days, just so they can see the latest version. Turns out it’s not that practical. What if client logs in to WordPress dashboard and does a few changes, creates new posts, uploads some media. That adds even more work. Now I need to export / import database.

Then I discovered some neat tools like forwardhq and localtunnel. But they have a limit in bandwidth or number of websites I can share. So, I decided to dig dipper. It turns out MAMP PRO has DYNDNS service built-in. I already have dyndns pro subscription which is ridiculously cheap (around $20 a year).

What is needed to set this up:

Set up MAMP PRO, add your dyndns username and password

mamppro-add-dns

Then set up virtual host (directory with WP or any other site) and add alias, URL that you chose in dyndns

mamppro-alias

After you’ve done this, make sure you start web server and all three services are running (apache, mysql and dyndns), and you can access you local virtual host (test.dev in my case). If everything is ok, it’s time to configure the router and open port 80 for external access. Make your computer IP address static, so it stays the same all the time. Log in to your router (usually it’s 192.168.1.1 or something like that) and navigatie to port forwarding section. Enter start port 80, end port 80 for your static IP address. Now you should be able to access you localhost outside the local network using dyndns URL.
netgear-port-configs

Now if you are running WordPress website – login to the dashboard and install either of these 2 plugins WordPress Multiple URL support plugin or Relative URL plugin, activate and it’s all set.

virtual_host

9 thoughts on “How to develop WordPress locally with mamp pro and dyndns

  1. Thanks Alex,
    Exactly what I was looking for – a much better option (for me) than forwardhq etc – considering I already own MAMP Pro.
    Just signed up for a dyn.com account & will be putting all this to good use on a client dev site in the morning.
    Thanks again,
    Jas

  2. Thanks for the tips! I’m building a wordpress website for a friend and would like her to be able to login remotely to see the progress. Using MAMP Pro & Dyndns seemed like a great idea but I am so confused about setting it up. This tutorial is exactly what I need.

    When you talk about setting up the virtual host and adding URL & alias, can you explain what you mean by that?

    Thanks again for the help!

    • If you have MAMP pro you can set up as many virtual hosts as you want and don’t have to use ‘localhost’ so you local site can be http://mysite.dev.

      When you set up virtual host there is option to alias and it. I added screenshot to the bottom of the post. Hope it helps.

  3. Hi Alex,
    This post has really helped me setting up this kind of environment, but I’ve hit a wall..
    The WordPress Multiple URL support plugin or Relative URL plugin seem to work in general but not for images saved in the options like the log image for skeletonwp for instance… would you know what to do about it?

    The whole system won’t work unless every url is relative :(

    Thanks a lot

    • Yes, that could be the issue. I’m sure it’s not hard to solve if you look into multiple URL support plugin. Although you have to know pho really well. Unfortunately I don’t work with WordPress as much these days, will look into that when I have some time.

    • Luca,

      I’m about to test out this setup with the Genesis Framework, if I run into what you are describing with Genesis, I’ll post back to my solution.

      Cheers/Seth

  4. Does anyone have any idea how to achieve the same for WordPress Multisite. I can only seem to access single WordPress sites

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>