Dan Birlew

Las Vegas Web Developer, Designer, Programmer, and Author

Mobilize Your WordPress Blog

Posted March 17th, 2011 at 8:00am by Dan Birlew in Tech. Comments Off on Mobilize Your WordPress Blog

Upgrading to an iPhone was a revelation about this site: while the theme I use is nicely organized and functional, it is absolute hell to browse on a mobile phone. And slow. At first I figured nothing could be done about it. But then I remembered that posts here are automatically tweeted to my stream, @dudieboy, along with a link back. So someone who follows the link through their mobile phone and arrives at this site probably closes the window out of frustrated disgust, rather than read my post.

I tried reassuring myself that I was overreacting (as usual). Probably a rare occurrence at best, I figured. Yet just to be safe I accessed my site’s statistic logs and… a rising percentage of my incoming visits are from none other than mobile platforms. My number of mobile visitors are going up every month now… for the past year. I would guess that roughly 25% or more of my visitors are now browsing through the mobile web. That’s quite a slice of the pie.

Suddenly I felt quite foolish for not paying better attention to this.

So I looked for a way to accommodate mobile visitors without losing all the pizazz of browsing the standard theme. Luckily I didn’t have to look far. I queried WordPress’s built in plugin search for “mobile,” which immediately returned the WordPress Mobile Edition plugin. This add-on changes the theme of the entire site when accessed by specific phones. If you’re running a standard WordPress install this will suffice. However, I run a network of blogs here. So on further investigation I determined that this plugin wouldn’t handle the job. Luckily a little further down the search results I found the multi-site version, WordPress Multi Site Mobile Edition, a conversion of the same plugin for users in network mode.

Install a WordPress Mobile Plugin and Appropriate Theme

The regular edition of WPME comes packed with Carrington-Mobile, the multi-site edition does not. Therefore the best way to install the regular version is not through the plugin menu. Download the zip file to your desktop, cut the theme file out of the archive and paste it elsewhere. Zip the Carrington-Mobile theme into a new archive, and upload it through your Themes > Add New page. Then upload the plugin zip through the upload function on your Plugin > Add New page. Activate the plugin and… that’s it. After a quick check of the WPME settings page you’re good to go.

WP Multi Site Mobile Edition needs to be uploaded through the Network Admin > Plugins > Add New page, and then Network Activated. Carrington-Mobile must be downloaded separately and uploaded through Network Admin > Themes > Add New.

Once the plugin is activated, your site and all other sites in your network are enhanced for mobile browsing. Check out DanBirlew.com or Filmmaker Jim Yost’s blog or Footnotes by Jayne on your mobile phone browser. The navigation menu is simplified, with recent posts easily touchable and static pages further down. Text is displayed nice and big and sized to a mobile browser window.

This plugin is one option, and it’s the fastest and easiest way to get your blog mobile ready. There are other plugins like WPtouch, which makes my friend John Hawkins’ site look very nice on mobile. It comes packaged with its own themes, so there’s no second upload beyond the plugin. And if you want to get really slick about it, check out Obox Mobile Framework over at Themeforest which features great mobile presentation, a touch operated feature post slider, and more configurable options.

Tweaking Carrington-Mobile

I have to admit that I wasn’t wholly satisfied with Carrington-Mobile at first, because 1) I’m snobby, and 2) picky, and 3) I go above and beyond, most of the time. Though simple and fast, it has some problems as a theme, for instance not resizing images and video embeds. Well, it took some time, but I finally figured out some basic edits for the Carrington-Theme files that fixed these problems and made me happy with it again.

First, for auto-resizing images you need to go to the style.css of Carrington-Mobile (using the “Select theme to edit” dropdown selector in the upper right corner of the Admin page, since the theme’s not active). Near the bottom of the page look for the line “.wp-caption {” At the bottom of this style, insert the line “max-width: 99%;”, so that you end up with the following:

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin-top: 10px;
	margin-bottom: 10px;
	/* optional rounded corners for browsers that support it */
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	max-width: 99%;
}

(To copy any of these codes, click on “view source” within, and highlight/copy from the window that opens.)

Just below that is “.wp-caption img {” which styles the image inside the caption box. At the bottom of this style add “max-width: 95%;” and “height: auto;” so that it looks like so:

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
	max-width: 95%;
	height: auto;
}

Save style.css and your images with captions should now resize automatically to fit in the browser window, as shown in the capture below:

If you use images without captions, then cover your bases by inserting the following below there:

img {
	max-width: 99%;
	height: auto;
}

Video embeds are a little more difficult to resize, and doing so perfectly may require JavaScript. However, since most mobile browsers open flash videos in a player utility rather than the page itself, what’s the point? So at the bottom of Carrington-Mobile’s style.css add the following style to auto-resize video embeds that use object codes:

object {
	max-width: 99%;
	height: auto;
}

One other thing you may notice about my blog on Carrington-Mobile is that I’ve added the Featured Image of the post back into the post display. To succeed in this you’ll need to make the Featured Image resizable by modifying your style.css as I’ve shown in the steps above. Then navigate to the Theme Functions script (functions.php) and scroll to the bottom. Before the end of the script at “?>” press enter and insert the following function:

if ( function_exists( 'add_theme_support' ) ) { 
  add_theme_support( 'post-thumbnails' ); 
}

Save the file. Then navigate to the Single Post script (single.php) in the Carrington-Mobile theme. Right above the line “if (have_posts()) {” insert the following:

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail();
} 

Save the file and then check your site on your mobile browser again. You should have added Featured Images (or Post Thumbnails, whatever you call ’em) back into the post display, and the images should resize correctly regardless of orientation.

The Mobile Bottom Line

If installing a new plugin and theme just to be mobile friendly seems too daunting a task, then consider the following facts from this source:

  • 93% of U.S. adults own a cell phone.
  • 1/5 of Americans access the mobile web each day. (Sounds right, based on my stats earlier.)
  • Mobile web will overtake the desktop within 5 years. (Debatable, but possible.)
  • Users average 13 hours online per week, up from 7 hours in 2002.
  • 5% of the top 500 online retailers have a mobile website/iPhone app.
  • Purchases made from mobile devices were $1.6 billion in 2009.
  • Mobile advertising spending will surpass $6.5 billion in 2012.

So if you’re online and mobile-compatible, you’re ready to be part of the next phase of the Internet. I don’t even run a store at this site (and I’m an idiot for not doing so) and I’m already mobile-compatible. Think of what it says about your blog or your business if people have a harder time viewing it on the ever-spreading mobile platforms.

Tags: , , , ,

Comments are closed.