{"id":35544,"date":"2018-01-14T03:02:10","date_gmt":"2018-01-13T17:02:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35544"},"modified":"2018-03-03T22:14:49","modified_gmt":"2018-03-03T12:14:49","slug":"wordpress-blog-posting-content-summary-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-posting-content-summary-primer-tutorial\/","title":{"rendered":"WordPress Blog Posting Content Summary Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?detailssummary=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Blog Posting Content Summary Primer Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/detailssummary.jpg\" title=\"WordPress Blog Posting Content Summary Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">WordPress Blog Posting Content Summary Primer Tutorial<\/p><\/div>\n<p>We really like <a target=_blank title='WordPress.org ... your hosting' href='http:\/\/www.wordpress.org'>WordPress<\/a>.org for the basis of this blog&#8217;s design (and recognize <a target=_blank title='WordPress.org ... your hosting' href='http:\/\/www.wordpress.com'>WordPress.com<\/a> as a great idea for those not wanting to host their own Apache\/PHP\/MySql domain).  And am sure you would not be surprised that I am not alone.  Take a read of the excellent <a target=_blank title='WordPress information' href='https:\/\/websitebuilder.org\/resources\/amazing-facts-you-probably-dont-know-about-wordpress\/'>WordPress information<\/a> by <a target=_blank title='Websitebuilder.org ... thanks to Josh Wardini' href='http:\/\/www.websitebuilder.org'>Websitebuilder.org<\/a> and, reading closely, you&#8217;ll see how popular this blogging platform is, and mention of a number of famous people using it.<\/p>\n<p>I&#8217;ve never had much trouble with WordPress, so, not all the time, but occasionally, I tweak it.  For this, we suggest, as WordPress would, to use their <a target=_blank title='WordPress Codex' href='https:\/\/codex.wordpress.org'>Codex<\/a> PHP (with MySql) coding advice, and on a personal level, though, you&#8217;ll see, reading this blog, that we also like the direct approach of, mainly, changing the header.php PHP code that sits in, for our case of a theme called TwentyTen (&#8220;twentyten&#8221; in lowercase) &#8230;<\/p>\n<p><code><br \/>\n[documentRootOfWordPressWebsite]\/wp-content\/themes\/twentyten\/<br \/>\n<\/code><\/p>\n<p>Today&#8217;s tweak of header.php relates to a matter dear to our hearts.  The desire to cater for mobile users with small screens, yet not be dumbing blog posting content down just for the sake of it.  Today we channel just about our favourite <a target=_blank title='blank title='Reveal tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>reveal<\/a> based idea you can read more about at <a target=_blank title='HTML5 Details Summary Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-details-summary-primer-tutorial\/'>HTML5 Details Summary Primer Tutorial<\/a> to harness the goodies that came with <a target=_blank title='HTML5 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/HTML5'>HTML5<\/a> in the form of the &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a> tag &#8230; and its nested &#8230;<\/li>\n<li><a target=_blank title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>summary<\/a><\/li>\n<\/ul>\n<p>Implementing this in header.php went like this &#8230;<\/p>\n<ol>\n<li>added <b>into<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;body onload=\" changeasfordownload();  if (cafd == cafd) { cafd=0; } else { cafd=true; }  checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies();  cookie_fonts(); is_mentioned_by(); calendar_pass(); prejustshow(); <b>details_summary(0);<\/b>\"&gt;<br \/>\n<\/code>\n<\/li>\n<li>added a new <b>emoji button<\/b> up near the top &#8230;<br \/>\n<code><br \/>\n    document.getElementById('site-title').innerHTML+='&lt;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)\"&gt;&amp;#127910;&lt;\/a&gt;&nbsp;&lt;a style=\"cursor:pointer;text-decoration:none;\" onclick=\"popselid();\" title=\"Filter Content via Div ID\"&gt;&amp;#10135;&lt;\/a&gt;<b>&nbsp;&lt;a style=\"cursor:pointer;text-decoration:none;visibility:hidden;\" title=\"Blog post contents reduced to summary\" id=\"eds\" onclick=\"pre_details_summary();\"&gt;&amp;#10134;&lt;\/a&gt;<\/b>' + printscreen(0);<br \/>\n<\/code>\n<\/li>\n<li>then added these <b>two new Javascript functions<\/b> to suit those events defined above &#8230;<br \/>\n<code><br \/>\n<b><br \/>\nfunction pre_details_summary() {<br \/>\n  var idos=0,dos=[];<br \/>\n  if (('' + document.getElementById(\"eds\").title) == 'Blog post contents reduced to summary') {<br \/>\n  if (document.body.innerHTML.indexOf('&lt;summary&gt;&lt;\/summary&gt;') == -1) {<br \/>\n    details_summary(1);<br \/>\n  } else {<br \/>\n    dos=document.getElementsByTagName('details');<br \/>\n    for (idos=0; idos&lt;dos.length; idos++) {<br \/>\n     if (dos[idos].className == \"gendetails\") {<br \/>\n      dos[idos].removeAttribute('open');<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n  document.getElementById(\"eds\").innerHTML = \"&amp;#10133;\";<br \/>\n  document.getElementById(\"eds\").title = \"Open up blog posting contents now\";<br \/>\n  } else {<br \/>\n    dos=document.getElementsByTagName('details');<br \/>\n    for (idos=0; idos&lt;dos.length; idos++) {<br \/>\n     if (dos[idos].className == \"gendetails\") {<br \/>\n      dos[idos].setAttribute('open', true);<br \/>\n     }<br \/>\n    }<br \/>\n  document.getElementById(\"eds\").innerHTML = \"&amp;#10134;\";<br \/>\n  document.getElementById(\"eds\").title = \"Blog post contents reduced to summary\";<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction details_summary(mou) {<br \/>\n  var dbitssare=document.body.innerHTML.split('&lt;div class=\"entry-content\"&gt;');<br \/>\n  var dbitseare=document.body.innerHTML.split('&lt;div class=\"entry-utility\"&gt;');<br \/>\n  if (document.URL.indexOf('detailssummary=') != -1 || mou != 0) {<br \/>\n    if (dbitssare.length &gt; 1 && dbitssare.length == dbitseare.length) {<br \/>\n      var dbih=document.body.innerHTML, idbih=1;<br \/>\n      for (var idb=0; idb&lt;dbitssare.length; idb++) {<br \/>\n        if (('' + dbitssare[eval(1 + idb)]).indexOf('&lt;p&gt;') != -1) {<br \/>\n        if (('' + dbitssare[eval(1 + idb)]).split('&lt;p&gt;')[idbih].split('&lt;\/p&gt;')[0] == '') {<br \/>\n          if (('' + dbitssare[eval(1 + idb)]).split('&lt;p&gt;').length &gt;= eval(1 + eval(idbih))) {<br \/>\n            idbih++;<br \/>\n          }<br \/>\n        }<br \/>\n        dbih=dbih.replace('&lt;div class=\"entry-content\"&gt;','&lt;details class=\"gendetails\" title=\"Click me to toggle open\/close ... ' + ('' + dbitssare[eval(1 + idb)]).split('&lt;p&gt;')[idbih].split('&lt;\/p&gt;')[0].replace(\/\\'\/g,'`').replace(\/\\\"\/g,'`').replace(\/\\&gt;\/g,'&gt;').replace(\/\\&lt;\/g,'&lt;') + '\"&gt;&lt;summary&gt;&lt;\/summary&gt;&lt;div title=\"entry-content\" class=\"entry-content\"&gt;');<br \/>\n        } else {<br \/>\n        dbih=dbih.replace('&lt;div class=\"entry-content\"&gt;','&lt;details class=\"gendetails\" title=\"Click me to toggle open\/close\"&gt;&lt;summary&gt;&lt;\/summary&gt;&lt;div title=\"entry-content\" class=\"entry-content\"&gt;');<br \/>\n        }<br \/>\n        dbih=dbih.replace('&lt;div class=\"entry-utility\"&gt;','&lt;\/details&gt;&lt;div title=\"entry-utility\" class=\"entry-utility\"&gt;');<br \/>\n      }<br \/>\n      document.body.innerHTML=dbih;<br \/>\n    }<br \/>\n    if (document.URL.indexOf('detailssummary=') != -1 && mou == 0) {<br \/>\n    document.getElementById(\"eds\").innerHTML = \"&amp;#10133;\";<br \/>\n    document.getElementById(\"eds\").title = \"Open up blog posting contents now\";<br \/>\n    document.getElementById(\"eds\").style.visibility='visible';<br \/>\n    }<br \/>\n  } else if (mou == 0 && dbitssare.length &gt; 1 && dbitssare.length == dbitseare.length) {<br \/>\n    document.getElementById(\"eds\").style.visibility='visible';<br \/>\n  }<br \/>\n}<br \/>\n<\/b><br \/>\n<\/code>\n<\/ol>\n<p>Of course, this is most of benefit when you are <a target=_blank title='WordPress blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?detailssummary=y'>not already honing in on the one WordPress blog posting<\/a>, but there&#8217;s more fun to come, we reckon!<\/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='#d35544' onclick='var dv=document.getElementById(\"d35544\"); 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='d35544' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We really like WordPress.org for the basis of this blog&#8217;s design (and recognize WordPress.com as a great idea for those not wanting to host their own Apache\/PHP\/MySql domain). And am sure you would not be surprised that I am not &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-posting-content-summary-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,14,37],"tags":[85,151,257,2310,355,385,572,576,578,827,932,972,997,1063,2311,1319,1324,1325,1421],"class_list":["post-35544","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-apache","tag-blog","tag-content","tag-details","tag-domain","tag-emoji","tag-hosting","tag-html","tag-html5","tag-mysql","tag-php","tag-posting","tag-programming","tag-reveal","tag-summary","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-website"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35544"}],"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=35544"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35544\/revisions"}],"predecessor-version":[{"id":36568,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35544\/revisions\/36568"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}