WordPress Responsive TwentyTen Primer Tutorial
The blog you are reading got a makeover today. We installed an excellent WordPress Plugin called “Responsive TwentyTen” by Todd Halfpenny that …
Makes your TwentyTen themed site have a responsive and fluid layout. Making it ideal for for viewing across a whole range of devices and screen sizes (i.e iPhones, Android, iPads)
… and our verdict is, even on the WordPress 4.1.1 version of the WordPress Blog the plugin was not tested on, it improves the smaller screen mobile device look of the blog considerably, so thanks a lot.
Sometimes with responsive design that you test on a non-mobile laptop, you’ll see a different pattern of TLS Handshaking going on in the status bar of your web browser, and we certainly see that happening here.
While we were at it, some heights and widths involving “px” (pixel) settings we’ve stopped happening for the smaller mobile devices.
The other implication for this blog is that we no longer use the stylesheet of the Twenty Fifteen theme anymore … goodbye 15 hello 10.
We’ve also turned off some scrolling we used to do on the mobile platforms, now that the content “above the fold” is controlled so much better.
We hope you like the changes, as shown below in “diff” form.
# diff header.php header_preplugin.php
180c180
< <link rel="stylesheet" type="text/css" media="all" href="<?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 (1 == 2 && ($ipad || $iphone || $android || $ipod || $blackberry)) { echo '//www.rjmprogramming.com.au/ITblog/wp-content/themes/twentyfifteen/style.css'; } else { bloginfo( 'stylesheet_url' ); } ?>" />
---
> <link rel="stylesheet" type="text/css" media="all" href="<?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 '//www.rjmprogramming.com.au/ITblog/wp-content/themes/twentyfifteen/style.css'; } else { bloginfo( 'stylesheet_url' ); } ?>" />
1421c1421
< if (partopokay != "" && 1 == 7) {
---
> if (partopokay != "") {
1778d1777
< if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
1779a1779
>
1800,1804d1799
<
<
< }
<
<
2329,2338d2323
< function mlater() {
< if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
< var xstih=document.getElementById('site-title').innerHTML;
< if (xstih.indexOf("up" + "top") == -1) {
< document.getElementById('site-title').innerHTML+='<a id="avs" style="text-decoration:none;font-size:40px;" href=# onmouseover="getVisualSynopsis(event);" onmouseout="yehbut();" ontouchstart="getVisualSynopsis(event);" ontouchend="yehbut();" onclick=" uptop(); " title="... you can wait for the long hover functionality about Visual Synopsis (Slideshows)">🎦</a> <a style="cursor:pointer;text-decoration:none;font-size:40px;" onclick="popselid();" title="Filter Content via Div ID">➗</a> <a style="cursor:pointer;text-decoration:none;visibility:hidden;font-size:40px;" title="Blog post contents reduced to summary" id="eds" onclick="pre_details_summary();">➖</a>' + printscreen(0);
< if (document.URL.indexOf("visualsynopsis=") != -1) document.getElementById('avs').click();
< }
< }
< }
<
2340,2341d2324
< if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
< mlater();
2344,2347d2326
< } else {
< img_alt(); // Make sure all img have alt (=title)
< mlater();
< }
2360,2363d2338
< if (1 == 1) {
< setTimeout(mlater,2000);
< } else {
< if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
2366c2341
< document.getElementById('site-title').innerHTML+='<a id="avs" style="text-decoration:none;font-size:40px;" href=# onmouseover="getVisualSynopsis(event);" onmouseout="yehbut();" ontouchstart="getVisualSynopsis(event);" ontouchend="yehbut();" onclick=" uptop(); " title="... you can wait for the long hover functionality about Visual Synopsis (Slideshows)">🎦</a> <a style="cursor:pointer;text-decoration:none;font-size:40px;" onclick="popselid();" title="Filter Content via Div ID">➗</a> <a style="cursor:pointer;text-decoration:none;visibility:hidden;font-size:40px;" title="Blog post contents reduced to summary" id="eds" onclick="pre_details_summary();">➖</a>' + printscreen(0);
---
> document.getElementById('site-title').innerHTML+='<a id="avs" style="text-decoration:none;" href=# onmouseover="getVisualSynopsis(event);" onmouseout="yehbut();" ontouchstart="getVisualSynopsis(event);" ontouchend="yehbut();" onclick=" uptop(); " title="... you can wait for the long hover functionality about Visual Synopsis (Slideshows)">🎦</a> <a style="cursor:pointer;text-decoration:none;" onclick="popselid();" title="Filter Content via Div ID">➗</a> <a style="cursor:pointer;text-decoration:none;visibility:hidden;" title="Blog post contents reduced to summary" id="eds" onclick="pre_details_summary();">➖</a>' + printscreen(0);
2368,2369d2342
< }
< }
3531c3504
< ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(isbnis, "<a target=_blank title='ISBN lookup' href='HTTP://www.lookupbyisbn.com/Search/Book/" + isbnis.replace(/\-/g,'') + "/1'>(" + isbnis + ")</a>");
---
> ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(isbnis, "<a target=_blank title='ISBN lookup' href='HTTP://www.lookupbyisbn.com/Search/Book/" + isbnis.replace(/\-/g,'') + "/1'>" + isbnis + "</a>");
Feel free to leave comments as you wish!
Did you know?
Installing Plugins on WordPress is pretty easy, as long as you’ve done the research into whether your WordPress version and WordPress theme support the plugin. Like all WordPress configuration steps start, the procedure starts with …
- Login to the WordPress website you administer at the URL …
https://[UrlOfWordPressHomePage]/wp-admin
… and correctly enter in your WordPress administration user username and password … then … - at the WordPress admin area Dashboard page, often down the left there are menus and perhaps one says “Plugin” or has a plug icon, so click/touch this …
- in the menu select Add New …
- enter into the “Search Plugins” textbox words to find your plugin of interest, that being “Responsive TwentyTen” for us, and then click the “Search Plugins” button …
- we clicked the Details link to find out more (or you could just click the “Install” link) and then click the “Install Now” button if you are satisfied …
- if all went well a new webpage opens and you can click the “Activate” link there to make the plugin’s functionality live
- to see the results the WordPress website at the URL …
https://[UrlOfWordPressHomePage]/
… will be using the new plugin’s functionality
If this was interesting you may be interested in this too.
