Enable Shortcodes in WPtouch on WordPress

May 5, 2013 by
Filed under: HowTo, web development 

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.

Tux Tweaks home page with WPtouch

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:

Affiliate Link
some fancy command line magic

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.

Shortcodes displayed in WPtouch

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.

Shortcode working with WPtouch

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.

.term{font-family:courier bold;font-size:11pt;color:#000;background:cornsilk;padding:5px 0 15px 3px;margin:0 0 5px 0;border:1px solid #000;width:98%;overflow:auto;overflow-y:hidden;white-space:nowrap;}

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

WPtouch with shortcode and style

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 http://tuxtweaks.com/2013/05/wptouch-enable-shortcodes/.

Comments

9 Responses to “Enable Shortcodes in WPtouch on WordPress”

  1. Nate says:

    Hi Rochelle and Linerd,
    I have read the article and comments, and Im attempting to use the include command to allow my shortcodes.

    With the latest free version of WPTouch (3.1.5), there seems to be no functions.php file in a deafult directory. So Im attempting to use root-functions.php in the directory: wptouch > themes > bauhaus

    I've added the code:
    include( dirname(__FILE__) . '/../path-to/my-wp-theme/functions.php);

    (changed the path location) but each time, it causes the site to go inaccessible and is only fixed when I remove the new code. Any advice, as the shortcodes are key in my site?

    Thanks!!

    Nate

  2. Rochelle says:

    I know I'm about three months late to the party here, but just as a heads up, I was able to accomplish this by just doing an include of my customized functions.php file within the default wptouch theme functions. My site relies heavily on shortcodes throughout, so I went into the functions file you pointed to and added this at line 3:

    include( dirname(__FILE__) . '/../path-to/my-wp-theme/functions.php);

    and it seems to work perfectly. Might save some time for others who use many shortcodes, but I'm a bit of a novice, so I don't know what this does in terms of efficiency.

    Thanks so much for this post!

    • Linerd says:

      Thanks for your comment. It's funny, I was just wondering this morning if it would be simpler to call an include file rather than adding all the code.

      I suspect that it's a little less efficient for the server, but if it is, it's probably not a significant hit.

  3. Hi Linerd - we are using wptouch for our mobile version and are very close to having it completed although we are having a few issues - eg our login does not work plus we would like to add the ability to login with fb -- images post in thumbnail view but when clicked on they disappear, leave a reply not working as well as we need to,add a post function. I know this is off topic but was wondering if you had any suggestions. Please don't send me to support forum they have yet to reply :)
    Cheers,
    Lee

    • Linerd says:

      Lee, sorry I can't be of much help here. I'm a novice with WPtouch myself. I'll have to try leaving a comment on my own site. I haven't tested it.

      As far as site administration goes, I recommend the WordPress app for Android or iOS. That's what I use. I'm using it right now to enter this reply.

      Good luck with resolving your issues. Sorry I couldn't be of more help.

      • Linerd says:

        OK, comments work for me, but I'm not able to take advantage of the threaded comments. I can only add a regular new comment through WPtouch. I'm not sure what additional functionality WPtouch Pro offers, but it may be worth looking into. I have also played around with WordPress Mobile Pack a bit. It has a lot of options for the theme. Maybe it will better meet your needs.

  4. Mike says:

    Linerd, sorry I should have looked before commenting a few minutes ago but I did some searching and after landing on the shortcode api page for wordpress, I found a function that helped me:
    function caption_shortcode( $atts, $content = null ) {
    return '' . do_shortcode($content) . '';
    }

    This may be helpful for some of your users if you want to add it to your post :) Thanks again for the example!!!

    • Linerd says:

      Thanks for the tip. I also use Contact Form 7 and it's working for me with the code listed above in my post. Perhaps there's something different in our themes that requires the extra code.

  5. Mike says:

    Thank you - great article! This really helped get my contact form cleaned up. One question, I have added your code and it renders correctly but within my custom shortcode is the shortcode for [contact-form-7] which I think is losing its ability to render correctly now. Any ideas how to modify the code above to allow for this? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>