{"id":27592,"date":"2017-01-17T03:01:45","date_gmt":"2017-01-16T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27592"},"modified":"2017-01-16T14:18:25","modified_gmt":"2017-01-16T04:18:25","slug":"wordpress-filter-via-div-id-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-filter-via-div-id-primer-tutorial\/","title":{"rendered":"WordPress Filter via Div ID Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wp-content\/themes\/twentyten\/filter_content_via_div_id.JPG\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Filter via Div ID Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wp-content\/themes\/twentyten\/filter_content_via_div_id.JPG\" title=\"WordPress Filter via Div ID Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Filter via Div ID Primer Tutorial<\/p><\/div>\n<p>When you use the &#8220;modify WordPress theme&#8217;s header.php&#8221; method of making changes to your <a target=_blank title='WordPress.org' href='http:\/\/wordpress.org'>WordPress<\/a> blog functionality, it can be a bit hard to imagine if this same code &#8220;plonked&#8221; into the equivalent to header.php, for that other theme, would work there as well.  One thing we can say about it, with respect to today&#8217;s new &#8220;Filter Content via Div ID&#8221; functionality (written with Twenty Ten theme in mind) is that we didn&#8217;t care about any particular HTML <i>div<\/i>&#8216;s ID name nor where it was, and that is a good sign for compatibility for other WordPress theme application we figure.<\/p>\n<p>So what are the parts to this new WordPress &#8220;Filter Content via Div ID&#8221; methodology that all takes place via edits to the WordPress theme&#8217;s (equivalent to) <i>header.php<\/i> file?<\/p>\n<ul>\n<li>Some HTML put just above &lt;\/body&gt; &#8230;<br \/>\n<code>&lt;div id=\"justshow\" style=\"position:absolute;top:0;left:0;z-index:23;display:none;\"&gt;&lt;\/div&gt;<\/code>\n<\/li>\n<li>After any other functionalities, <b>add<\/b> to the document.body onload event goings-on &#8230;<br \/>\n<code>&lt;body onload=\"        <b>prejustshow();<\/b>\"&gt;<\/code>\n<\/li>\n<li>A bit of new Javascript placed before &lt;\/script&gt; &#8230;<br \/>\n<code><br \/>\nfunction popselid() {<br \/>\n    var jdivcont='', jprefix='', jdivs=0, odivs=document.getElementsByTagName('div'), orbit=nojde(document.URL.split('#')[0].replace('\/all-posts\/filter-content-via-div-id',''));<br \/>\n    if (orbit.indexOf('?') != -1) {<br \/>\n       orbit=orbit.replace('justsearch=','justdummy=');<br \/>\n     } else {<br \/>\n       orbit+='?justdummy=';<br \/>\n     }<br \/>\n     for (var iodivs=0; iodivs&lt;odivs.length; iodivs++) {<br \/>\n        if (odivs[iodivs].id) {<br \/>\n          if (odivs[iodivs].id != '') {<br \/>\n            if (jdivs == 0) {<br \/>\n             jdivcont='&lt;select onchange=\" if (this.value.length &gt; 0) { justshow(this.value.trim() + ' + \"';' + '\" + orbit + \"' + '&justsearch='\" + ' + this.value.trim());  } \" id=jdivsel&gt;&lt;option value=' + \"''\" + '&gt;Just show ...&lt;\/option&gt;&lt;option value=' + \"' '\" + '&gt;All Content ... versus, just ...&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n            }<br \/>\n            jdivcont=jdivcont.replace(\"&lt;\/select&gt;\",\"&lt;option value='\" + odivs[iodivs].id + \"'&gt;\" + odivs[iodivs].id + \"&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n            jdivs++;<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n     if (jdivcont != '') {<br \/>\n        document.getElementById('justshow').style.display='block';<br \/>\n        document.getElementById('justshow').innerHTML=jdivcont;<br \/>\n        jprefix+=document.getElementById('justshow').outerHTML.replace('none','block') + \"&lt;br&gt;&lt;br&gt;\";<br \/>\n     }<br \/>\n     return jprefix;<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction postjustshow() {<br \/>\n  justshow('');<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction prejustshow() {<br \/>\n  var jush=location.search.split('justsearch=')[1] ? location.search.split('justsearch=')[1].split('&')[0] : '';<br \/>\n  if (jush != '') {<br \/>\n    setTimeout(postjustshow,3000);<br \/>\n  }<br \/>\n}<br \/>\n<b><\/b><br \/>\nfunction justshow(inj) {<br \/>\n  var inja, jprefix='', josh=null, jush=location.search.split('justsearch=')[1] ? location.search.split('justsearch=')[1].split('&')[0] : '';<br \/>\n  if (jush != '' && document.getElementById('justshow').innerHTML == '') {<br \/>\n   josh=document.getElementById(jush);<br \/>\n   jprefix+=popselid();<br \/>\n  }<br \/>\n  if (inj != '') {<br \/>\n   inja=inj.split(';');<br \/>\n   if (josh) {<br \/>\n     jprefix=josh.outerHTML + \"&lt;br&gt;\";<br \/>\n   } else {<br \/>\n     josh=document.getElementById(inj.split(';')[0]);<br \/>\n     if (inja.length &gt; 1) {<br \/>\n       location.href=inja[1];<br \/>\n     }<br \/>\n   }<br \/>\n  }<br \/>\n  if (josh) {<br \/>\n   document.body.innerHTML='&lt;br&gt;&lt;a target=_self href=\"' + document.URL.replace('justsearch=','justdummy=') + '\" title=\" Full ' + document.URL.replace('justsearch=','justdummy=') + '\"&gt;Restore Full ' + document.URL.replace('justsearch=','justdummy=') + '&lt;\/a&gt;&lt;br&gt;&lt;br&gt;' + jprefix + josh.outerHTML + '&lt;br&gt;&lt;a target=_self href=\"' + document.URL.replace('justsearch=','justdummy=') + '\" title=\"Restore Full ' + document.URL.replace('justsearch=','justdummy=') + '\"&gt;' + document.URL.replace('justsearch=','justdummy=') + '&lt;\/a&gt;';<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>Two means of making the <i>Div ID List Dropdown<\/i> appear overlaying other non-admin HTML elements up the top left of the webpage are &#8230;\n<ol>\n<li>Of far more practical use, we find, is the <i>Emoji button<\/i> we place after the blog title &#8230;<br \/>\n<code>&lt;a onclick=\"popselid();\" title=\"Filter Content via Div ID\" style=\"cursor:pointer;text-decoration:none;\"&gt;&amp;#10135;&lt;\/a&gt;<\/code><br \/>\n &#8230; and past the Video Emoji, that when clicked or tapped, shows this new (HTML select element) dropdown &#8230; and we also have &#8230;<\/li>\n<li>Menu item off All Posts called &#8220;Filter Content via Div ID&#8221; can also show this new dropdown element, and today&#8217;s <a target=_blank title='Tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wp-content\/themes\/twentyten\/filter_content_via_div_id.JPG'>tutorial picture<\/a> shows us setting this up, referencing details about the WordPress Permalink URL mentioned just above where you are editing the webpage, that got you to this menu, you&#8217;ll notice &#8230; we hope?!\n<\/ol>\n<\/li>\n<\/ul>\n<p>So, you are where you can try this, with that <i>div<\/i>ISION &#8230; <font size=1>chortle, chortle<\/font> &#8230; Emoji up the top, or you can try it here and now with <a onclick=\"popselid(); window.scrollTo(0,0); \" title=\"Filter Content via Div ID\" style=\"cursor:pointer;text-decoration:none;\">&#10135;<\/a> &#8230; hope you like it for this functionality, as well as the fact you can learn a bit about the innards of your WordPress theme, if you apply the logic above to your own WordPress blog scenario.<\/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='#d27592' onclick='var dv=document.getElementById(\"d27592\"); 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='d27592' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When you use the &#8220;modify WordPress theme&#8217;s header.php&#8221; method of making changes to your WordPress blog functionality, it can be a bit hard to imagine if this same code &#8220;plonked&#8221; into the equivalent to header.php, for that other theme, would &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-filter-via-div-id-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,342,354,367,385,576,652,932,997,1866,1319,1324,1325,1456],"class_list":["post-27592","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-div","tag-dom","tag-dropdown","tag-emoji","tag-html","tag-javascript","tag-php","tag-programming","tag-select","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27592"}],"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=27592"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27592\/revisions"}],"predecessor-version":[{"id":27603,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27592\/revisions\/27603"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}