{"id":16598,"date":"2015-08-15T05:01:38","date_gmt":"2015-08-14T19:01:38","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=16598"},"modified":"2015-08-15T17:28:43","modified_gmt":"2015-08-15T07:28:43","slug":"wordpress-highlighted-search-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-highlighted-search-primer-tutorial\/","title":{"rendered":"WordPress Highlighted Search Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/HighlightedSearch.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Highlighted Search Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/HighlightedSearch.jpg\" title=\"WordPress Highlighted Search Primer Tutorial\"    \/><\/a><p class=\"wp-caption-text\">WordPress Highlighted Search Primer Tutorial<\/p><\/div>\n<p>We talked recently about this WordPress blog&#8217;s Search functionality, and thought we&#8217;d finished, but at the risk of saying <a target=_blank title=\"but there's more\" href=\"http:\/\/www.youtube.com\/watch?v=iiATDMHU7gc\">&#8220;but there&#8217;s more&#8221;<\/a> &#8230; well &#8230; there&#8217;s more.<\/p>\n<p>When we use the search functionality, sometimes it is specific words of interest we search for, and would like the Search results to highlight those words, so we&#8217;re going to do that functionality today with this WordPress blog.<\/p>\n<p>As per usual with our WordPress TwentyTen blog, it is header.php that changes (as we&#8217;ll show later, below), and adds some additional functionality with what was left off with, with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-search-within-search-overlay-tutorial\/' title='WordPress Blog Search Within Search Overlay Tutorial'>WordPress Blog Search Within Search Overlay Tutorial<\/a><\/p>\n<p>So, in general terms, what was involved with the change?<\/p>\n<ul>\n<li>the bit that could easily be unit tested, so was, was to add another $_GET[&#8216;highlight&#8217;] get parameter to the blog URLs indicating that one of these &#8220;highlighting&#8221; sessions was happening &#8230; which used the new Javascript functions &#8230;\n<ol>\n<li>function iltcwindowopen() &#8230; to allow for a delayed window.open() &#8230; so that the user will lob onto the &#8220;highlighted&#8221; webpage by preference<\/li>\n<li>function testih(insis, infis, defis) &#8230; to test that with HTML element span, p, a, h1 that are tested via Javascript DOM method document.getElementsByTagName() that the wording appears as wording, and not in the wording of the HTML element&#8217;s properties<\/li>\n<li>function highlighttest() &#8230; called by the new HTML a tag we discuss later, and calls iltcwindowopen via setTimeout to delay the window.open enough to make sure the new webpage gets the focus, as previously alluded to<\/li>\n<li>function highlightsearch() &#8230; looks through the current webpage for instances of the &#8220;highlight&#8221; search string of interest, as arranged by today&#8217;s modified PHP (in header.php) &#8230;<\/li>\n<\/ol>\n<\/li>\n<li>within the Javascript function precc() (set up by <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-search-within-search-overlay-tutorial\/' title='WordPress Blog Search Within Search Overlay Tutorial'>WordPress Blog Search Within Search Overlay Tutorial<\/a>) which is called by the blog&#8217;s HTML body element&#8217;s onload event, we determine, via PHP whether the $_GET[&#8216;highlight&#8217;] is defined, and proceed to arrange the Javascript call to highlightsearch() via setTimeout (so there is a small delay for other functionality to complete)<\/li>\n<\/ul>\n<p> &#8230; this could be unit tested via test involving URLs with &#8220;?highlight=[searchString]&#8221; until programmer happiness is found &#8230; and so it came to pass &#8230; and then &#8230; yo &#8230; behold &#8230; we &#8230;<\/p>\n<ul>\n<li>made the &#8220;h&#8221; in our search radio button label of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-search-within-search-overlay-tutorial\/' title='WordPress Blog Search Within Search Overlay Tutorial'>WordPress Blog Search Within Search Overlay Tutorial<\/a> now be an HTML a tag that doesn&#8217;t use the Search form workings but, instead, analyzes the situation for whether a &#8220;highlighted&#8221; Search is viable, and if it is, simulate what the Search form would have done, except that a new webpage is created for this new &#8220;highlighted&#8221; Search webpage &#8230; and make sure there is a meaningful title that will show when a non-mobile user hovers over this &#8220;h&#8221;<\/li>\n<\/ul>\n<p>So we need to show you the changes additional (and reliant on <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-search-within-search-overlay-tutorial\/' title='WordPress Blog Search Within Search Overlay Tutorial'>WordPress Blog Search Within Search Overlay Tutorial<\/a> &#8230; though it would be easy for it not to be reliant on it) in <b><i><font color='teal'>teal bold itallic<\/font><\/b><\/i> (the new bits from before are just <b>bold<\/b>) below &#8230;<\/p>\n<p><code><br \/>\n<b><i><br \/>\n<font color='teal'><br \/>\nvar inlook=\"\", inlooki=0, inlooku=\"\";<br \/>\nfunction iltcwindowopen() {<br \/>\n  window.open(inlooku, '_blank');<br \/>\n}<br \/>\nfunction testih(insis, infis, defis) {<br \/>\n var retis=defis;<br \/>\n for (var ijh=infis; ijh&gt;=0; ijh--) {<br \/>\n   if (insis.substring(ijh, eval(1 + ijh)) == '&gt;') {<br \/>\n     inlooki++;<br \/>\n     return defis;<br \/>\n   }<br \/>\n   if (insis.substring(ijh, eval(1 + ijh)) == '&lt;') return '';<br \/>\n }<br \/>\n inlooki++;<br \/>\n return defis;<br \/>\n}<br \/>\nfunction highlighttest() {<br \/>\n var sis=document.getElementById('s').value;<br \/>\n if (sis != '') {<br \/>\n  var sisa=document.getElementById('searchform').action;<br \/>\n  inlooku=sisa + \"?s=\" + encodeURIComponent(sis) + \"&highlight=\";<br \/>\n  setTimeout(iltcwindowopen, 2000);<br \/>\n  \/\/window.open(sisa + \"?s=\" + encodeURIComponent(sis) + \"&highlight=\", \"_blank\");<br \/>\n }<br \/>\n}<br \/>\nfunction highlightsearch() {<br \/>\n var imb, ifound, spare, spare2, startfrom, atwo, atwodelim, athree, sprefix=\"&lt;font color=orange&gt;\", ssuffix;<br \/>\n if (inlook != \"\") {<br \/>\n  var pspana=document.getElementsByTagName(\"a\");<br \/>\n  for (imb=0; imb&lt;pspana.length; imb++) {<br \/>\n   if (pspana[imb].innerHTML.indexOf(inlook) != -1) {<br \/>\n     spare=pspana[imb].innerHTML;<br \/>\n     spare2=spare;<br \/>\n     startfrom=0;<br \/>\n     ifound=spare.substring(startfrom).indexOf(inlook);<br \/>\n     while (ifound != -1) {<br \/>\n       \/\/alert(\"pre \" + spare);<br \/>\n       ssuffix=testih(spare2, ifound, \"&lt;\/font&gt;\");<br \/>\n       spare=spare2.substring(0,ifound) + ssuffix.replace(\"&lt;\/font&gt;\", sprefix.replace(\"font col\", \"font id='fc\" + inlooki + \"' col\")) + \"youllneverfind_this\" + ssuffix + spare2.substring(ifound + inlook.length);<br \/>\n       \/\/alert(spare);<br \/>\n       ifound=spare.substring(startfrom).indexOf(inlook);<br \/>\n       spare2=spare;<br \/>\n     }<br \/>\n     pspana[imb].innerHTML=spare.replace(\/youllneverfind_this\/g, inlook);<br \/>\n   }<br \/>\n  }<br \/>\n  pspana=document.getElementsByTagName(\"span\");<br \/>\n  for (imb=0; imb&lt;pspana.length; imb++) {<br \/>\n   if (pspana[imb].innerHTML.indexOf(inlook) != -1) {<br \/>\n     spare=pspana[imb].innerHTML;<br \/>\n     spare2=spare;<br \/>\n     startfrom=0;<br \/>\n     ifound=spare.substring(startfrom).indexOf(inlook);<br \/>\n     while (ifound != -1) {<br \/>\n       \/\/alert(\"pre \" + spare);<br \/>\n       ssuffix=testih(spare2, ifound, \"&lt;\/font&gt;\");<br \/>\n       spare=spare2.substring(0,ifound) + ssuffix.replace(\"&lt;\/font&gt;\", sprefix.replace(\"font col\", \"font id='fc\" + inlooki + \"' col\")) + \"youllneverfind_this\" + ssuffix + spare2.substring(ifound + inlook.length);<br \/>\n       \/\/alert(spare);<br \/>\n       ifound=spare.substring(startfrom).indexOf(inlook);<br \/>\n       spare2=spare;<br \/>\n     }<br \/>\n     pspana[imb].innerHTML=spare.replace(\/youllneverfind_this\/g, inlook);<br \/>\n   }<br \/>\n  }<br \/>\n  pspana=document.getElementsByTagName(\"h1\");<br \/>\n  for (imb=0; imb&lt;pspana.length; imb++) {<br \/>\n   if (pspana[imb].innerHTML.indexOf(inlook) != -1) {<br \/>\n     spare=pspana[imb].innerHTML;<br \/>\n     spare2=spare;<br \/>\n     startfrom=0;<br \/>\n     ifound=spare.substring(startfrom).indexOf(inlook);<br \/>\n     while (ifound != -1) {<br \/>\n       \/\/alert(\"pre \" + spare);<br \/>\n       ssuffix=testih(spare2, ifound, \"&lt;\/font&gt;\");<br \/>\n       spare=spare2.substring(0,ifound) + ssuffix.replace(\"&lt;\/font&gt;\", sprefix.replace(\"font col\", \"font id='fc\" + inlooki + \"' col\")) + \"youllneverfind_this\" + ssuffix + spare2.substring(ifound + inlook.length);<br \/>\n       \/\/alert(spare);<br \/>\n       ifound=spare.substring(startfrom).indexOf(inlook);<br \/>\n       spare2=spare;<br \/>\n     }<br \/>\n     pspana[imb].innerHTML=spare.replace(\/youllneverfind_this\/g, inlook);<br \/>\n   }<br \/>\n  }<br \/>\n  pspana=document.getElementsByTagName(\"p\");<br \/>\n  for (imb=0; imb&lt;pspana.length; imb++) {<br \/>\n   if (pspana[imb].innerHTML.indexOf(inlook) != -1) {<br \/>\n     spare=pspana[imb].innerHTML;<br \/>\n     spare2=spare;<br \/>\n     startfrom=0;<br \/>\n     ifound=spare.substring(startfrom).indexOf(inlook);<br \/>\n     while (ifound != -1) {<br \/>\n       \/\/alert(\"pre \" + spare);<br \/>\n       ssuffix=testih(spare2, ifound, \"&lt;\/font&gt;\");<br \/>\n       spare=spare2.substring(0,ifound) + ssuffix.replace(\"&lt;\/font&gt;\", sprefix.replace(\"font col\", \"font id='fc\" + inlooki + \"' col\")) + \"youllneverfind_this\" + ssuffix + spare2.substring(ifound + inlook.length);<br \/>\n       \/\/alert(spare);<br \/>\n       ifound=spare.substring(startfrom).indexOf(inlook);<br \/>\n       spare2=spare;<br \/>\n     }<br \/>\n     pspana[imb].innerHTML=spare.replace(\/youllneverfind_this\/g, inlook);<br \/>\n   }<br \/>\n  }<br \/>\n  pspana=docgetclass(\"entry-title\", \"h2\");<br \/>\n  for (imb=0; imb&lt;pspana.length; imb++) {<br \/>\n   spare=pspana[imb].innerHTML;<br \/>\n   atwo=spare.split(\"href=\");<br \/>\n   if (atwo.length &gt; 1) {<br \/>\n     atwodelim=atwo[1].substring(0,1);<br \/>\n     athree=atwo[1].substring(1).split(atwodelim);<br \/>\n     if (athree[0].indexOf(\"?\") == -1 && athree[0].indexOf(\"highlight=\") == -1) {<br \/>\n      spare2=athree[0] + \"?highlight=\" + encodeURIComponent(inlook);<br \/>\n      \/\/alert(\"here1 \" + spare + \" ... now ... \" + spare.replace(athree[0], spare2) + \" ... via \" + spare2);<br \/>\n      pspana[imb].innerHTML=spare.replace(athree[0], spare2);<br \/>\n     } else if (athree[0].indexOf(\"highlight=\") == -1) {<br \/>\n      spare2=athree[0] + '&' + \"highlight=\" + encodeURIComponent(inlook);<br \/>\n      \/\/alert(\"here2 \" + spare + \" ... now ... \" + spare.replace(athree[0], spare2) + \" ... via \" + spare2);<br \/>\n      pspana[imb].innerHTML=spare.replace(athree[0], spare2);<br \/>\n     }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<\/font><\/b><br \/>\n<font color='black'><b><\/i><br \/>\nfunction precc() { \/\/ wopenall= functionality<br \/>\n<\/font><br \/>\n<i><font color='teal'><br \/>\n&lt;?php<br \/>\n if (isset($_GET['highlight']) || isset($_POST['highlight'])) {<br \/>\n   $doww=\"\";<br \/>\n   if (isset($_GET['s'])) $doww=str_replace(\"'\", \"`\", urldecode(str_replace(\"+\", \" \", $_GET['s'])));<br \/>\n   if (isset($_POST['s'])) $doww=str_replace(\"'\", \"`\", urldecode(str_replace(\"+\", \" \", $_POST['s'])));<br \/>\n   if (isset($_GET['highlight'])) {<br \/>\n     if (strlen($_GET['highlight']) &gt; 0) $doww=str_replace(\"'\", \"`\", urldecode(str_replace(\"+\", \" \", $_GET['highlight'])));<br \/>\n   }<br \/>\n   if (isset($_POST['highlight'])) {<br \/>\n     if (strlen($_POST['highlight']) &gt; 0) $doww=str_replace(\"'\", \"`\", urldecode(str_replace(\"+\", \" \", $_POST['highlight'])));<br \/>\n   }<br \/>\n   echo \"\\n inlook=\\\"\" . $doww . \"\\\"; \\n\";<br \/>\n   echo \"\\n setTimeout(highlightsearch,3000); \\n\";<br \/>\n }<br \/>\n?&gt;<br \/>\n<\/font><\/i><br \/>\n<font color='black'><br \/>\n preprecc('wopenallwas');<br \/>\n...<br \/>\nformihis = document.getElementById('searchform').innerHTML.replace(\"&lt;\/div&gt;\", <i><font color='blue'>tagselis + catselis + <\/font><\/i>\"&lt;input style='display:none;' type='radio' name='stype' value=''&gt;&lt;input onclick=\\\"radiocc('Search');\\\" type='radio' name='stype' value='Search'&gt;Searc<i><font color='teal'>&lt;a title='Welcome to highlighted search functionality ...' href='#searchform' onclick='highlighttest();'&gt;&lt;font color=orange&gt;h&lt;\/font&gt;&nbsp;&nbsp;<\/font><\/i>&lt;input onclick=\\\"radiocc('Tag');\\\" type='radio' name='stype' value='Tag'&gt;<i><font color='blue'>&lt;a onclick=\\\"ovput('Tag');\\\" title=\\\"Overlay Tag dropdown ...\\\" href=\\\"#tagselis\\\"&gt;Tag&lt;\/a&gt;<\/font><\/i>&lt;input onclick=\\\"radiocc('Category');\\\" type='radio' name='stype' value='Category'&gt;<i><font color='blue'>&lt;a onclick=\\\"ovput('Category');\\\" title=\\\"Overlay Category dropdown ...\\\" href=\\\"#catselis\\\"&gt;Category&lt;\/a&gt;<\/font><\/i>&lt;select id='seltc' style='display:none;' onchange=\\\"window.open(this.value,'_blank');\\\" size='1'&gt;&lt;option value=''&gt;Blog Postings below ...&lt;\/option&gt;&lt;\/select&gt;&lt;\/div&gt;\");<br \/>\n...<br \/>\n}<\/font><\/b><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"<b>precc();<\/b> courseCookies();\" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code><\/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='#d16598' onclick='var dv=document.getElementById(\"d16598\"); 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='d16598' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We talked recently about this WordPress blog&#8217;s Search functionality, and thought we&#8217;d finished, but at the risk of saying &#8220;but there&#8217;s more&#8221; &#8230; well &#8230; there&#8217;s more. When we use the search functionality, sometimes it is specific words of interest &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-highlighted-search-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,354,652,932,997,1110,1319,1324,1325,1456],"class_list":["post-16598","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-dom","tag-javascript","tag-php","tag-programming","tag-search","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16598"}],"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=16598"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16598\/revisions"}],"predecessor-version":[{"id":16614,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/16598\/revisions\/16614"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=16598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=16598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=16598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}