{"id":13042,"date":"2015-02-27T05:06:56","date_gmt":"2015-02-26T18:06:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13042"},"modified":"2016-09-24T09:44:07","modified_gmt":"2016-09-23T23:44:07","slug":"wordpress-blog-mobile-phone-friendly-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-mobile-phone-friendly-primer-tutorial\/","title":{"rendered":"WordPress Blog Mobile Phone Friendly Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/MobileFriendly_Blog.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Wordpress Blog Mobile Phone Friendly Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/MobileFriendly_Blog.jpg\" title=\"Wordpress Blog Mobile Phone Friendly Primer Tutorial\" id=\"iwbmpfpt\" onmouseover=\"  this.src = this.src. replace('.jpg','.PNG').replace('.png','.jpg').replace('.PNG','.png');   \" \/><\/a><p class=\"wp-caption-text\">Wordpress Blog Mobile Phone Friendly Primer Tutorial<\/p><\/div>\n<p>We would like this WordPress Blog, that has the Twenty Ten theme, to be better adapted for mobile phone use (that being Android, iOS, Blackberry) regarding its look and usability.  Several comments on the blog have asked about this, and hope they are &#8220;viewing&#8221; now.   We&#8217;ve determined that the mobile phone device is the priority, and that, for now, mobile tablets do not need such urgent attention.<\/p>\n<p>With WordPress Blogs you can go down the path of getting a mobile-friendly theme to start with, or apply a third-party plugin such as <a target=_blank title='WordPress Mobile Pack' href='https:\/\/wordpress.org\/plugins\/wordpress-mobile-pack\/'>WordPress Mobile Pack<\/a>, or do it yourself.  We are going to opt for &#8220;do it yourself&#8221; and learn more about the innards of the blog&#8217;s styling as a result.  Porquoi?   How can you learn without knowing &#8220;now&#8221; &#8230; so to speak?  Well, that&#8217;s the beauty of using an HTML examiner such as Firebug &#8230; sorry to go on and on and on and on and on about <a target=_blank title='Firebug home page' href='https:\/\/getfirebug.com\/'>Firebug<\/a> &#8230; but really &#8230; for DIY WordPress work, such a tool is worth its weight in gold.<\/p>\n<p>Am going to show you the first sweep of changes with a point form in &#8220;black&#8221; and an action taken as a result in <font color=red>&#8220;red&#8221;<\/font> below &#8230;<\/p>\n<ul>\n<li>settle on a policy regarding clutter &#8230; will you reduce data? never? <font color=red> &#8230; am aiming for &#8220;never&#8221; but may be deluded here<\/font><\/li>\n<li>determine a PHP way to detect for a mobile phone device (tablets seem okay) <font color=red><code>&lt;?php<br \/>\n    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],\"iPhone\");<br \/>\n    $android = strpos($_SERVER['HTTP_USER_AGENT'],\"Android\");<br \/>\n    $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],\"BlackBerry\");<br \/>\n    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],\"iPod\");<br \/>\n    if ($iphone || $android || $ipod || $blackberry) { \/\/ thanks to http:\/\/www.phpmysqlscript.com\/2012\/03\/detecting-users-screen-size-and.html<br \/>\n       \/\/ these are the devices we want to work with with our changes today<br \/>\n    }<br \/>\n\/\/ ...<br \/>\n\/\/ ...<br \/>\n?&gt;<br \/>\n<\/code>  &#8230; applied in header.php coding<\/font><\/li>\n<li>(you may need to) determine a Javascript way to detect for a mobile phone device (tablets seem okay) <font color=red> &#8230; try reading <a target=_blank title='Javascript screen width detection ideas' href='http:\/\/www.phpmysqlscript.com\/2012\/03\/detecting-users-screen-size-and.html'>Javascript screen width detection ideas<\/a> as a start<\/font><\/li>\n<li>settle on a <i>&#8220;meta&#8221;<\/i> <i>&#8220;viewport&#8221;<\/i> tag to your liking <font color=red>&#8230; personal preference leads to &#8230;<br \/>\n<code> &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes\" \/&gt; <\/code>  &#8230; applied in header.php coding<\/font><\/li>\n<li>review the look and usability of the blog <font color=red> &#8230; spent quite some time at this, because you want to know setting above is user-friendly, then think about the look<\/font><\/li>\n<li>round up the <i>&#8220;img&#8221;<\/i> elements that are too big and do something about them <font color=red> &#8230; used <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/MobileFriendly_Blog.png\" title='(Firefox) Firebug being called to duty'>Firebug<\/a> to point at these and identify their &#8220;id&#8221;&#8216;s and\/or &#8220;class&#8221; (and perhaps their tag type)<\/font> <font color=red> &#8230; this lead to <b>bold<\/b> change in WordPress functions.php regarding the header images as per &#8230;<br \/>\n<code><br \/>\n\tdefine( 'HEADER_IMAGE', '%s\/images\/headers\/path.jpg' );<br \/>\n<b><br \/>\n    $nfty = 940;<br \/>\n    $oneg = 198;<br \/>\n    <\/b><b><br \/>\n    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],\"iPhone\");<br \/>\n    $android = strpos($_SERVER['HTTP_USER_AGENT'],\"Android\");<br \/>\n    $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],\"BlackBerry\");<br \/>\n    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],\"iPod\");<br \/>\n  <\/b><b><br \/>\n    if ($iphone || $android || $ipod || $blackberry) { \/\/ thanks to http:\/\/www.phpmysqlscript.com\/2012\/03\/detecting-users-screen-size-and.html<br \/>\n       $nfty = $nfty \/ 2;<br \/>\n       $oneg = $oneg \/ 2;<br \/>\n    }<br \/>\n<\/b><br \/>\n\t\/\/ The height and width of your custom header. You can hook into the theme's own filters to change these values.<br \/>\n\t\/\/ Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.<br \/>\n<b><br \/>\n\tdefine( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', $nfty ) ); \/\/940 ) );<br \/>\n\tdefine( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', $oneg ) ); \/\/198 ) );<br \/>\n<\/b><br \/>\n<\/code><br \/>\n<\/font><\/li>\n<li>have a look at the site with Firebug and point at the wider offending elements, then look over at the right hand side CSS section to see what some local CSS changes might achieve <font color=red> &#8230; this lead to <b>bold<\/b> change in WordPress header.php as per &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n   \/\/ ...<br \/>\n   \/\/ ...<br \/>\n   \/\/ ...<br \/>\nli.eight {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/eight.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<br \/>\n<b><br \/>\n&lt;?php<br \/>\n    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],\"iPhone\");<br \/>\n    $android = strpos($_SERVER['HTTP_USER_AGENT'],\"Android\");<br \/>\n    $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],\"BlackBerry\");<br \/>\n    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],\"iPod\");<br \/>\n    <\/b><b><br \/>\n    if ($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    <\/b><br \/>\n   \/\/ ...<br \/>\n   $hrc = rand(0, 10);<br \/>\n  $hrcarray = array(\"black\", \"red\", \"blue\", \"purple\", \"maroon\", \"teal\", \"brown\", \"orange\", \"olive\", \"lime\", \"green\");<br \/>\n   \/\/ ...<br \/>\n   \/\/ ...<br \/>\n   \/\/ ...<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n<\/font><\/li>\n<li>check the blog posting wording does not need any manual horizontal scrolling <font color=red> &#8230; the direct result of this analysis is the hard-thought-about &#8220;580&#8221; in <code>  echo \"n #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { width: 580px; } n\"; \/\/ 470px; } <\/code> in code snippet above &#8230; and the windowScrollBy() in &#8230; <code><b>      echo \"n if (1 == 1) { if (document.URL.indexOf('?') != -1) { location.href='#main'; window.scrollBy(36,220);  } else {   window.scrollBy(36,0);  } n\";<br \/>\n<\/b><\/code> &#8230; and all this, along with an &#8220;onload&#8221; intervention strategy in the aforesaidmentioned &#8220;img_alt()&#8221; function mentioned in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=12387' title='CSS Background Colour Usage Primer Tutorial'>CSS Background Colour Usage Primer Tutorial<\/a> as per &#8230; <code><br \/>\nfunction img_alt() {<br \/>\n<b><br \/>\n&lt;?php<br \/>\n    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],\"iPhone\");<br \/>\n    $android = strpos($_SERVER['HTTP_USER_AGENT'],\"Android\");<br \/>\n    $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],\"BlackBerry\");<br \/>\n    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],\"iPod\");<br \/>\n    if ($iphone || $android || $ipod || $blackberry) { \/\/ thanks to http:\/\/www.phpmysqlscript.com\/2012\/03\/detecting-users-screen-size-and.html<br \/>\n      echo \"n if (1 == 1) { if (document.URL.indexOf('?') != -1) { location.href='#main'; window.scrollBy(36,220);  } else {   window.scrollBy(36,0);  } n\";<br \/>\n    } else {<br \/>\n      echo \"n if (1 == 2) { n\";<br \/>\n    }<br \/>\n?><br \/>\n  var ilis, clis;<br \/>\n  var nfo, nfos;<br \/>\n  var lis = document.getElementsByTagName(\"li\");<br \/>\n  for (ilis=0; ilis&lt;lis.length; ilis++) {<br \/>\n    clis = \" \" + lis[ilis].className + \" \";<br \/>\n    if (clis.indexOf(\" page-item-80 \") != -1) {<br \/>\n      lis[ilis].innerHTML = lis[ilis].innerHTML.replace(\/ Statement\/g, \"\");<br \/>\n    } else if (clis.indexOf(\" page-item-189 \") != -1) {<br \/>\n      lis[ilis].innerHTML = lis[ilis].innerHTML.replace(\/One Image Site\/g, \"1Image\");<br \/>\n    } else if (clis.indexOf(\" page-item-366 \") != -1) {<br \/>\n      lis[ilis].innerHTML = lis[ilis].innerHTML.replace(\/All Posts\/g, \"All\");<br \/>\n    }<br \/>\n  }<br \/>\n  lis = document.getElementsByTagName(\"a\");<br \/>\n  for (ilis=0; ilis&lt;lis.length; ilis++) {<br \/>\n    if (lis[ilis].innerHTML.indexOf(\"pink;\") != -1) {<br \/>\n      lis[ilis].innerHTML = lis[ilis].innerHTML.replace(\"pink;\", \"pink;width:180px;\"); \/\/212px;\");<br \/>\n    }<br \/>\n  }<br \/>\n  var h1st = document.getElementById(\"site-title\");<br \/>\n  h1st.style.width = \"250px\"; \/\/\"350px\";<br \/>\n  h1st.style.marginTop = \"-34px\";<br \/>\n  h1st.style.marginLeft = \"20px\";<br \/>\n  h1st = document.getElementById(\"site-description\");<br \/>\n  h1st.style.position = \"absolute\";<br \/>\n  h1st.style.left = \"80px\";<br \/>\n  h1st.style.top = \"35px\";<br \/>\n  h1st.style.fontSize = \"8px\";<br \/>\n  h1st.style.marginLeft = \"36px\"; \/\/\"350px\";<br \/>\n  h1st = document.getElementById(\"site-info\");<br \/>\n  h1st.style.width = \"250px\"; \/\/ \"350px\";<br \/>\n  h1st = document.getElementById(\"mywtoi\");<br \/>\n  if (h1st != null) {<br \/>\n    h1st.style.width = \"190px\"; \/\/\"212px\";<br \/>\n    h1st.style.height = \"254px\"; \/\/\"282px\";<br \/>\n  }<br \/>\n  h1st = document.getElementById(\"content\");<br \/>\n  if (h1st != null) {<br \/>\n    h1st.style.width = \"320px\";<br \/>\n  }<br \/>\n  }<br \/>\n<\/b><br \/>\n  var osf=document.getElementById('marquee-style-rss-news-ticker');<br \/>\n\/\/ ...<br \/>\n\/\/ ...<br \/>\n<\/code><br \/>\n &#8230; resulted in a look like for our tutorial <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/MobileFriendly_Blog.jpg\" title='Click picture'>image<\/a><\/font><\/li>\n<li>check the workings of <i>&#8220;select&#8221;<\/i> tags and check that they function <font color=red> &#8230; any &#8220;window.location=&#8217;blah&#8217;;&#8221; type of code should become &#8220;location.href=&#8217;blah&#8217;;&#8221; &#8230; we talked about this previously with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5781' title='Safari iPad Issue with Window.Open and Window.Location Primer Tutorial'>Safari iPad Issue with Window.Open and Window.Location Primer Tutorial<\/a><\/font><\/li>\n<li>as far as usability goes, for blog calls of particular sets of postings, is there relevance above the fold straight away? <font color=red> &#8230; no &#8230; not good so we made that change that goes <code><b>      echo \"n if (1 == 1) { if (document.URL.indexOf('?') != -1) { location.href='#main'; window.scrollBy(36,250);  } else {   window.scrollBy(36,0);  } n\";<br \/>\n<\/b><\/code> as above<\/font><\/li>\n<li>check out other parts of the domain with links to the blog (maybe via <i>&#8220;select&#8221;<\/i> tags) that they function <font color=red> &#8230; we found &#8220;location.href=&#8217;blah&#8217;;&#8221; issues on the <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/' title='RJM Programming landing page'>landing page<\/a><\/font><\/li>\n<li>keep looking, and using yourself, and see if feedback can help, because you will be unlikely to have all the mobile devices to test out there &#8230; doh! <font color=red> &#8230; any feedback ( or <a href='mailto:rmetcalfe@rjmprogramming.com.au?subject=Feedback%20Regarding%20Wordpress%20Blog%20Mobile%20Phone%20Friendly%20Primer Tutorial%20...%20Thanks%20for%20your%20feedback' title='Feedback email ... thanks'>&#8220;feedback&#8221; email<\/a> or <a title='Email invitation ... thanks' href='mailto:?subject=Trying%20Out%20That%20RJM%20Programming%20Blog%20on%20Your%20Mobile%20Phone...%20&#038;body=Here%20is%20that%20blog%20you%20should%20see%20on%20your%20mobile%20phone%20http:\/\/www.rjmprogramming.com.au\/wordpress%20...%20Feedback%20can%20go%20to%20rmetcalfe@rjmprogramming.com.au%20...%20thanks'>&#8220;email a friend with invitation to try this blog on their mobile&#8221; email<\/a> ) would be greatly appreciated?!<\/font><\/li>\n<\/ul>\n<p>You&#8217;ll see throughout the code snippets the generic usefulness of the great advice from <a target=_blank href='http:\/\/www.phpmysqlscript.com\/2012\/03\/detecting-users-screen-size-and.html' title='Useful link ... thanks'>this link<\/a>.<\/p>\n<p>Of course, it goes without saying, that we would appreciate your feedback, as a comment (or <a title='Feedback email ... thanks' href='mailto:rmetcalfe@rjmprogramming.com.au?subject=Feedback%20Regarding%20Wordpress%20Blog%20Mobile%20Phone%20Friendly%20Primer%20Tutorial%20...%20Thanks%20for%20your%20feedback'>&#8220;feedback&#8221; email<\/a> or <a title='Email invitation ... thanks' href='mailto:?subject=Trying%20Out%20That%20RJM%20Programming%20Blog%20on%20Your%20Mobile%20Phone...%20&#038;body=Here%20is%20that%20blog%20you%20should%20see%20on%20your%20mobile%20phone%20http:\/\/www.rjmprogramming.com.au\/wordpress%20...%20Feedback%20can%20go%20to%20rmetcalfe@rjmprogramming.com.au%20...%20thanks'>&#8220;invitation to a friend to try this blog&#8221; email<\/a> ), of your experience accessing this blog on your mobile phone.  Hope you try it out, and thanks if you do.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>The investigations and analysis of HTML required by this &#8220;DIY&#8221; PHP\/HTML\/CSS were facilitated by the use of the <a target=_blank href='http:\/\/www.mozilla.org\/en-US\/firefox\/new\/' title='Firefox home page'>Firefox<\/a> web browser and a very useful add-on called <a target=_blank title='Firebug home page' href='https:\/\/getfirebug.com\/'>Firebug<\/a> which you may want more information about <a target=_blank title='Firebug tutorials at this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firebug'>here<\/a>, and which is commonly used to debug client-side Javascript and HTML.   As for today&#8217;s usage, Firebug is also extremely useful in deconstructing how a web page was created.   The other simple wonderful tool for this is the web browser&#8217;s equivalent menu command like View->Page Source (or sometimes equivalent of right-click Page Source).   Firebug has a sister product called <a target=_blank title='FirePHP home page' href='http:\/\/www.firephp.org\/'>FirePHP<\/a> which helps debug server-side PHP and Ajax <a target=_blank title='FirePHP tutorials at this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firephp'>work<\/a>.  Please don&#8217;t mind me &#8230; am sold on Firebug with Firefox, but there are many alternatives (eg. Safari and Inspector (built into Safari) via Develop-&gt;Show Web Inspector) &#8230; and there are others (with other web browsers).<\/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='#d13042' onclick='var dv=document.getElementById(\"d13042\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13042' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We would like this WordPress Blog, that has the Twenty Ten theme, to be better adapted for mobile phone use (that being Android, iOS, Blackberry) regarding its look and usability. Several comments on the blog have asked about this, and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-mobile-phone-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":[3,12,20,37],"tags":[51,76,148,151,216,281,327,344,354,438,439,449,576,626,652,680,795,798,932,956,972,997,1019,1198,1319,1345,1456],"class_list":["post-13042","post","type-post","status-publish","format-standard","hentry","category-android","category-elearning","category-ios","category-tutorials","tag-above-the-fold","tag-android","tag-blackberry","tag-blog","tag-cms","tag-css","tag-did-you-know","tag-diy","tag-dom","tag-firebug","tag-firefox","tag-fold","tag-html","tag-ios","tag-javascript","tag-landing-page","tag-mobile","tag-mobile-friendly","tag-php","tag-plugin","tag-posting","tag-programming","tag-query-string","tag-sticky","tag-tutorial","tag-url","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13042"}],"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=13042"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13042\/revisions"}],"predecessor-version":[{"id":25227,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13042\/revisions\/25227"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=13042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=13042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=13042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}