SEARCH

How-To Geek

How to Create a Mobile Version Of Your WordPress Blog

Would you like to make your blog look great on all devices, not just computers?  Smartphones and other mobile devices are increasing in popularity, so here’s how you can make sure your blog looks great no matter what people are reading it on.

WordPress is a great tool for creating a blog or traditional website for your business, organization, or simply to share pictures with family and friends.  You can make a free blog on WordPress.com, and if so, your blog will already be ready for most modern mobile device browsers.  Here’s our test WordPress.com site in Mobile Safari; WordPress.com automatically gave it an iOS style theme that’s easy to use on mobile devices.

image

However, if you want to tweak WordPress and make your site just like you want, you’ll need to use the Self-hosted WordPress.org.  If you’ve created a new WordPress site on your own server or hosting service manually or using an auto-installer such as Softaculous, you may be disappointed that your site looks the same on mobile browsers as it does on your computer.  This makes it difficult to use on small screens.

image

Thankfully, you can easily get the same iOS style theme on your blog for free with the WPtouch plugin.  Login to your WordPress Dashboard, and select Add New under Plugins on the left side menu.

image

On this page, enter WPtouch in the search box.

image

Now install and activate the plugin as normal.

image

Your site will now have a nice theme that works great on modern smartphones and other mobile devices, but will still show your own normal theme to visitors using computers.  If you’d like to preview how your new mobile theme looks on an iPhone, check out our article on Testing Mobile Websites in Safari for Windows.

image

Tweak WPtouch Settings

WPtouch works fine without any tweaking on most sites, but if you’d like, you can customize your mobile site and tweak WPtouch’s settings to get it working just like you want.  To do this, click WPtouch under Settings on the left menu.

image

Here you can tweak many settings, including the mobile theme’s background, fonts, icon, and more.

image

You can also add Google Analytics and Adsense to your mobile site, so you can monetize your traffic and know how many visitors you’re getting.  If you need to find you Google Analytics code, here’s how you can quickly find it.

image

You may need to tweak settings in other WordPress plugins, including WP Cache and W3 Cache, to make them work with WPtouch, so be sure to check the list at the bottom of the settings page.

image

Here’s Techinch.com with a customized logo, menu, and background using WPtouch.  Now your site looks just like you want, on PCs and mobile devices.

image

Matthew digs up tasty bytes about Windows, Virtualization, and the cloud, and serves them up for all to enjoy!

  • Published 09/2/10

Comments (11)

  1. Dinesh

    Hi, I dont see a PLUGIN option in my wordpress Dashboard. What’s wrong? I m using the default wordpress theme. Please suggest.

    Dinesh.

  2. Xeon927

    @DINESH: If you are using the self-hosted wordpress.com blog, you can’t add plugins. I ran into this a little while ago on my blog. To add plugins, and do other tweaks with your blog, you must host it yourself with the wordpress.org software.

  3. Matthew Guay

    @Dinesh – If you don’t see the Plugin option in the Dashboard, you’re likely using WordPress.com. If so, your blog is already ready to work with mobile devices, so you don’t need to change anything. What’s your blog address?

  4. Martin

    Great article. You should write more about this topic because most of us are interested in the subject.

  5. Dallas

    Does Blogger have something like this???

  6. Lucky Man

    Is it possible to have “m.mydomain.com” with wordpress when creating mobile version if not then can you make tutorial how to make your own m.mydomain for mobile version with wordpress?

    like m.facebook.com, m.myspace.com, m.twitter.com, etc…

  7. Matthew Guay

    @Lucky Man – There are some ways, but none I know of using WPtouch. WPtouch just detects when a mobile device visits your site, and automatically gives it the mobile theme. I’m checking into it, but not sure if I’ll find anything using WPtouch.

    One thing you could do … if you’re concerned people will try to visit m.yourdomain.com and not actually see your site, you could setup that subdomain on your domain registrar and have it redirect to your main domain. Then, if you have WPtouch installed, it will work the same :) A little workaround, but it just might work for your needs.

  8. Matthew Guay

    @Dallas – No, unfortunately I don’t believe Blogger has a mobile version for smartphone browsers. I just tested a Blogger blog, and it came up the same as it did in a normal browser.

  9. Lucky Man

    Alright, Matthew. Good jobs at your tutorials. I visit this site daily at different times. :)

  10. saju

    Hello i have installed the plugin and activated , but no difference between earlier view and current view and it shows my current theme? what is wrong?

  11. Dinos

    Thanks for the nice tutorial.
    By the way Blogger does have a mobile version. I’m using it in worldweirdweb.co.uk.

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!