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 );
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:
<-- insert content that should not load on mobile site -->
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:
What are you interested in when viewing blogs and websites from a mobile device? Share your thoughts in the comments below!