{"id":24591,"date":"2016-09-08T03:01:34","date_gmt":"2016-09-07T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24591"},"modified":"2016-09-06T10:39:45","modified_gmt":"2016-09-06T00:39:45","slug":"wordpress-twentyten-theme-mobile-friendly-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-twentyten-theme-mobile-friendly-primer-tutorial\/","title":{"rendered":"WordPress TwentyTen Theme Mobile Friendly Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp_mf.gif\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress TwentyTen Theme Mobile Friendly Primer Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp_mf.jpg\" title=\"WordPress TwentyTen Theme Mobile Friendly Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">WordPress TwentyTen Theme Mobile Friendly Primer Tutorial<\/p><\/div>\n<p>Earlier on, we talked about making the Landing Pages here at RJM Programming mobile friendly, being as this is becoming an increasingly important <a target=_blank title='Search Engine Optimization information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Search_engine_optimization'>Search Engine Optimization<\/a> issue, when we presented <a target=_blank title='Google Search Engine Mobile Friendly Tester Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-search-engine-mobile-friendly-tester-tutorial\/'>Google Search Engine Mobile Friendly Tester Tutorial<\/a>.  Today we set our sights on making our WordPress Blog here mobile friendly, being as we see the Google Search engine saying the pages were not &#8230; <font size=1>chortle (ahead of time), chortle<\/font> &#8230; &#8220;upwardly mobile&#8221; &#8230;<br \/>\n<img decoding=\"async\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp_mf-5of.jpg\" title=\"Not upwardly mobile\"><\/img><\/p>\n<p>A difference today, and we&#8217;ve talked about this other Google functionality before when we presented the thread of blog postings finishing with <a target=_nblank title='Google Page Speed Image Optimization Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-page-speed-image-optimization-follow-up-tutorial\/'>Google Page Speed Image Optimization Follow Up Tutorial<\/a>, is that the combination of &#8230;<\/p>\n<ul>\n<li>Google &#8220;Developers&#8221; <a target=_blank href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?utm_source=MFT&#038;utm_campaign=MFT&#038;utm_medium=incoming-link&#038;priorityGroup=USABILITY&#038;url=http%3A%2F%2Fwww.rjmprogramming.com.au%2FITblog%2Fcategory%2Ftutorials%2F&#038;tab=desktop'>Page Speed<\/a> functionality &#8230; is pointed to, and recommended by me to follow, by &#8230; &#8220;Pagespeed Insights&#8221; (and its great &#8220;Show how to fix&#8221; links) &#8230; which we needed to be goaded to use, because it initially sounded a bit irrelevant (to us at least) &#8230; but glad we did &#8230; from &#8230;<\/li>\n<li>Google &#8220;Webmasters&#8221; <a target=_blank href='https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/?url=https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/tutorial\/&#038;utm_source=gws&#038;utm_medium=metaline&#038;utm_campaign=notmobilefriendy'>Mobile Friendly<\/a> tester that is your <a target=_blank title='Getting there' href='https:\/\/www.google.com.au\/#q=%22Robert+James+Metcalfe+Blog%22&#038;start=40&#038;filter=0'>entry point<\/a> to all this from the Google Search engine &#8220;Your page is not mobile-friendly.&#8221; link<\/li>\n<\/ul>\n<p>So that&#8217;s how we test &#8220;how are we going&#8221; with making the WordPress Blog mobile friendly.  But how do we get to a point where we are in a position to be tweaking for a mobile website look that can be &#8220;tweaked&#8221; within Google&#8217;s mobile friendly test assessment as &#8220;success&#8221;.<\/p>\n<p>Well, there is, amongst others, ideas such as &#8230;<\/p>\n<ul>\n<li>apply <a target=_blank title='Responsive Design Google search' href='https:\/\/www.google.com.au\/?client=firefox-b-ab#q=responsive+design&#038;gfe_rd=cr'>Responsive Design<\/a> principles to your current WordPress theme, which is the TwentyTen theme around these parts &#8230; or &#8230;<\/li>\n<li>use a WordPress plugin like <a target=_blank href='http:\/\/dineshkarki.com.np\/any-mobile-theme-switcher'>Any Mobile Theme Switcher<\/a> by Dinesh Karki &#8230; which appears great for WordPress 3.5 and above &#8230; read here for more on that <a target=_blank href='https:\/\/wordpress.org\/support\/topic\/fatal-error-call-to-undefined-function-wp_get_theme-1'>here<\/a> (as a user of WordPress below 3.5 and receiving the error &#8220;Fatal error: Call to undefined function wp_get_theme()&#8221; activating the &#8220;Any Mobile Theme Switcher&#8221; plugin) &#8230; or, what we ended up going down the path of is &#8230;<\/li>\n<li>chip away at a WordPress TwentyTen theme &#8220;engine&#8221; that calls a TwentyFifteen theme &#8220;stylesheet&#8221; (which speaks &#8220;mobilish&#8221; quite well) for the smaller width mobile devices only, and adjust that TwentyFifteen theme &#8220;stylesheet&#8221;<\/li>\n<\/ul>\n<p>Surprising as it may seem, the last one gets you to a useful &#8220;tweakable&#8221; scenario, we think, here, and we get to keep the TwentyTen theme customisations, and ob_start() speed consideration ideas we talked about with <a target=_blank title='WordPress Blog PHP mod_deflate Speed Improvement Tutorial ' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-php-mod_deflate-speed-improvement-tutorial\/'>WordPress Blog PHP mod_deflate Speed Improvement Tutorial <\/a>, though they don&#8217;t all work yet regarding some styling differences &#8230; but that&#8217;s what we mean by tweaking &#8230; and yet the Google search engine now gives these pages the tick of approval for mobile friendliness.<\/p>\n<p>Where do you go to make this happen?  You&#8217;ll never believe it?  Go on!  Guess away?!  Yes, good ol&#8217; header.php of the TwentyTen theme used to have a line of code like &#8230;<\/p>\n<p><code><br \/>\n&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"&lt;?php bloginfo( 'stylesheet_url' ); ?&gt;\" \/&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; that got changed to &#8230;<\/p>\n<p><code><br \/>\n&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"&lt;?php $iphone = strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');  $android = strpos($_SERVER['HTTP_USER_AGENT'],'Android');   $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],'BlackBerry');  $ipod = strpos($_SERVER['HTTP_USER_AGENT'],'iPod');  $ipad = strpos($_SERVER['HTTP_USER_AGENT'],'iPJUNKad');  if ($ipad || $iphone || $android || $ipod || $blackberry) { echo 'https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-content\/themes\/twentyfifteen\/style.css'; } else { bloginfo( 'stylesheet_url' ); } ?&gt;\" \/&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to get us to the &#8220;green&#8221; via the Google PageSpeed recommendations (via Google Search&#8217;s &#8220;Your page is not mobile-friendly.&#8221; link to Google Mobile Friendly tester&#8217;s &#8220;Show how to fix&#8221; PageSpeed link&#8217;s &#8230;<\/p>\n<blockquote><p>\nThe page content is 580 CSS pixels wide, but the viewport is only 411 CSS pixels wide.\n<\/p><\/blockquote>\n<p> &#8230; making me realize, in good ol&#8217; TwentyTen theme&#8217;s header.php that &#8230;<\/p>\n<p><code><br \/>\nif ($ipad || $iphone || $android || $ipod || $blackberry) { \/\/ thanks to http:\/\/www.phpmysqlscript.com\/2012\/03\/detecting-users-screen-size-and.html<br \/>\n      echo \"\\n #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { width: 580px; } \\n\"; \/\/ 470px; }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; should become &#8230;<\/p>\n<p><code><br \/>\nif ($ipad || $iphone || $android || $ipod || $blackberry) { \/\/ thanks to http:\/\/www.phpmysqlscript.com\/2012\/03\/detecting-users-screen-size-and.html<br \/>\n      echo \"\\n #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { width: 411px; } \\n\"; \/\/ 580px \/\/ 470px; }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; so that &#8230;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp_mf-11of.jpg\" title=\"Your page is mobile-friendly.\"><\/img>\n<\/p>\n<p>  &#8230; now to mull over the &#8220;putting&#8221;.<\/p>\n<p>We&#8217;ll leave you with an animated GIF &#8220;stream of consciousness&#8221; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp_mf.gif\" title='Click picture'>presentation<\/a> for you today regarding a lot of this thinking above, and hope it helps you out with ideas, yourself.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24591' onclick='var dv=document.getElementById(\"d24591\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24591' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Earlier on, we talked about making the Landing Pages here at RJM Programming mobile friendly, being as this is becoming an increasingly important Search Engine Optimization issue, when we presented Google Search Engine Mobile Friendly Tester Tutorial. Today we set &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-twentyten-theme-mobile-friendly-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[151,281,513,529,795,798,853,956,1991,1111,1120,1211,1268,1990,1324,1325,1421,1456],"class_list":["post-24591","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-css","tag-google","tag-google-pagespeed","tag-mobile","tag-mobile-friendly","tag-ob_start","tag-plugin","tag-responsive-design","tag-search-engine","tag-seo","tag-stylesheet","tag-theme","tag-twentyfifteen-theme","tag-twentyten","tag-twentyten-theme","tag-website","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24591"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=24591"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24591\/revisions"}],"predecessor-version":[{"id":24601,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24591\/revisions\/24601"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=24591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=24591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=24591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}