WordPress Filter via Div ID Primer Tutorial
When you use the “modify WordPress theme’s header.php” method of making changes to your WordPress blog functionality, it can be a bit hard to imagine if this same code “plonked” 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’s new “Filter Content via Div ID” functionality (written with Twenty Ten theme in mind) is that we didn’t care about any particular HTML div‘s ID name nor where it was, and that is a good sign for compatibility for other WordPress theme application we figure.
So what are the parts to this new WordPress “Filter Content via Div ID” methodology that all takes place via edits to the WordPress theme’s (equivalent to) header.php file?
- Some HTML put just above </body> …
<div id="justshow" style="position:absolute;top:0;left:0;z-index:23;display:none;"></div> - After any other functionalities, add to the document.body onload event goings-on …
<body onload=" prejustshow();"> - A bit of new Javascript placed before </script> …
function popselid() {
var jdivcont='', jprefix='', jdivs=0, odivs=document.getElementsByTagName('div'), orbit=nojde(document.URL.split('#')[0].replace('/all-posts/filter-content-via-div-id',''));
if (orbit.indexOf('?') != -1) {
orbit=orbit.replace('justsearch=','justdummy=');
} else {
orbit+='?justdummy=';
}
for (var iodivs=0; iodivs<odivs.length; iodivs++) {
if (odivs[iodivs].id) {
if (odivs[iodivs].id != '') {
if (jdivs == 0) {
jdivcont='<select onchange=" if (this.value.length > 0) { justshow(this.value.trim() + ' + "';' + '" + orbit + "' + '&justsearch='" + ' + this.value.trim()); } " id=jdivsel><option value=' + "''" + '>Just show ...</option><option value=' + "' '" + '>All Content ... versus, just ...</option></select>';
}
jdivcont=jdivcont.replace("</select>","<option value='" + odivs[iodivs].id + "'>" + odivs[iodivs].id + "</option></select>");
jdivs++;
}
}
}
if (jdivcont != '') {
document.getElementById('justshow').style.display='block';
document.getElementById('justshow').innerHTML=jdivcont;
jprefix+=document.getElementById('justshow').outerHTML.replace('none','block') + "<br><br>";
}
return jprefix;
}
function postjustshow() {
justshow('');
}
function prejustshow() {
var jush=location.search.split('justsearch=')[1] ? location.search.split('justsearch=')[1].split('&')[0] : '';
if (jush != '') {
setTimeout(postjustshow,3000);
}
}
function justshow(inj) {
var inja, jprefix='', josh=null, jush=location.search.split('justsearch=')[1] ? location.search.split('justsearch=')[1].split('&')[0] : '';
if (jush != '' && document.getElementById('justshow').innerHTML == '') {
josh=document.getElementById(jush);
jprefix+=popselid();
}
if (inj != '') {
inja=inj.split(';');
if (josh) {
jprefix=josh.outerHTML + "<br>";
} else {
josh=document.getElementById(inj.split(';')[0]);
if (inja.length > 1) {
location.href=inja[1];
}
}
}
if (josh) {
document.body.innerHTML='<br><a target=_self href="' + document.URL.replace('justsearch=','justdummy=') + '" title=" Full ' + document.URL.replace('justsearch=','justdummy=') + '">Restore Full ' + document.URL.replace('justsearch=','justdummy=') + '</a><br><br>' + jprefix + josh.outerHTML + '<br><a target=_self href="' + document.URL.replace('justsearch=','justdummy=') + '" title="Restore Full ' + document.URL.replace('justsearch=','justdummy=') + '">' + document.URL.replace('justsearch=','justdummy=') + '</a>';
}
}
- Two means of making the Div ID List Dropdown appear overlaying other non-admin HTML elements up the top left of the webpage are …
- Of far more practical use, we find, is the Emoji button we place after the blog title …
<a onclick="popselid();" title="Filter Content via Div ID" style="cursor:pointer;text-decoration:none;">➗</a>
… and past the Video Emoji, that when clicked or tapped, shows this new (HTML select element) dropdown … and we also have … - Menu item off All Posts called “Filter Content via Div ID” can also show this new dropdown element, and today’s tutorial picture 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’ll notice … we hope?!
- Of far more practical use, we find, is the Emoji button we place after the blog title …
So, you are where you can try this, with that divISION … chortle, chortle … Emoji up the top, or you can try it here and now with ➗ … 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.
If this was interesting you may be interested in this too.
