wptouch logo

WPtouch Pro

Mobile Suite for WordPress

September 30, 2013 — By WPTouch Admin

Optimizing the Nginx cache for WPtouch Pro 3

Update (April 24, 2015:

Ian Spare has written a great piece improving on this cache configuration. If you’re running WPtouch Pro 3 on an Nginx server, be sure to read this post, then head over to Ian’s for the improved .conf rules!

 

Over the weekend I migrated my personal site to use Nginx instead of Apache – partly as a test of my limited server administration skills.

Nginx’s popular advantage is its ability to very efficiently serve static content (plain HTML, images, etc.) in situations where Apache would get bogged down. With my images, stylesheets, and JavaScript sped up, all that was left was getting my content out of WordPress faster. To avoid handing off requests to PHP, I’m caching the HTML generated in Nginx’s fastcgi_cache.

If you’re using WPtouch Pro, though, there is a problem with the standard configuration for the Nginx cache: because we’re not sending the request to WordPress, the plugin doesn’t get a chance to  switch between themes when someone visits your site. Depending on whether  a page on your site is loaded by a WPtouch Pro compatible device or another browser, the page could get ‘stuck’ in one of the two modes.

The trick to solving this is to have Nginx manage two sets of cached data and switch between them depending on whether the visitor is on a mobile device or using a desktop browser. It’s dead easy to do using a single variable and two conditionals!

Find your fastcgi_cache_key configuration (mine is in nginx.conf), and append $mobile_request to it. For example, mine now reads like this:

fastcgi_cache_key "$scheme$request_method$host$request_uri$mobile_request";

Next, switch to your site configuration (I’ve kept it in default.conf for now). Within your server definition, add:

set $mobile_request 0;

if ($http_user_agent ~* "(2\.0 MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine\/3\.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA\/WX310K|LG\/U990|MIDP-2\.|MMEF20|MOT-V|NetFront|Newt|Nintendo Wii|Nitro|Nokia|Opera Mini|Palm|PlayStation Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian OS|SymbianOS|TS21i-10|UP\.Browser|UP\.Link|webOS|Windows CE|WinWAP|YahooSeeker\/M1A1-R2D2|NF-Browser|iPhone|iPad|iPod|Android|BlackBerry9530|G-TU915 Obigo|LGE VX|webOS|Nokia5800)" ) {

	set $mobile_request 1;

}

if ($http_cookie ~ 'wptouch-pro-view=desktop') {
	set $mobile_request 0;
}

To allow users to use the mobile switch as expected, we need to take advantage of a feature just added to WPtouch Pro 3. On the Core Settings screen, switch Admin Mode to Advanced and save. Now scroll to the Desktop / Mobile Switching section and change the Desktop theme switch buttons setting to Automatically inserted with AJAX (better for caching). This will ensure the switch is inserted into your cached desktop view whenever a mobile visitor accesses the site.

Now restart nginx with nginx -t && service nginx reload. Your site should now be fully cached and elegantly switch between desktop and mobile views!

September 24, 2013 — By WPTouch Admin

WPtouch Mobile WordPress Themes In The Wild

We often get asked to see examples of what a mobile WordPress website looks like using one of the included mobile WordPress themes in WPtouch Pro. We wanted to share with you a few different sites that appear to be using WPtouch Pro and one of the included mobile themes. A few of these sites have customized it slightly, and we wanted to point out what they have done differently.

Mobile Sites using WPtouch Pro for WordPress

Mobile Sites using WPtouch Pro

Classic Redux Mobile Theme

Gizmodo's Classic Redux Based Theme

The mobile website for Gizmodo.com.

The french version of Gizmodo appears to be utilizing the ‘Classic Redux’ mobile WordPress theme included in WPtouch Pro.

Your can clearly see the included Featured Content Slider on the front page which helps showcase various articles on the site. It can be configured to show a series of specific posts, the most recently written posts, or even the latest content from a specific WordPress category or tag.

Since the content on the Gizmodo.fr website is all in french, WPtouch Pro is utilizing the included french language translations for the included theme. Currently WPtouch Pro is available in 21 different languages, but it will support 23 languages soon.

There is an advertising unit shown right under the header of their website – the type of advertisement that is displayed there can easily be configured from within the WPtouch Pro administration panel. And while most customers use Google adense, you can drop in whatever custom output you want in this area depending on what advertising service you want to use.

Outside of that most of the branding colours and fonts are the defaults included within the Classic Redux mobile theme for WordPress, and it looks great.

Simple Mobile Theme

WPtouch 'Simple' Mobile WordPress Theme

The mobile website for BraveNewCode.com:

Our own site here at BraveNewCode is based on the Simple Mobile WordPress theme that’s included in WPtouch. For us it was important to highlight WPtouch Pro on the front page as well prominently display the navigation links for the user. The WPtouch Pro Simple mobile WordPress theme accomplishes that nicely in its default configuration. We made a few small customizations related to our Support Centre and the product page, but other than that it’s mostly the default Simple theme that’s included in WPtouch Pro.

Our website also makes use of the featured content slider, but in our case we’ve preconfigured it to only show content from two specific WordPress pages. Combined with the featured images on those pages, WPtouch Pro will showcase only the content we think is the most important for our users. In our case that content pertains to our flagship mobile plugin for WordPress, WPtouch Pro.

We’ve also made use of the ability to upload a custom logo image via the WPtouch admin panel. In this way it’s easy to have your desktop website branding flow through to your mobile site for a more seamless browsing experience.

CMS Mobile Theme

CMS Mobile WordPress Theme for WPtouch

The mobile website for Scientias.nl:

The CMS Mobile Theme for WPtouch lives up to its name – it’s really meant for large sites with varied content and often a large taxonomy. As a result it has the ability to display two separate menus to assist with navigation around the site. If you couple that with the built-in ability of WPtouch Pro to show custom post types, the CMS theme is well suited for news or large content sites.

The example website shown here is using the CMS Mobile WordPress theme in mostly a default configuration. They have adjusted the colours slightly and uploaded a custom logo image to maintain their branding. The featured content slider is also showing the latest posts on the website, which in their case are cool scientific articles regarding the moon and outer space.

One other feature of the CMS mobile theme that is shown here is the prominent position of the search button. Since most CMS websites have a great deal of content, the search button is dominant to assist end-users with locating the content on your website.

This website is also a non-english version of WPtouch Pro; in this case they are using the included Dutch translation for their website, as it’s targeted for people of the Netherlands.

Custom CMS Mobile Theme Example

Custom CMS Mobile WordPress Theme

The mobile website for Technabob.com:

While you don’t have to be a mobile WordPress website developer to use WPtouch Pro, our mobile theme framework makes mobile site development extremely simple.

Technabob’s website is a good example of that, as it appears to be rockin’ a customized version of the CMS mobile theme.

There’s not only a Google advertising unit at the top, but also a large square format one at the bottom which undoubtedly increases advertising revenue.

He’s also chosen to use custom Google webfonts, which is a featured included in most WPtouch Pro themes. In this case he’s chosen to use the font Monda for the header menus, which helps his site stand out for other mobile websites that just use the generic browser fonts.

Another feature of the CMS mobile WordPress theme for WPtouch Pro that he is using is the category slider shown near the top. With this feature users can easily swipe left and right on their mobile devices to browse your website by categories, a great addition to WordPress websites with large taxonomies.

Another example of the CMS theme is shown in the top image of this post – it’s the website for citypress.co.za, a South African website that appears to be using WPtouch Pro. It’s also another great example of a stylized version of the CMS mobile theme included in WPtouch Pro.

A Theme For All Seasons

As you can see, it’s extremely easy to customize the look and feel of your mobile WordPress website using WPtouch Pro thanks to the three included mobile WordPress themes: Simple, CMS, and Classic Redux.

While you don’t need development chops to use the plugin, if you know a little PHP or CSS you can quickly customize your mobile website a bit further as some of the owners of the websites above have done. But don’t let that deter you – WPtouch Pro is the perfect mobile solution for WordPress that caters to coders and non-coders alike, and in most cases you can simply install the plugin and activate it with a single click to have a complete mobile WordPress website.

September 19, 2013 — By WPTouch Admin

Developing A Mobile WordPress Website With WPtouch Pro

When we first set out to build the professional version of WPtouch, we decided at the very beginning that it really needed to be a development framework instead of just a simple mobile theme. With that mindset in place, we built WPtouch Pro from the ground up and then used the development framework to construct the included set of mobile WordPress themes: Simple, CMS and Classic Redux. While these themes use many WordPress template tags, they mostly leverage the built in framework features and modules within the WPtouch Pro mobile plugin.

If you’re looking to start developing a mobile WordPress website, using WPtouch Pro will save you time, effort and money by allowing you to leverage many of the complex features included in the WPtouch Pro framework.

One Parent Theme To Rule Them All

At the heart of the WPtouch Pro mobile development framework is Foundation, the parent theme for Simple, CMS and Classic Redux. While it is entirely possible to build a mobile theme using WPtouch Pro without leveraging Foundation, basing a mobile website theme off of Foundation has many distinct advantages that greatly simplifies the development of a WPtouch Pro theme.

Included in the Foundation theme are a series of pluggable modules that child themes can leverage. These modules control the look and usability of whatever menus your theme needs (you can define more than one), sharing icons for popular social networks, advertising options for a theme, mobile-optimized featured content sliders, infinite scrolling, and even web-fonts to set your website apart from the others. Including any of these features involves the addition of a single line of code to your theme. When using Foundation developers can add complex functionality to their mobile WordPress websites in just a few minutes.

Developer Documentation

All WPtouch Pro Developer/Agency and WPtouch Pro Enterprise licenses come with development support via our Support Centre, included priority support tickets, and access to the WPtouch Pro developer documentation. The development documentation details the architecture of WPtouch Pro, the process involved with building a mobile WordPress theme, and how to utilize all the modules contained within Foundation.

For those interested in learning more about the content of the Developer Guide, you can download a preview of the WPtouch Pro developer guide.

Professional Support

Our support team has been assisting WPtouch Pro users and developers for over three years now, and we consistently receive accolades via Twitter and E-Mail regarding the level of support they provide. Emilio and Diane work tirelessly to ensure that any and all issues our customers have are solved in a minimal amount of time and frustration via our private one-on-one ticket-based support system.

Our Developer/Agency and Enterprise customers can receive development support while customizing an existing theme or even building one from scratch using the WPtouch Pro framework. So whenever you hit a roadblock, we’ll be there to help get you going again.

Pricing

WPtouch Pro Developer/Agency licenses are available now for $249 a year. For that low price you can receive support and automatic upgrades on up to 25 different WordPress websites during the year. You’ll also receive three lovingly crafted themes, each easily brand-able and catered to different classes of websites.

Here’s a recent e-mail we received from Adam who used WPtouch Pro to develop a mobile WordPress website.

Quick update. I wanted to let you know that my mobile site is almost ready and it wouldn’t have been possible without your team’s expertise. Emilio has been nothing short of amazing to work with. It has hands down been the best experience I have ever had when working on any type of website development…period.

I just told Emilio that I will be letter every website owner we know that they should be working with you guys when we go to conferences.

Very Best,
Adam

WPtouch Pro has over four years of theme and code refinements in it, as well as thousands of hours of development representing the state of the art for mobile WordPress websites. You’ll not only receive all the benefits of the WPtouch Pro mobile development framework with your license, but also access to our comprehensive developer documentation and top-notch support from Emilio and Diane.

So save yourself some time, aggravation and frustration by leveraging WPtouch Pro when you start your next mobile WordPress website development – you’ll be happy you did.

September 19, 2013 — By WPTouch Admin

23 Ways To Say ‘I Love Mobile’: WPtouch Pro Supported Languages

With the upcoming release of WPtouch Pro 3.1, we’re proud to announce that our WPtouch Pro mobile plugin for WordPress will soon be available in 23 different languages – that’s a lot of different ways to say “I Love Mobile”.

We’re in the process of finishing off a few of the newer ones, such as Swedish. When all the translations are completed, WPtouch Pro will be available in the following languages: English, French, Italian, Spanish, Swedish, German, Greek, Thai, Danish, Portuguese, Dutch, Hungarian, Indonesian, Hebrew, Vietnamese, Turkish, Russian, Japanese, Chinese (Traditional and Simplified), Korean, Hindi, and Arabic.

WPtouch Pro Lanauages

We’ve received a few requests recently for a feature that would allow the administration panel for WPtouch Pro to stay in English but have the user-facing content still be translated into another language. This feature benefits website administrators who have a good grasp of English but still need their content translated for their readership. You asked and we listened: you can now leave the administration panel in English and still have your user-facing content remain translated.

With customers all over the world, we take great pride in continually increasing the number of WPtouch Pro supported languages with each few releases. We’ve taken care of most of the more popular languages, and will slowly build out some of the smaller ones as well. So stay tuned for ever more WPtouch Pro language translations in the future.

Previous Blog Entries

Added To Cart

Item added to cart successfully. You can either continue browsing and add more themes or extensions, or checkout now.

View Cart Checkout