Building a mobile website for your blog or business can be a daunting task. Perhaps you're an expert at mobile website development and you can design a mobile website on your own just fine. But for many of us, learning to do this would take far too much time and effort and probably wouldn't turn out all that great anyway. If you are using WordPress to run your website, you're in luck. There are several plugins available to make your site look great on mobile devices.

With over four million downloads, WPtouch is perhaps the most popular WordPress plugin to make your website mobile ready. I have been using it on this site for a month or two myself.  You can see in the image below what my site's home page looks like on a mobile device with WPtouch enabled.

If this is the first time you're on my site, I'll tell you that I write a lot of tutorials that include commands to enter into a Linux terminal window. To separate those from the rest of the text, I've created a style in my site's stylesheet (style.css) that I use whenever I show one of those commands.This is what it looks like:

After a while I got tired of entering the html code to enable that style, so I modified my theme to create a shortcode for the style. As it turns out, WPtouch doesn't process those shortcodes from your main theme, so the shortcodes end up getting displayed on the mobile version of your site. Click to enlarge the picture below for an example. My shortcode is called term.

To fix this, you need to edit the theme for WPtouch. These files are not accessible from the plugin editor in WordPress, so you'll need to log in to your web server and edit the files from there.

Adding Shortcodes to WPtouch

Once you're logged into your webserver, navigate to the directory where WordPress is installed. It's probably installed under your public_html folder, but that can vary based on your server setup. Once you've found the right directory, navigate to

wp-content/plugins/wptouch/themes/default/

In that directory you'll find a functions.php file. This is where you can add your shortcode. (If you don't know where to find the original shortcodes, you should be able to find them in the functions.php file from your main desktop theme.)  Open your file for editing and add your shortcode at the bottom of the file and save it.  This is the code I pasted into the bottom of my functions.php file:

//Shortcode for terminal class styling
function term_shortcode( $atts, $content = null ) {
    return '<div class="term">' . $content . '</div>';
}
add_shortcode('term', 'term_shortcode');
add_filter('comment_text', 'do_shortcode');

Once you have saved the file, you should see that WPtouch is now processing your shortcode.

If your shortcode has nothing to do with the page style, then you're done. In my case, I need to make one more change for the style to display how I intended.

Editing the WPtouch Style

Within the same directory as the functions.php file, there should also be a style.css file.  That's the file you'll need to edit if your shortcode requires a style definition in the style sheet. I pasted the following style into the bottom of that file for my terminal window styling.

You can see in the picture below that my style has been applied.

Note

The changes you've made to the WPtouch plugin will only last as long you don't update the plugin. If you do update it, (which I recommend for security  reasons), you will need to edit the plugin again to re-enable your shortcode.

This post originally appeared at https://tuxtweaks.com/2013/05/wptouch-enable-shortcodes/.