{"id":1447,"date":"2012-02-03T23:49:11","date_gmt":"2012-02-04T04:49:11","guid":{"rendered":"http:\/\/fiveforks.com\/ted\/?p=1447"},"modified":"2012-04-22T20:11:11","modified_gmt":"2012-04-23T01:11:11","slug":"wptouch","status":"publish","type":"post","link":"https:\/\/www.fiveforks.com\/ted\/2012\/02\/wptouch\/","title":{"rendered":"WPtouch"},"content":{"rendered":"<p>I have an <a title=\"Offline Browser\" href=\"http:\/\/fiveforks.com\/ted\/2010\/10\/offline_browser\/\">offline browser<\/a> on my iPod that I can use to store my entire blog. By pointing it at my archives page I was able to get it to download everything (takes a while), but the problem is the iPod has an awful browser, Safari, that does a terrible job of rendering pages on a small screen. With the blog it shows the banner image at the top of the page and then a thin, microscopic column of text for the blog entry. So you have to zoom in on the column, but it is a pain.<\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/original-2\/\" rel=\"attachment wp-att-1468\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1468\" title=\"original\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/original1-266x400.png\" alt=\"\" width=\"266\" height=\"400\" srcset=\"https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/original1-266x400.png 266w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/original1-200x300.png 200w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/original1.png 640w\" sizes=\"auto, (max-width: 266px) 85vw, 266px\" \/><\/a>I started looking for solutions and found a plugin for WordPress that completely changes the look of the blog if you try to view it on a portable device. The plugin is called <a href=\"http:\/\/wordpress.org\/extend\/plugins\/wptouch\/\">WPtouch<\/a> and was specifically designed for the iPod Touch and iPhone, but works for Android and Blackberry as well. I don&#8217;t think it does anything for iPad, but that&#8217;s okay because the iPad has a bigger screen. Although WPtouch is free, they have a pay version called <a href=\"http:\/\/www.bravenewcode.com\/store\/plugins\/wptouch-pro\/\">WPtouch Pro<\/a> that gives you the ability to configure the look more and also control how it looks on an iPad. Well, I&#8217;m not going to pay, but I am very particular how things look.<\/p>\n<p><!--more--><\/p>\n<p>It was really easy installing the plugin. Scary easy. It can all be done through the dashboard, though I had to do this via the network dashboard and now all the blogs are using it. I&#8217;m not sure if it can be turned off for different blogs or not. Since only the Pro version supports themes and child themes, all of the changes I made are reflected across all of the Mac5 blogs (if you&#8217;re looking at them on a portable device). It gives a clean and simple look that looks like an iPod app. Entries even get a little iOS calendar icon with a red circle indicating the number of comments, and different colors for each month.<\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/home\/\" rel=\"attachment wp-att-1456\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" title=\"home\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/home-266x400.png\" alt=\"\" width=\"266\" height=\"400\" \/><\/a>I entered the URL of my archives page to see a list of all the entries. Unfortunately the list was just all of the months and you could click on a month and go to a page with the archives of that month. My regular archives page is a list of all the entries, but WPtouch was overriding that and giving me the default archives. To fix that I had to edit the <strong>page.php<\/strong> file and give the following function an argument instead of being blank:<\/p>\n<p><code>wp_get_archives('type=postbypost')<\/code><\/p>\n<p>So now I have a nice list of entries. After I did this screenshot I commented out the tag cloud in page.php and changed the subheading from &#8220;Monthly Archive&#8221; to &#8220;All Entries &#8211; Newest to Oldest&#8221;. The heading also has a Search tool available.<\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/archives-2\/\" rel=\"attachment wp-att-1457\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1457\" title=\"archives\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/archives-266x400.png\" alt=\"\" width=\"266\" height=\"400\" srcset=\"https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/archives-266x400.png 266w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/archives-200x300.png 200w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/archives.png 640w\" sizes=\"auto, (max-width: 266px) 85vw, 266px\" \/><\/a>There is also a configurable drop-down menu. I got rid of this on my regular blog, but because there are no sidebars here, it could be useful. So far the only thing I&#8217;ve added is a link to my archives. The other items were already there.<\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/menu\/\" rel=\"attachment wp-att-1458\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1458\" title=\"menu\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/menu-266x400.png\" alt=\"\" width=\"266\" height=\"400\" srcset=\"https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/menu-266x400.png 266w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/menu-200x300.png 200w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/menu.png 640w\" sizes=\"auto, (max-width: 266px) 85vw, 266px\" \/><\/a>You go to an individual entry and it looks great on the iPod, very easy to read.<\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/entry\/\" rel=\"attachment wp-att-1460\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1460\" title=\"entry\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/entry-266x400.png\" alt=\"\" width=\"266\" height=\"400\" srcset=\"https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/entry-266x400.png 266w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/entry-200x300.png 200w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/entry.png 640w\" sizes=\"auto, (max-width: 266px) 85vw, 266px\" \/><\/a>At the bottom is a toggle to show the comments. I went ahead and told my offline browser to go get the blog. I got tired of waiting for the entire download, so canceled part way through to check things out. It turns out that WPtouch was kicking in like it was supposed to, but the comment toggle wouldn&#8217;t work offline and I wasn&#8217;t able to see the comments. I don&#8217;t want to miss out on that. There doesn&#8217;t seem to be a lot of help for configuring all of this and the company that wrote it wants to steer you into paying $50 for the upgraded version. However I did find in the <strong>style.css<\/strong> this little snippet and edited out the part that hides the list:<\/p>\n<p><code>ol#commentlist {<br \/>\nlist-style-type: none;<br \/>\n\/*\u00a0\u00a0 \u00a0display: none;*\/<br \/>\nmargin: 0 10px 0;<br \/>\nposition: relative;<br \/>\npadding-right: 0;<br \/>\npadding-bottom: 0;<br \/>\npadding-left: 0;<br \/>\n}<\/code><\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/comments\/\" rel=\"attachment wp-att-1459\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1459\" title=\"comments\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/comments-266x400.png\" alt=\"\" width=\"266\" height=\"400\" srcset=\"https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/comments-266x400.png 266w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/comments-200x300.png 200w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/comments.png 640w\" sizes=\"auto, (max-width: 266px) 85vw, 266px\" \/><\/a>So the toggle (the little triangle next to &#8220;6 responses&#8221;) is still there, but I disabled it by getting rid of the on_click snippet in <strong>comments.php<\/strong>. At the end of each entry there is a tool bar that lets you go to previous or next entry or email, tweet, or bookmark the page. For some reason, the date of the comments wasn&#8217;t shown as a date, but as how long ago (&#8220;5 days and 4 hours ago&#8221;), which is useless for a lot of really old posts. I&#8217;d rather just see the date. So, after much struggling, I wiped that part out of comments.php and put in the following:<\/p>\n<p><code>&lt;?php\u00a0\u00a0 comment_date( 'M jS, Y @ h:i a'); ?&gt;<\/code><\/p>\n<p>from this:<\/p>\n<p><code>&lt;?php if (function_exists('wptouch_time_since')) {<br \/>\necho wptouch_time_since(abs(strtotime($comment-&gt;comment_date_gmt . \" GMT\")), time()) . \" \" . __( 'ago', 'wptouch' ); } else { the_time('F jS, Y'); ?&gt;<code><\/code><\/code><\/p>\n<p>Since I was formatting dates and I usually like to have the day of the week in the date format, I added a l (lower case L) and comma to the format of the entry in <strong>single.php<\/strong><\/p>\n<p>As with Twenty Eleven, I wanted to get rid of the site description (the rotating quote) from the title of the page. I was able to delete a couple of lines from the <strong>core-header.php<\/strong> file to do that. Now when you visit the home page the title is just Ted&#8217;s Blog.<\/p>\n<p>At the bottom of each page is a switch where you can go back to the blog&#8217;s original look if you want. But if you do, it still leaves a switch at the bottom so you can go back to WPtouch&#8217;s look.<\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/comment\/\" rel=\"attachment wp-att-1461\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1461\" title=\"comment\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/comment-266x400.png\" alt=\"\" width=\"266\" height=\"400\" srcset=\"https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/comment-266x400.png 266w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/comment-200x300.png 200w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/comment.png 640w\" sizes=\"auto, (max-width: 266px) 85vw, 266px\" \/><\/a>I was worried that some pages with a lot of formatting might not look right, but it brings over images no problem and here is a table:<\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/table\/\" rel=\"attachment wp-att-1462\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1462\" title=\"table\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/table-266x400.png\" alt=\"\" width=\"266\" height=\"400\" srcset=\"https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/table-266x400.png 266w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/table-200x300.png 200w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/table.png 640w\" sizes=\"auto, (max-width: 266px) 85vw, 266px\" \/><\/a>It even dealt with the iPod Timeline entry which has some custom styles and uses definition lists:<\/p>\n<p><a href=\"http:\/\/fiveforks.com\/ted\/2012\/02\/wptouch\/ipodtimeline\/\" rel=\"attachment wp-att-1463\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1463\" title=\"ipodtimeline\" src=\"http:\/\/fiveforks.com\/ted\/files\/2012\/02\/ipodtimeline-266x400.png\" alt=\"\" width=\"266\" height=\"400\" srcset=\"https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/ipodtimeline-266x400.png 266w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/ipodtimeline-200x300.png 200w, https:\/\/www.fiveforks.com\/ted\/files\/2012\/02\/ipodtimeline.png 640w\" sizes=\"auto, (max-width: 266px) 85vw, 266px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have an offline browser on my iPod that I can use to store my entire blog. By pointing it at my archives page I was able to get it to download everything (takes a while), but the problem is the iPod has an awful browser, Safari, that does a terrible job of rendering pages &hellip; <a href=\"https:\/\/www.fiveforks.com\/ted\/2012\/02\/wptouch\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;WPtouch&#8221;<\/span><\/a><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1447","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/posts\/1447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/comments?post=1447"}],"version-history":[{"count":17,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/posts\/1447\/revisions"}],"predecessor-version":[{"id":1636,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/posts\/1447\/revisions\/1636"}],"wp:attachment":[{"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/media?parent=1447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/categories?post=1447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fiveforks.com\/ted\/wp-json\/wp\/v2\/tags?post=1447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}