{"id":22097,"date":"2016-05-22T03:01:21","date_gmt":"2016-05-21T17:01:21","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=22097"},"modified":"2016-05-21T12:01:58","modified_gmt":"2016-05-21T02:01:58","slug":"wordpress-emoji-prefixed-submenu-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-prefixed-submenu-primer-tutorial\/","title":{"rendered":"WordPress Emoji Prefixed Submenu Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a title='WordPress Emoji Prefixed Submenu Primer Tutorial' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/page_submenu_emoji.jpg\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"WordPress Show HTML Tags Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/page_submenu_emoji.jpg\" title=\"WordPress Show HTML Tags Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">WordPress Emoji Prefixed Submenu Primer Tutorial<\/p><\/div>\n<p>The fact that we find scope for so many CSS improvements and ideas around the menu system of our WordPress blog&#8217;s menu &#8220;Add Page&#8221; area and its submenus, is an indication of good and flexible web design, as we recently also saw with <a title='WordPress Show HTML Tags Primer Tutorial' href='#wshtpt'>WordPress Show HTML Tags Primer Tutorial<\/a> &#8230; thanks, WordPress!<\/p>\n<p>Today we use PHP driven CSS to try to relax you users when you click on a menu and see a submenu &#8220;drop&#8221; down.  Think, psychologically, you calm down a bit, here, if there is some extra space introduced &#8230; is an UX (<a target=_blank title='User experience information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/User_experience'>user experience<\/a>) opinion of mine, and you may well have a different one.  Perhaps my opinion is swayed by the usual UX weakness we have about wanting to tell users as much as possible, and cramming things up &#8230; well, this morning, <a href='#myifn' onclick=\" document.getElementById('myifn').style.display='inline'; \" onmouseover=\" document.getElementById('myifn').style.display='inline'; \">Nala<\/a> <iframe loading=\"lazy\" style='display:none;' id='myifn' width=\"420\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Ei_VUl8qdRU\" frameborder=\"0\" allowfullscreen><\/iframe> told me there&#8217;d be &#8220;no more of that&#8221; &#8230; her exact woofs &#8230; and so &#8230; we digress, but &#8230; do you remember <a target=_blank title='WordPress Bullet Point CSS Styling Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bullet-point-css-styling-emoji-tutorial\/'>WordPress Bullet Point CSS Styling Emoji Tutorial<\/a>?  Today, we just build on the WordPress TwentyTen theme&#8217;s good ol&#8217; header.php logic for that PHP driven CSS work to use the same techniques on a different CSS selection criteria &#8230; and so you see more WordPress design foresight, giving us lots of HTML <a target=_blank title='HTML class information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_classes.asp'>classes<\/a> to &#8220;hang our hats on&#8221; &#8230; merci, WordPress.<\/p>\n<p>And how did we come by the discovery of these new CSS selection criteria?  If you are a regular reader, we&#8217;d forgive you if you immediately blurted out Firefox&#8217;s FireBug add-on, and it is true that it&#8217;s hard to resist, but, today, perhaps you can see in today&#8217;s <a title='WordPress Emoji Prefixed Submenu Primer Tutorial' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/page_submenu_emoji.jpg\" title='Click picture'>tutorial picture<\/a>, a faint outline of Safari&#8217;s &#8220;out of the box&#8221; Web Inspector product that can help with this type of CSS investigation work, as well.<\/p>\n<blockquote><p>\nIt&#8217;s not the science of green leaved <a target=_blank title='?' href='https:\/\/www.google.com.au\/search?q=rocket+salad+piquancy&#038;biw=1067&#038;bih=528&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;ved=0ahUKEwjM7vLYj-DMAhUoiKYKHa_yChIQ_AUIBigB'>piquancy<\/a> exactly.\n<\/p><\/blockquote>\n<p> &#8230; but more the science of the fabulous CSS functionality involving <a target=_blank title='CSS :before selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_before.asp'>:before<\/a> and <a target=_blank title='CSS :after selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_after.asp'>:after<\/a> (selectors) and <a target=_blank title='CSS content: property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content:<\/a> (property) usage &#8230; as you can surmise by the simplicity of the <b>bold<\/b> changes to WordPress TwentyTen theme&#8217;s good ol&#8217; header.php below &#8230;<\/p>\n<p><code><br \/>\n  $wsarray = array(\"\", \"01F311\", \"0026F3\", \"0026BD\", \"00263C\", \"00263D\", \"00263E\", \"01F311\", \"0026F3\", \"0026BD\", \"0026f5\",<br \/>\n  \"\\xF0\\x9F\\x91\\xA0\", \"\\xF0\\x9F\\x91\\x93\", \"\\xF0\\x9F\\x90\\x98\", \"\\xF0\\x9F\\x90\\x92\", \"\\xF0\\x9F\\x8E\\x89\",<br \/>\n  \"\\xF0\\x9F\\x8D\\xB0\", \"\\xF0\\x9F\\x8D\\xA9\", \"\\xF0\\x9F\\x8D\\xA8\", \"\\xF0\\x9F\\x8D\\xA7\", \"\\xF0\\x9F\\x8D\\xA3\",<br \/>\n  \"\\xF0\\x9F\\x8D\\xB1\", \"\\xF0\\x9F\\x8E\\x88\", \"\\xF0\\x9F\\x8E\\xA7\", \"\\xF0\\x9F\\x8E\\xA8\", \"\\xF0\\x9F\\x8E\\xB5\",<br \/>\n  \"\\xF0\\x9F\\x8F\\x88\", \"\\xF0\\x9F\\x90\\x99\", \"\\xF0\\x9F\\x90\\x9E\", \"\\xF0\\x9F\\x90\\xB6\", \"\\xF0\\x9F\\x90\\xBC\",<br \/>\n  \"\\xF0\\x9F\\x90\\xBE\", \"\\xF0\\x9F\\x93\\x8A\", \"\\xF0\\x9F\\x93\\xA2\", \"\\xF0\\x9F\\x91\\xBC\", \"\\xF0\\x9F\\x90\\xAB\",<br \/>\n  \"\\xF0\\x9F\\x90\\xA8\", \"\\xF0\\x9F\\x90\\x97\", \"\\xF0\\x9F\\x8F\\x80\", \"\\xF0\\x9F\\x8E\\xB7\", \"\\xF0\\x9F\\x8E\\xA9\",<br \/>\n  \"\\xF0\\x9F\\x8D\\xAE\", \"\\xF0\\x9F\\x8D\\x92\", \"\\xF0\\x9F\\x8F\\x80\", \"\\xF0\\x9F\\x8C\\x88\", \"\\xF0\\x9F\\x9A\\xB2\",<br \/>\n  \"\\xF0\\x9F\\x9A\\xA2\", \"\\xF0\\x9F\\x9A\\x99\", \"\\xF0\\x9F\\x9A\\x87\", \"\\xF0\\x9F\\x9A\\x8F\", \"\\xF0\\x9F\\x9A\\xA7\",<br \/>\n  \"\\xF0\\x9F\\x9A\\xAA\", \"\\xF0\\x9F\\x9A\\x83\", \"\\xF0\\x9F\\x9A\\x87\", \"\\xF0\\x9F\\x98\\x81\", \"\\xF0\\x9F\\x98\\x82\",<br \/>\n  \"\\xF0\\x9F\\x98\\xB8\", \"\\xF0\\x9F\\x9A\\x92\", \"\\xF0\\x9F\\x9A\\x87\", \"\\xF0\\x9F\\x9B\\x80\", \"\\xF0\\x9F\\x8C\\xB4\",<br \/>\n  \"\\xF0\\x9F\\x8C\\xB5\", \"\\xF0\\x9F\\x8C\\xB7\", \"\\xF0\\x9F\\x8C\\x9F\", \"\\xF0\\x9F\\x8C\\xBD\", \"\\xF0\\x9F\\x8C\\xBE\",<br \/>\n  \"\\xF0\\x9F\\x8D\\x84\", \"\\xF0\\x9F\\x8D\\xB7\", \"\\xF0\\x9F\\x8D\\x8F\", \"\\xF0\\x9F\\x8D\\x9F\", \"\\xF0\\x9F\\x8D\\xB5\",<br \/>\n  \"\\xF0\\x9F\\x8C\\x89\", \"\\xF0\\x9F\\x8C\\x8A\", \"\\xF0\\x9F\\x8C\\x8B\", \"\\xF0\\x9F\\x8C\\x87\", \"\\xF0\\x9F\\x8C\\x86\",<br \/>\n  \"\\xF0\\x9F\\x8C\\x81\", \"\\xF0\\x9F\\x8C\\x82\", \"\\xF0\\x9F\\x8C\\x82\", \"\\xF0\\x9F\\x8C\\x83\", \"\\xF0\\x9F\\x8C\\x84\",<br \/>\n  \"\\xE2\\x9B\\xAA\", \"\\xE2\\x9B\\xB2\", \"\\xE2\\x9B\\xBA\", \"\\xE2\\x9B\\x83\", \"\\xF0\\x9F\\x9A\\x80\",<br \/>\n  \"\\xF0\\x9F\\x97\\xBB\", \"\\xF0\\x9F\\x97\\xBC\", \"\\xF0\\x9F\\x97\\xBD\", \"\\xF0\\x9F\\x97\\xBF\", \"\\xF0\\x9F\\x90\\xA7\",<br \/>\n  \"\\xF0\\x9F\\x99\\x8B\", \"\\xF0\\x9F\\x99\\x88\", \"\\xF0\\x9F\\x99\\x89\", \"\\xF0\\x9F\\x99\\x8C\", \"\\xF0\\x9F\\x98\\x96\");<br \/>\n  $ws = rand(0, (sizeof($wsarray) - 1));<br \/>\n  $cs = rand(0, 10);<br \/>\n  $csarray = array(\"black\", \"red\", \"blue\", \"purple\", \"maroon\", \"teal\", \"brown\", \"orange\", \"olive\", \"lime\", \"green\");<br \/>\n<b><\/b><br \/>\n  if ($wsarray[$ws] != \"\") {<br \/>\n<b><\/b><br \/>\n<b><\/b><br \/>\n<b>  $wschild = rand(0, (sizeof($wsarray) - 1)); \/\/ page submenu spacing accentuation<br \/>\n  $cschild = rand(0, 10);<\/b><br \/>\necho \"<br \/>\n<b><br \/>\nul.children li.page_item:before {<br \/>\n    color: \" .  $csarray[$cschild] . \";<br \/>\n    content: '\\\\\" . $wsarray[$wschild] . \" \\\\0000a0';<br \/>\n}<br \/>\n<\/b><b><br \/>\nul.children li.page_item:after {<br \/>\n    content: no-close-quote;<br \/>\n}<br \/>\n<\/b><br \/>\nul.noclass {<br \/>\n    list-style: none;<br \/>\n}<br \/>\n<b><\/b><br \/>\nul.noclass li:before {<br \/>\n    list-style: none;<br \/>\n    float: left;<br \/>\n    margin-left: -15px;<br \/>\n    color: \" .  $csarray[$cs] . \";<br \/>\n    content: '\\\\\" . $wsarray[$ws] . \" \\\\0000a0';<br \/>\n    font-size: 1.2em;<br \/>\n    font-weight: bold;<br \/>\n}<br \/>\n\/\/ etcetera etcetera etcetera<br \/>\n\";<br \/>\n<\/code><\/p>\n<p>It&#8217;s not <i>EXACTLY<\/i> relevant, but doesn&#8217;t it make you feel like singing <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=umS3XM3xAPk'>Green Acres <font size=1>is the place to be<\/font> &#8230;<\/a> ?<\/p>\n<p>All in all &#8230; gracias, WordPress.  Realmente realmente realmente pensamos que hay que mantener esto en marcha.<\/p>\n<hr>\n<p id='wshtpt'>Previous relevant <a target=_blank title='WordPress Show HTML Tags Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-show-html-tags-primer-tutorial\/'>WordPress Show HTML Tags Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a title='Show Tags of This Webpage into a New Window' href=\"#\" onclick=\" window.open((document.URL.replace('#main','') + '&#038;showtags=Y').replace('?','?showtags=y&#038;').replace('\/&#038;', '\/?').replace('.php&#038;', '.php?'), '_blank', 'top=20,left=20,width=600,height=600'); \"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"WordPress Show HTML Tags Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/showtags.jpeg\" title=\"WordPress Show HTML Tags Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">WordPress Show HTML Tags Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got one new concept and one concept revisited today with our work on some WordPress Blog functionality to allow users to show the HTML coding behind <i>some<\/i> of the HTML elements of the RJM Programming Blog webpage of interest.  Say <i>some<\/i> because not all HTML elements lend themselves to allowing the functionality we&#8217;ve used to display the HTML involved.  It is really only those HTML elements where their [element].innerHTML components can be <i>displayable<\/i> text that will show the HTML coding for today&#8217;s new functionality &#8230; even so, we think this could be a useful learning tool for users wanting to get ideas of what HTML elements go to make up what webpage <i>look<\/i>.<\/p>\n<p>So today&#8217;s new concept, at least in relation to this blog&#8217;s postings from the past, is that it hadn&#8217;t occurred to us until today that the &#8230;<\/p>\n<ol>\n<li>WordPress TwentyTen theme&#8217;s top menu is constructed in such a way as to allow you to put &#8220;intelligence&#8221; into the &#8220;Add Page&#8221; Title that you enter &#8230; in other words you can include into the &#8220;Add Page&#8221; Title an HTML <i>a<\/i> tag, for example, that performs Javascript there and then on the webpage you are currently on, rather than navigating to a new &#8220;Add Page&#8221; menu page &#8230; which is of great interest to us with today&#8217;s work, because the user is likely to be reading a webpage of interest, now, that they want to see the internal HTML coding for, compared for them, in a new popup (window.open()) webpage, rather than seeing this for the &#8220;Add Page&#8221; menu webpage (we consider less interesting, but we&#8217;ll still allow in as your functionality usage choice)<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/showtags.jpg\" title=\"Add Page view of this\"><\/img><br \/>\n &#8230; and, as we&#8217;ve talked about before, last, at this blog with &#8230;<\/li>\n<li><a target=_blank title='WordPress Bullet Point CSS Styling Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-bullet-point-css-styling-emoji-tutorial\/'>WordPress Bullet Point CSS Styling Emoji Tutorial<\/a> reminded us of the fabulous CSS functionality involving <a target=_blank title='CSS :before selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_before.asp'>:before<\/a> and <a target=_blank title='CSS :after selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_after.asp'>:after<\/a> (selectors) and <a target=_blank title='CSS content: property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content:<\/a> (property) usage, which we put to use here &#8230; those of you into editing XML and using <a target=_blank title='Epic XML Editor' href='http:\/\/www.stylusstudio.com\/download-xml-editor.html?gclid=Cj0KEQjw3-W5BRCymr_7r7SFt8cBEiQAsLtM8tIeW4lppmrRVFBbHw4xkLiJakfNZ063i4vyKNvyxuAaAiCb8P8HAQ'>Epic<\/a> may be &#8220;right at home&#8221; with these ideas &#8230; though what we do here with HTML is nothing as involved as Epic does for XML &#8230; we&#8217;re just into presenting a readonly guide, for curiosity&#8217;s sake<\/li>\n<\/ol>\n<p>So what needed to change in good ol&#8217; (TwentyTen theme&#8217;s) header.php to do this <b>pretty simple change<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;\/script&gt;<br \/>\n<b>&lt;?php<br \/>\n  if (isset($_GET['showtags'])) {<br \/>\n    echo \"&lt;link href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/<a target=_blank title='showtags.css' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/showtags.css_GETME'>showtags.css<\/a>' rel='stylesheet' type='text\/css'&gt;\";<br \/>\n  }<br \/>\n?&gt;<\/b><br \/>\n&lt;\/head&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; just asking for the address bar URL to contain a (PHP $_GET[&#8216;showtag&#8217;]) <i>showtag=<\/i> part to the webpage call.  It&#8217;s not the science of green leaved <a target=_blank title='?' href='https:\/\/www.google.com.au\/search?q=rocket+salad+piquancy&#038;biw=1067&#038;bih=528&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;ved=0ahUKEwjM7vLYj-DMAhUoiKYKHa_yChIQ_AUIBigB'>piquancy<\/a> exactly.<\/p>\n<p>And so if you want to see what we have here with extra HTML tagging shown, in a new popup window, try this <a title='Show Tags of This Webpage into a New Window' href=\"#\" onclick=\" window.open((document.URL.replace('#main','') + '&#038;showtags=Y').replace('?','?showtags=y&#038;').replace('\/&#038;', '\/?').replace('.php&#038;', '.php?'), '_blank', 'top=20,left=20,width=600,height=600'); \">live run<\/a> link, and &#8220;chow for now&#8221;.<\/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='#d22017' onclick='var dv=document.getElementById(\"d22017\"); 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='d22017' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d22097' onclick='var dv=document.getElementById(\"d22097\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22097' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The fact that we find scope for so many CSS improvements and ideas around the menu system of our WordPress blog&#8217;s menu &#8220;Add Page&#8221; area and its submenus, is an indication of good and flexible web design, as we recently &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-prefixed-submenu-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,281,770,932,997,1214,1319,1324,1325,1356,1456],"class_list":["post-22097","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-css","tag-menu","tag-php","tag-programming","tag-submenu","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-ux","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22097"}],"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=22097"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22097\/revisions"}],"predecessor-version":[{"id":22105,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/22097\/revisions\/22105"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=22097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=22097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=22097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}