Shortcode to Hide Text Content on Smartphones

With the majority of website visitors now arriving using smartphones, I am becoming more granular in deciding which desktop content gets removed when a page is viewed on a phone. In the past, I might eliminate entire elements like images or blocks of content. But now I find times when I want to hide part of a paragraph — and do it in a way that was maintainable by a normal user.

To accomplish this I created a shortcode named: [hide-on-phones].

The Problem

Here is example of the problem that I often face.

Let’s assume we are designing a simple full-page section that will fill the entire screen (regardless of the size) and display three items:

• Title
• Description
• Call To Action

Here’s a screenshot of the page on a laptop.

If we display this on a smartphone, the content overflows.

The Solution

To fix this, on smartphones, we only want to display the first sentence.

To accomplish this we simply surround the portion we don’t want displayed on smartphones with our [hide-on-phones] shortcode. Here is how it looks in the editor.

This is a demonstration of the hide-on-phones shortcode. [hide-on-phones] This shortcode can be used to full content on desktops and tablets, but hide portions of the content (complete or partial paragraphs) when viewed on smartphones. [/hide-on-phones]

Here is how it looks on a smartphone after we implement our shortcode.

 

The [hide-on-phones] Shortcode Code

To implement the [hide-on-phones] shortcode you need to add this PHP code to your functions.php file. (If you haven’t already implemented a child theme, I strongly recommend you do so before going any further! Here’s a tutorial.)

// Shortcode to hide text content on smartphones
function hide_on_phones ($atts, $content) {
  $output = "<span class=\"hide-on-phones\">" . $content . "</span>";
  return $output;
}
add_shortcode('hide-on-phones', 'hide_on_phones');

And add this CSS to your website.

/* Hide Content on Smartphones */
@media all and (max-width: 768px) {
  .hide-on-phones {
    display: none;
  }
}

Summary

The shortcode simply puts the part we want hidden on smartphones inside a span element and the CSS tells the browser to not to display it when the screen is smartphone sized.

We could have simply surrounded the text we don’t want displayed on smartphones inside a span element using the non-visual editor. But if anyone other than a tech-savvy web designer edits the content, then the page will most likely get hosed.

This solution makes it pretty obvious for non-technical content editors.

Let me know if you have any questions in the comments below.