{"id":131882,"date":"2014-09-08T08:00:00","date_gmt":"2014-09-08T12:00:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=131882"},"modified":"2017-10-20T02:43:06","modified_gmt":"2017-10-20T02:43:06","slug":"easily-add-touch-gestures-to-your-wordpress-site","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/easily-add-touch-gestures-to-your-wordpress-site\/","title":{"rendered":"Don&#8217;t Make Your Mobile Users Think: Support Gestures On Your WordPress Site"},"content":{"rendered":"<p>Many tablet and mobile users are app-trained to expect swipes and taps to result in navigation.<\/p>\n<p>Many WordPress themes don&#8217;t include gesture support out-of-the-box but it&#8217;s actually surprisingly easy to add to an existing site.<\/p>\n<p>Let me show you how to let your mobile\u00a0visitors navigate your site with taps and swipes.<\/p>\n<figure id=\"attachment_131920\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-large wp-image-131920\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/09\/gestures-feature-700x305.jpg\" alt=\"Screengrab of a ginger swiping on an iPad\" width=\"700\" height=\"305\" \/><figcaption class=\"wp-caption-text\">Adding gesture support to your existing WordPress site is quick and easy<\/figcaption><\/figure>\n<p>We all do it. You&#8217;re jump out of an app and into your tablet browser and you start swiping &#8211; to no avail &#8211; in a vain attempt to navigate around a website and, of course, it doesn&#8217;t work. This is particularly prevalent with tablets as they tend to served the standard site far more often than smartphones which will often get a mobile version of the website.<\/p>\n<p>But your WordPress site can be adapted to support gestures with very little effort thanks to a number of javascript-base solutions that can bring touch gesture support to any WordPress website.<\/p>\n<p>I&#8217;m going to show you how to implement the following gestures using the <a title=\"Read more about the Tocca library\" href=\"https:\/\/github.com\/GianlucaGuarini\/Tocca.js\" rel=\"noopener\" target=\"_blank\">Tocca library<\/a>:<\/p>\n<ul>\n<li>Swipe Left &#8211; go to next post<\/li>\n<li>Swipe Right &#8211; go to previous post<\/li>\n<li>Double Tap &#8211; go to a page of choice (default is the home page)<\/li>\n<\/ul>\n<p>The swiping does depend on the <em>prev<\/em> and <em>next<\/em> tags that WordPress generally adds to the header. If your theme is not outputting this tags then chances are that your theme is not calling the <a title=\"Read more about this function on the WP Codex\" href=\"http:\/\/codex.wordpress.org\/Plugin_API\/Action_Reference\/wp_head\" rel=\"noopener\" target=\"_blank\">wp_head function<\/a> or that it has disabled the output of these links.<\/p>\n<p>The solution is wrapped up in a plugin, so first let&#8217;s go through how to use the plugin and then we&#8217;ll go through how it works.<\/p>\n<h2>Setting Up Gestures<\/h2>\n<h3>Step 1 &#8211; Install The Plugin<\/h3>\n<p>Download the plugin from GitHub and upload to your WordPress site in <strong>Plugins<\/strong> &gt; <strong>Add New<\/strong>. Activate the plugin.<\/p>\n<h3>Step 2 &#8211; Updating The Settings<\/h3>\n<p>If you navigate to <strong>Settings<\/strong> &gt; <strong>Gestures<\/strong> you&#8217;ll find 2 settings:<\/p>\n<figure id=\"attachment_131915\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-131915\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/09\/gestures_settings.png\" alt=\"Screengrab of the settings page for the gestures plugin\" width=\"700\" height=\"401\" \/><figcaption class=\"wp-caption-text\">Just 2 settings, one for the container and one for the double-tap destination<\/figcaption><\/figure>\n<p>The first option is the container within which the gestures will be detected. If you want a gesture anywhere on the visible page to be actioned then you&#8217;ll want to use the id or class of the first major containing element after the body tag (generally #page).<\/p>\n<p>If you only want the gestures in the actual content (excluding the header for example) then you&#8217;ll probably want to use something like #content.<\/p>\n<p>Of course, it all depends on how your theme is written so you may want to delve into the HTML or the header.php theme file to find out more.<\/p>\n<p>The second option is the page to display when the user double-taps. This defaults to the site url but can be any url and will depend on your needs.<\/p>\n<p>If you change the options then be sure to click on Save.<\/p>\n<h3>Step 3 &#8211; Test!<\/h3>\n<p>That&#8217;s actually all there is to it, so jump into your site and test it. You can test in one of 3 ways:<\/p>\n<ol>\n<li>Desktop: simulate a swipe by holding down the mouse button and dragging left or right; rapid click for a double click.<\/li>\n<li>Simulator (i.e. iOS Simulator): view your site in a mobile simulator and simulate the swipes and taps as describe for desktops<\/li>\n<li>Handheld: obviously the best way to test is with an actual handheld device. If you can get to the site using a handheld then do so and tap and swipe as normal<\/li>\n<\/ol>\n<p>You should find that swiping left and right navigates you between posts, whilst a double-tap takes you to the page you specified in step 2 (or the home page if you left the options unchanged).<\/p>\n<h2>How It Works<\/h2>\n<p>As I mentioned, this solution makes use of the Tocca jQuery plugin to capture the gestures and is almost entirely a client-side solution.<\/p>\n<p>The Tocca script is enqueued, along with custom javascript to initialize the Tocca events on the container element that we specify in the Settings &gt; Gestures page. Simple localization takes place to ensure that the container identifier and the double-tap destination are passed down to the initialization script.<\/p>\n<p>The plugin is, therefore, pretty small and uninteresting (it also handles the new Settings &gt; Gestures page) so we&#8217;ll just focus on the initialization script.<\/p>\n<p>As I mentioned, the localize_script function is used to pass the settings to the initialization script, with the output looking something like this:<\/p>\n<p>The initialization script then simply adds the Tocca gesture event handling for double-tap (dbltap), swipe left (swipeleft) and swipe right (swipe right) to the container:<\/p>\n<div class=\"gist\" data-gist=\"9e2e4655bf9ca09b54b3\" data-gist-file=\"gestures_init.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/9e2e4655bf9ca09b54b3.js?file=gestures_init.js\">Loading gist 9e2e4655bf9ca09b54b3<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>As you see, not very complicated at all. The double-tap action is simply to change the URL to the passed destination whilst the swipe actions simply look for the relevant link tag and change the URL to the href.<\/p>\n<p>If there is no <em>prev<\/em> or <em>next<\/em> link (such as on the homepage) then no action is taken.<\/p>\n<h2>Don&#8217;t Make Mobile\u00a0Users Think!<\/h2>\n<p>The rise of mobiles, and particularly\u00a0tablets, at the expense of desktops means that the lines between between app behavior and website behavior continue to blur.<\/p>\n<p>Users love consistency and shouldn&#8217;t really have to change their behavior just because they are in a browser and not in an app.<\/p>\n<p>As this solution shows, it&#8217;s entirely possible to let your mobile\u00a0visitors have their cake and eat it. Without even thinking about it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many WordPress themes don&#8217;t include gesture support out-of-the-box but it&#8217;s actually surprisingly easy to add to an existing site. Let me show you how to let your mobile visitors navigate your site with taps and swipes.<\/p>\n","protected":false},"author":262394,"featured_media":131920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[2395],"tutorials_categories":[],"class_list":["post-131882","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-mobile"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/262394"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=131882"}],"version-history":[{"count":3,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131882\/revisions"}],"predecessor-version":[{"id":168906,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131882\/revisions\/168906"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/131920"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=131882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=131882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=131882"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=131882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}