How To Make Content Adapt To A Responsive WordPress Theme

In the rush to implement a responsive design, it’s all too easy to forget that your content must also adapt to the device to complete that compelling user experience.

All too often, content is designed for big screens. Big images, long titles and extensive excerpts can all impact adversely on mobile users. Whilst there’s plenty of solutions for adaptive images, there’s precious little about the content itself.

In this tutorial we’ll take a look at how you can make your content adaptive in just three simple steps.

What is adaptive content?

A photo of a chameleon
Make your content adapt to its environment

Adaptive content is content that can be manipulated by WordPress based on the device making the request.

That doesn’t mean providing a cut-down version to mobile devices.

Photo of publication in various formats
Getting content onto mobile devices

In her excellent book, Mobile Content Strategy, Karen McGrane argues convincingly that mobile users should get the full version of the site but packaged up appropriately for their device.

She certainly gives short shrift to the idea of a mobile-specific site.

Care still needs to be taken with the content, some images such as infographics, for example, just won’t work no matter how well they are optimised but generally text will scale to a smaller screen size without too much difficulty.

Most of the focus, however, is on the navigation (we recently covered adding mobile navigation to responsive themes) and the aggregating pages (home page, archives).

Labels, titles and excerpts are a particular problem.

Only 1 title immediately visible
Only 1 title immediately visible

Look at WPMU home page on an iPhone. All we can see is one title. Scroll past that and there’s a another entire screen filled with just the excerpt.

The result is plenty of scrolling just to browse through the list of recent articles.

Adaptive content seeks to solve this problem by providing alternative titles and excerpts that can be dynamically presented according to the browsing device.

In this case, that means providing a shorter title and much shorter excerpt to allow phone users to scan the list of articles far more quickly and easily.

Whilst there’s plenty of plugins addressing responsive images, when it comes to the actual content – the title, the body, the excerpt – you need to roll up your sleeves and do it yourself with a simple three step process.

Step 1 – Detecting devices with WP Mobile Detect

The key to adaptive content is knowing the type or category of device that is making the request. In this tutorial, we’ll be using Jesse Friedman’s WP Mobile Detect plugin to give us that capability.

In fact, WP Mobile Detect not only provides a wide range of PHP functions for detecting both the device and the operating system but it also adds a large number of useful shortcodes for manipulating the post body.

  • [phone]Put content here that you only want displayed on Phones NOT Tablets or Desktops[/phone]
  • [tablet]Put content here that you only want displayed on Tablets NOT Phones or Desktops[/tablet]
  • [device]Put content here that you only want displayed on Phones OR Tablets NOT Desktops[/device]
  • [notphone]Put content here that you only want displayed on Tablets OR Desktops NOT Phones[/notphone]
  • [nottab]Put content here that you only want displayed on Phones OR Desktops NOT Tablets[/nottab]
  • [notdevice]Put content here that you only want displayed on Desktops NOT Phones OR Tablets[/notdevice]
  • [ios]Put content here that you only want displayed on iOS devices[/ios]
  • [iPhone]Put content here, that you only want displayed on iPhones[/iPhone]
  • [iPad]Put content here, that you only want displayed on iPads[/iPad]
  • [android]Put content here, that you only want displayed on Android devices[/android]
  • [windowsmobile]Put content here, that you only want displayed on Windows Mobile devices[/windowsmobile]

This actually gives considerable flexibility to tailoring the body content to a device or platform.

Step 2 – Adding the custom fields

Screengrab showing the adding of the two new custom fields via the Advanced Custom Fields interface
Adding the new fields via the ACF interface

For this example, we want to add a Short Title and a Short Excerpt to the post edit screen. We won’t use a custom field for the body as we want to deliver the same content where possible and we can and will make use of the WP-Mobile Detect shortcodes to tailor that content.

We could just add the new fields via WordPress’ built-in custom fields metabox but using a specific metabox will make the process cleaner and more manageable.

The easiest way to do this is with a custom fields plugin. Most WordPress users will have their favourite but I like Advanced Custom Fields with it’s intuitive interface and useful functions which we’ll be using later.

Install and activate ACF, click on Custom Fields in your WordPress menu and then Add New next to Field Groups. Enter a title of “Adaptive Content” and add another rule group to ensure the new fields appear on pages as well.

Add the two new fields:

  1. Short Title (short_title) Text – set formatting to No formatting
  2. Short Excerpt (short_excerpt) Textarea – set formatting to Convert new lines into tags

Publish the group. When you add or edit a post or page, Short Title and Short Excerpt will now appear after the body.

Step 3 – Displaying the right content on the right platform

For this example, we are simply going to replace the title and excerpt with Short Title and Short Excerpt when the blog is being viewed on a phone.

To do that add the following to the functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function adaptive_content( $content ) {
// only change content if called in the loop
if ( !in_the_loop() ) return $content;
// check for phone
if ( wpmd_is_phone() ){
// get the name of the custom field - based on filter
$custom_field = str_replace( 'the_' , 'short_' , current_filter() );
$short_content = get_field($custom_field);
// if the field is populated then use it
if ( $short_content ) return $short_content;
}
// only get here if not phone
return $content;
}
add_filter( 'the_excerpt', 'adaptive_content' );
add_filter( 'the_title', 'adaptive_content' );

This code will output our custom field values instead of the original content for mobile phone users.

Let’s go through it in a bit more detail and see how it does it.

The adaptive_content function is added to both the_excerpt and the_title filters and will be executed whenever the get_the_title and get_the_excerpt functions are called. This includes the_title and the_excerpt post template tags.

The adaptive_content function first checks if the call is being made from within The Loop to ensure that only post and page content is filtered. If you’d like to alter the titles globally, including menu options and widgets, then remove this check.

WP Mobile Detect’s wpmd_is_phone function is then used to check if the browsing device is a phone. If it is then it uses the current filter (“the_title” or “the_excerpt”) to generate the custom field name for the call to the get_field function, provided by the ACF plugin. If the custom field is populated then its content is returned otherwise the original content is returned.

Test it!

As we are using filters, there should be no need to change your theme, making it easy to test. To try it out, edit a post and add content to the Short Title and Short Excerpt custom fields. Browse the site on a phone and you should see the short title and excerpt.

In this example, we have only targeted one additional device (phone) but catering for more devices is as simple as adding more fields to Adaptive Content custom field group and appropriate calls to the adaptive_content function.

Using the custom fields along with the WP Mobile Detect shortcodes in the body is a simple but effective way of tailoring your content to a device and making for a compelling experience for your mobile visitors.

What do you think of adaptive content? Do you use it already?

Comments (3)

  1. Most themes (that aren’t mobile responsive) will still need to be made “mobile responsive” as well as taking the above steps toward making the content easier to read on a mobile.

    Do you agree Chris?

    I’m looking at one of my “non-responsive” blogs on my Samsung phone right now, and the blog has gone really small, so it fits everything on the screen. But, the writing is very tiny and unreadable without a magnifying glass. When I zoom in, it’s almost impossible to read a post in context, and too much work for the visitor.

  2. Julieanne,

    Absolutely, no point doing all the good stuff with the actual content if the site design is still targeting large screen sizes.

    I think we’ve also moved now from being pleasantly surprised if a site works on a mobile device to now expecting it to work.

    Of course, it is possible with WordPress to deliver a different theme to mobiles and this may be a better path than retrofitting responsive to an existing site.

    Depends on many factors.

Participate