I develop my web applications on a local server environment using MAMP Pro (MAC) and XAMPP (PC). There are hundreds of reason for developing locally with a PHP/MySQL/Apache environment before jumping onto your live server (speed and security being the big ones). But what if you need to test your applications not only on your desktop browsers but also on your smart phone/iPhone or tablet/iPad? * It’s a bit more complicated then just working online, you need to find a way for your devices to access your local working environment.
Lucky it’s easier then you might think.
*Everything I explain will work for most website installations (not just for WordPress installs, but there’s extra instructions at the end to help smooth out a few things that might frustrate you if you’re using WordPress).
- First make sure you have MAMP installed on your machine.
- Next step is to get your IP address on your MAC > System Preferences > Network > AirPort.
- Now you’ll need the Apache Port from MAMP. (default is 8888).
- Put these two piece of information together to make up the URL for your iPad/iPhone: 192.168.100.170:8888. (This will be your local root directory.) That’s it! If your using WordPress keep reading…
WORDPRESS (If you’ve installed WordPress then you’ll have to do a couple more things):
- First (and always) backup your database before making any major changes to your site.
- Log into your wp-admin go to > Settings > General. You need to change both the > WordPress Address (URL) and the > Site Address (URL) to match the new IP address. So in this example below you can see that I was working in a localhost and now I’m am changing them both. So From http://localhost/example-site to http://192.168.1.29:8888/example-site.
- That should do it! If you have any problems leave me a comment and I’ll see if I can help!
Topher
Chris has a real passion for design and loves to share inspiration and tutorials with the design community. He's the curator here at designshifts.com, a freelance web consultant and developer and has a passion for the great outdoors.
Follow Me:
24 Comments
Great article. I wanted to add a couple of other tools to the mix as well that I like using for developing locally:
Gas Mask (for easily changing you hosts file so you can use any domain instead of /localhost/
And iOS Simulator for Mac using Xcode. You gotta dig for the dang thing though
Hope this helps somebodies!
Thanks Brian,
I’m definitely going to check out Gas Mask!
Cheers.
Gas Mask is cool, been using it for ages… although moving away from it now. Not sure if you knew but you can use:
define(‘WP_HOME’,’http://local.DOMAIN.ca‘);
define(‘WP_SITEURL’,’http://local.DOMAIN.ca‘);
in your wp-config file which will overwrite the domain everywhere… including the DB and all the permalinks… this makes it very easy to work with a local. domain and you can easily goto www. for the live version…
A friend of mine setup a nice environment as well where the wp-config information is stored in a separate file which does a switch statement based on an Apache variable which you can sent in Mamp pro… so the site knows automatically if it’s being run on a local box, a staging box, or live… no more wp-config changes
Maybe I’ll post this at my own blog soon.
I would just recommend using an iOS simulator although I did think this was cool for testing on a device in the office when sitting down with a client. Nice work.
Awesome tip, it worked for me, thanks a lot!!
Hello,
Thanks for the tutorial. Works great for a single WordPress install, but do you know how you can do the same with a WordPress multisite install? Been trying to do that for ages.
Thanks Joke,
I haven’t tried it with a multisite install…if I do end up playing with this I will let you know what I come up with, and if you happen to figure it out feel free to share!
Cheers.
Did you manage to use it with a multi site???
I’ve changed the IP address and the WP address and now I can’t get back in???!
Is that because i’ve got a number of sites running from one machine? please help
I don’t think the multi site would effect this process? Just replace the database w/ the backed up copy and try it again. Maybe you made a small typo in the IP address.
When I do this, I can’t see any of the images on the iPad? Any help much appreciated. I’m very amateur!
I think I might need a bit more info? So you can see you site on your localhost via your ipad/iphone right? Is it your stylesheet that’s not making the connection? Do you have to update your website links?
Can you see anything?
Hello,
I have a weird issue when trying to view my local wordpress site (which is hosted on my mac with mamp), on my PC.
Everything is working perfectly but one thing. My website contains 4 tabs. When clicking on a tab, it’s loading dynamically the content of the page (javascript). When clicking on the 3 first tabs, the content is well displaying (CSS and images are ok), but when cliking on the fourth one, all the images wont show.
The weird thing is that all the links are ok, AS on the other pages. When I try to show independently an image that wont show in a new tab, it still doesn’t work.
Do you have any idea of where it can come from ?
Pauline.
This could be a number of issues? I think I would have to see the problem? Can you send me a link to the problem site, or are you just working locally? What theme are you using?
Awesome trick! works prefectly. Thanks.
whoop! thank you
Great job !! keep it up and achive your goal
So helpful thanks a lot! Now I can test my responsive websites
Super easy, works perfectly. Thanks!!
Works an absolute treat! Thanks so much
Thanks for this, although I am using DYNDNS, which allows a free domain eg blurb-blurbedy. dyndns .info/ to point to the MAMP HTDocs directory, then just finish with the name of the site/directory within where your files (site) are/is.
What I would like to be able to do is to connect the iPad & iPhone for testing (and more importantly showing/previewing to client) a MAMP site locally on the laptop, and also to be able to show on a tethered iPad/Phone using just the usb cable when wifi is not available.
Perhaps someone know’s an app?
I guess it depends on how many people you want to be able to see it before you add it to the app store. If it’s less than 100, you can use ad hoc distribution. For that, you don’t use the app store, you can just send the app to people by email or put it online. (You’ll need the device IDs of anyone you want to be able to use it). Does that help?
Cheers.
Very well written – the best of 4 other similar posts I’ve read.
This works for me, but the style info doesn’t seem to be accessible on my other local devices:
- using the Responsive WP theme; works fine on localhost Mac
- however on other local devices (iPad, PC), all fonts are Times Roman, no images load, and there’s no ‘style’; all links work fine;
Are there some permissions I need to check? I’m new to WP and just installed it (3.5.1) and loaded the Responsive theme. No changes, just trying the vanilla version.
Thanks for any suggestions….
OK, problem solved: I had to also enter the IP into the WP address box (in addition to just in the Site Address box)…see your WP Step 3 instructions above.
Thanks Randy,
Glad it worked itself out!
One Trackback
[...] http://www.designshifts.com/view-local-wordpress-website-on-your-iphone-or-ipad-with-mamp/ [...]