WordPress Wednesdays: Custom Queries for Mobile Devices

Geek Factor: 4

In this week’s WordPress Wednesday, we’ll be discussing how to alter your WordPress queries when someone visits your site using a mobile device. This enables you to limit the number of WordPress posts loaded, and opt out of loading other template elements. As with other WordPress Wednesdays posts, make sure to back up your templates before making any edits.


You may have noticed that Stem Legal and the Law Firm Strategy Blog both got a mini-facelift this past week. Here at Stem we’re in the midst of a larger website overhaul, but the current mini-redesign was an opportunity to make some minor updates to the site, as well as employ some new tricks and technologies that we’ve been using on our client projects.

One change was adding different styles for the mobile version of each site. Both use CSS3 media queries – the screensize of the device loading the website is checked by the stylesheet, and, depending on its size, slightly different styles are loaded. This is a great way to make some basic changes to your site’s design to make it more usable on a mobile device, but there are shortcomings. For example, you can hide elements using CSS, but they are still loaded by the device, which can slow things down. This isn’t just images, either — in the case of the Strategy Blog, attempting to load the standard 15 posts on the blog’s homepage crashed mobile browsers because it was just too much content.

Enter a snazzy bit of code by Dave Cole¬†that makes it possible to use PHP to check the user’s device, and alter the WordPress query being used.

In the example given on the site, the query is completely overwritten; I decided to append the shorter query to the existing WordPress query rather than overwrite it, like in the previous WordPress Wednesday’s post about custom queries. This way, it’s possible to lower the number of posts being queried, but still maintain other default settings, like pagination, that may still be useful.

The following code is placed before the WordPress query in the theme:
[php]query, array( ‘posts_per_page’ => 3 ) );
query_posts( $args );
} ?>[/php]

This code makes the Strategy Blog and Stem News pages only load three posts per page on mobile devices, and the standard 15 items per pages on laptops and computers. This can be changed by changing the line near the end that reads 'posts_per_page' => 3 to end in whatever number you like.

Unlike the original example, I also opted to make the $IsMobile variable a global variable; this way it could be used throughout template, rather than just altering the default query.

For example, a few items in the sidebar are hidden in the mobile version of the site by wrapping them in the following if statement:
[php]

<-- insert content that should not load on mobile site -->

[/php]

Another way this was used was to load the_excerpt() rather than the_content() on the landing page of the mobile site, and only load the full content when the user follows the link to the post page:
[php][/php]

What are you interested in when viewing blogs and websites from a mobile device? Share your thoughts in the comments below!

  1. Dave Cole said:

    Hi Laurel,

    Thanks for sharing your updates to this code! I definitely like that you’ve improved the handling of the query to add it to the existing one rather than nuking it like I had.

    You came to the same conclusion that I had… I load 10 posts on my homepage to my desktop visitors, but on mobile devices (especially on 3G) every second counts. Dropping down to 3 saves about 40% from the load time – going from ~100k download to about ~60k download.

    Thanks for sharing!

    @ 6:59 pm

Leave a Comment

Note: Fields marked with a * are required; email addresses are not published.

Legal FAQ Collections