{"id":19088,"date":"2015-12-25T02:01:33","date_gmt":"2015-12-24T16:01:33","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=19088"},"modified":"2022-11-06T15:04:55","modified_gmt":"2022-11-06T05:04:55","slug":"wordpress-user-header-section-border-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-header-section-border-primer-tutorial\/","title":{"rendered":"WordPress User Header Section Border Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_hsb_changes.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress User Header Section Border Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_hsb_changes.jpg\" title=\"WordPress User Header Section Border Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress User Header Section Border Primer Tutorial<\/p><\/div>\n<p>Recap to <\/p>\n<p id='wuffpt'>Previous <a target=_blank title='WordPress User Font Families Primer Tutorial' href='#wuffpt'>WordPress User Font Families Primer Tutorial<\/a> as shown below, yesterday &#8230;<\/p>\n<blockquote>\n<p>In the world of client\/server programming it is surprising that PHP (on the server side) and Javascript (on the client side) can so often both be approaches to solving a problem.   But maybe it shouldn&#8217;t be so surprising, since they both share the mutual &#8220;HTML&#8221; friend in the middle.<\/p>\n<p>Our WordPress changes today reflect that client\/server teamwork, with the access both PHP and Javascript have to cookies coming in handy at different stages of our CSS styling modifications to our WordPress blog (here).  The modifications centre around offering the user the ability to choose their own <i>font families<\/i> to use when viewing this blog.  Should the user go down that route of specifying their own <i>font families<\/i> for any\/all of &#8230;<\/p>\n<ul>\n<li>blog title<\/li>\n<li>post title<\/li>\n<li>post contents (or &#8220;innards&#8221;)<\/li>\n<\/ul>\n<p> &#8230; this change is stored in cookies and will remain in place (for 6 months that is) as the default font setting for that web browser accessing this WordPress blog from then on, until the user picks another <i>font family<\/i> or leaves the blog to pick its own default <i>font family<\/i>.<\/p>\n<p>And what is the mechanism for the user to control that?  Web browser URLs will do it, or some <i>All Post<\/i> menu submenus we&#8217;ve written for the purpose.<\/p>\n<p>So what are the two ways for the client\/server Javascript\/PHP cookie access to work?<\/p>\n<ul>\n<li>Javascript can access DOM <a target=_blank title='Javascript cookie usage information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>document.cookie<\/i><\/a><\/li>\n<li>PHP can access $_SERVER variable <a target=_blank title='PHP $_SERVER variables' href='http:\/\/php.net\/manual\/en\/reserved.variables.server.php'><i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i><\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; well, this was good in theory, but its &#8220;backdoor&#8221; approach to WordPress development (to see some good information here please read <a target=_blank title='WordPress Cookie information' href='https:\/\/www.google.com\/search?q=wordpress+cookies&#038;ie=utf-8&#038;oe=utf-8'>this<\/a>) didn&#8217;t take into account the way WordPress manipulates client cookies, and controls them in scenarios where users are logged in, which we don&#8217;t want to demand here &#8230; so &#8230; lowering expectations a bit &#8230; what we have is functionality that can allow for user defined CSS styling within a web browser session, but not between sessions.  The way we end up &#8220;not using cookies&#8221; so much anymore, is to fix the HTML <i>a<\/i> links on the page (via <font color=blue><i>function appendtoa(thisiid, thisv)<\/i><\/font> of code below) to have, via PHP $_GET[] parameters, for the functionality to flow through for as long as the user is in a session using the blog, and defining their own CSS &#8220;looks&#8221; via the &#8220;All Posts&#8221; submenu options.<\/p>\n<p>And so, below, we add in new functionality for the user to control the blog&#8217;s <font color=blue>Header Section&#8217;s Border<\/font> look, and you&#8217;ll see these two approaches in action in two separate sections of the WordPress Blog&#8217;s PHP header.php (usual file to make changes to) as below (where we moved the timing of this functionality to being the <font color=blue>last thing done at the <i>document.body<\/i> onload event<\/font> &#8230;<\/p>\n<ul>\n<li>Javascript can access DOM <i>document.cookie<\/i> and also maintain the cookies via the address bar URL &#8220;leads&#8221; (<b>bold<\/b> changes below)<br \/>\n<code><br \/>\n<b><br \/>\nfunction cookieAVal(cName) {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n<\/b><b><br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (cName == tCookie[j].split(\"=\")[0]) {<br \/>\n      return decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/b><b><br \/>\nfunction deleteACookie(goodname) {<br \/>\n var expireDate = new Date();<br \/>\n expireDate.setDate(expireDate.getDate()-1);<br \/>\n \/\/if ((\"\" + cookieAVal(goodname)).length != 0) {<br \/>\n    document.cookie = goodname + \"=;expires=\" + expireDate.toGMTString();<br \/>\n \/\/}<br \/>\n}<br \/>\n<\/b><b style='color:red;'><br \/>\nfunction lookAtCookies() {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (\"rjmwp_masthead-border\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;  #masthead { border: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_masthead-border\", \"\" + encodeURIComponent(decodeURIComponent(tCookie[j].split(\"=\")[1])));<br \/>\n    }<br \/>\n    if (\"rjmwp_base_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;  body, input, textarea, .page-title span, .pingback a.url { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_base_font-family\", \"\" + encodeURIComponent(decodeURIComponent(tCookie[j].split(\"=\")[1])));<br \/>\n    }<br \/>\n    if (\"rjmwp_posttitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;   h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_posttitle_font-family\", \"\" + encodeURIComponent(decodeURIComponent(tCookie[j].split(\"=\")[1])));<br \/>\n    }<br \/>\n    if (\"rjmwp_blogtitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.getElementById('bbottom').innerHTML+=(\" &lt;style&gt;  #ahomeis { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \");<br \/>\n      appendtoa(\"rjmwp_blogtitle_font-family\", \"\" + encodeURIComponent(decodeURIComponent(tCookie[j].split(\"=\")[1])));<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/b><b><br \/>\nfunction cookie_fonts() {<br \/>\n  var oidea;<br \/>\n  var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var expireDate;<br \/>\n <font color=red>lookAtCookies();<\/font><br \/>\n  <font color=blue>var masthead_border=location.search.split('rjmwp_masthead-border=')[1] ? decodeURIComponent(location.search.split('rjmwp_masthead-border=')[1].split('&')[0]) : ' ';<br \/>\n  if (masthead_border.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_masthead-border=\" + encodeURIComponent(masthead_border) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   appendtoa(\"rjmwp_masthead-border\", \"\" + encodeURIComponent(masthead_border));<br \/>\n  } else if (masthead_border == '' && document.URL.indexOf('-border=') != -1) {<br \/>\n   deleteACookie('rjmwp_masthead-border');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_masthead-border');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_masthead-border');<br \/>\n  }<\/font><br \/>\n  if (base_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_base_font-family=\" + encodeURIComponent(base_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   <font color=blue>appendtoa(\"rjmwp_base_font-family\", \"\" + encodeURIComponent(base_font));<\/font><br \/>\n  } else if (base_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n   deleteACookie('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_base_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  if (blogtitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n    \/\/alert(918);<br \/>\n   document.cookie = \"rjmwp_blogtitle_font-family=\" + encodeURIComponent(blogtitle_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   <font color=blue>appendtoa(\"rjmwp_blogtitle_font-family\", \"\" + encodeURIComponent(blogtitle_font));<\/font><br \/>\n  } else if (blogtitle_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n    \/\/alert(928);<br \/>\n   deleteACookie('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_blogtitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  if (posttitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_posttitle_font-family=\" + encodeURIComponent(posttitle_font) + \"; expires=\" + expireDate.toGMTString();<br \/>\n   <font color=blue>appendtoa(\"rjmwp_posttitle_font-family\", \"\" + encodeURIComponent(posttitle_font));<\/font><br \/>\n  } else if (posttitle_font == '' && document.URL.indexOf('-family=') != -1) {<br \/>\n   deleteACookie('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_posttitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n}<br \/>\n<\/b><b style=\"color:blue;\"><br \/>\nfunction appendtoa(thisiid, thisv) {<br \/>\n  var asis=document.getElementsByTagName(\"a\");<br \/>\n  for (var i=0; i&lt;asis.length; i++) {<br \/>\n    if (asis[i].href.indexOf(thisiid) == -1) {<br \/>\n      if (asis[i].href.indexOf(\"\/wordpress\/\") != -1 || asis[i].href.indexOf(\"\/ITblog\/\") != -1 && asis[i].href.indexOf(\"\/sitemap\") == -1) {<br \/>\n    if (asis[i].href.indexOf(thisiid + '=&') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=&', thisiid + '=' + encodeURIComponent(thisv) + '&');<br \/>\n    } else {<br \/>\n    if (asis[i].href.indexOf('#') != -1) {<br \/>\n     if (asis[i].href.indexOf('?') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '&' + thisiid + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     } else {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '?' + thisiid + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (asis[i].href.indexOf('?') != -1) {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '&' + thisiid + '=' + encodeURIComponent(thisv);<br \/>\n     } else {<br \/>\n      asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '?' + thisiid + '=' + encodeURIComponent(thisv);<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/b><b><br \/>\nfunction change_ff(thisi, thisv) {<br \/>\n  \/\/thisi.title='#';<br \/>\n  if (thisv != '' || 1 == 1) {<br \/>\n    <font color=blue>if (thisv != '' && thisi.id.indexOf(\"border\") == -1)<\/font> thisi.style.fontFamily = thisv;<br \/>\n    <font color=blue>if (thisv != '' && thisi.id.indexOf(\"border\") != -1) thisi.style.border = thisv;<\/font><br \/>\n    if (document.URL.indexOf(thisi.id + '=&') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=&', thisi.id + '=' + encodeURIComponent(thisv) + '&');<br \/>\n    } else {<br \/>\n    if (document.URL.indexOf('#') != -1) {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '&' + thisi.id + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '?' + thisi.id + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '&' + thisi.id + '=' + encodeURIComponent(thisv);<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '?' + thisi.id + '=' + encodeURIComponent(thisv);<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n    <font color=blue>if (thisv != '' && thisi.id.indexOf(\"border\") == -1)<\/font> document.getElementById(thisi.id.replace('-','_')).style.fontFamily = thisv;<br \/>\n    <font color=blue>if (thisv != '' && thisi.id.indexOf(\"border\") != -1) document.getElementById(thisi.id.replace('-','_')).style.border = thisv;<\/font><br \/>\n  }<br \/>\n}<br \/>\n<\/b><br \/>\n...<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); <font color=blue><b>cookie_fonts();<\/b><\/font> \" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code>\n<\/li>\n<li>PHP can access $_SERVER variable <i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i> and PHP is really useful here to change the CSS styling in the web page header as the server mechanism getting in ahead of the Javascript client (though this Javascript may have been able to work it manipulating DOM <i>document.head<\/i> &#8230; but this is not our preferred method if PHP is there, and because it is a WordPress blog, PHP is there (so use it) <font color=red> &#8230; alas, the PHP $_SERVER[&#8216;HTTP_COOKIE&#8217;] (as might be expected) is not useful for client cookie detection, so added <i>function lookAtCookies()<\/i> to Javascript above as an alternative client method not using <i>document.header<\/i> but, rather, appending into <i>document.body<\/i> &lt;style&gt; blah blah blah &lt;\/style&gt; information to get the job done<\/font>) (<b>bold<\/b> changes below)<br \/>\n<code>\n<link rel='stylesheet' type='text\/css' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_border.css' \/>\n&lt;style&gt;<br \/>\n<i><\/i><br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<br \/>\n<i><\/i><br \/>\n<i><\/i><br \/>\n#s {<br \/>\n   width: 55% !important;<br \/>\n}<br \/>\n<i><\/i><br \/>\n#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<br \/>\n<b><br \/>\n&lt;?php<br \/>\n  $font_family=\"Verdana\";<br \/>\n  $blogtitle_font_family=\"Verdana\";<br \/>\n  $posttitle_font_family=='\"Helvetica Neue\",Arial,Helvetica,\"Nimbus Sans L\",sans-serif';<br \/>\n  <font color=blue>$masthead_border=\"\";<br \/>\n  if (isset($_GET['rjmwp_masthead-border'])) {<br \/>\n    if ($_GET['rjmwp_masthead-border'] != \"\") {<br \/>\n      echo \"\\n\\n #masthead { border: \" . urldecode($_GET['rjmwp_masthead-border']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_masthead-border=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_masthead-border=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n #masthead { border: \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<\/font><br \/>\n  if (isset($_GET['rjmwp_base_font-family'])) {<br \/>\n    if ($_GET['rjmwp_base_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . urldecode($_GET['rjmwp_base_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_base_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_base_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_blogtitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_blogtitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n #ahomeis { font-family:  \" . urldecode($_GET['rjmwp_blogtitle_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_blogtitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_blogtitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n #ahomeis { font-family:  \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_posttitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_posttitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($_GET['rjmwp_posttitle_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_posttitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_posttitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n?&gt;<br \/>\n<\/b><br \/>\ncode {<br \/>\n    width:90%;<br \/>\n    background-color:#F9F9F9;<br \/>\n    margin-top: 10px;<br \/>\n    margin-bottom: 10px;<br \/>\n    padding:20px 20px;<br \/>\n    border:1px dashed blue;<br \/>\n    display: inline-block;<br \/>\n    text-overflow: ellipsis;<br \/>\n    white-space: pre-wrap;       \/* css-3 *\/<br \/>\n    white-space: -moz-pre-wrap;  \/* Mozilla, since 1999 *\/<br \/>\n    white-space: -pre-wrap;      \/* Opera 4-6 *\/<br \/>\n    white-space: -o-pre-wrap;    \/* Opera 7 *\/<br \/>\n    word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/<br \/>\n}\u200b<br \/>\n<i><\/i><br \/>\n...<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Again the mechanism for the user to control this themselves is 4 submenus off the <i>All Posts<\/i> menu.  Blog New Pages like below (for example of 3 &#8220;Pick Your Own Blog Header Section Border&#8221;) will do it (and show the idea) &#8230;<\/p>\n<p><code><br \/>\n&lt;p id='rjmwp_masthead_border'&gt;Please feel free to enter a Border (CSS Styling (eg. 2px solid green)) to use for the Blog Header Section (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input id='rjmwp_masthead-border' type='text' value='' onblur=' change_ff(this, this.value); ' title='https:\/\/www.rjmprogramming.com.au\/ITblog\/?rjmwp_masthead-border=' onfocus=\" this.value=cookieAVal('rjmwp_masthead-border');\"&gt;&lt;\/input&gt; &lt;input type='button' onclick=\" location.href=document.getElementById('rjmwp_masthead-border').title; \" value='Show Blog This Way with this Web Browser Session Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n<\/code><\/p>\n<p>You can try it yourself by accessing the <i>All Posts<\/i> menu to see for yourself.  Again, we hope some ideas spring from all this for you, and remember that HTML inspector tools like Firefox&#8217;s <a target=_blank title='Firebug' href='http:\/\/getfirebug.com'>Firebug<\/a> are invaluable for helping with the examination of that &#8220;middle&#8221; HTML to tweak on what might be right and what might be wrong with your programming.<\/p>\n<hr>\n<p id='wuffpt'>Previous <a target=_blank title='WordPress User Font Families Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-font-families-primer-tutorial\/'>WordPress User Font Families Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_ff_changes.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress User Font Families Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/wordpress_ff_changes.jpg\" title=\"WordPress User Font Families Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">WordPress User Font Families Primer Tutorial<\/p><\/div>\n<p>In the world of client\/server programming it is surprising that PHP (on the server side) and Javascript (on the client side) can so often both be approaches to solving a problem.   But maybe it shouldn&#8217;t be so surprising, since they both share the mutual &#8220;HTML&#8221; friend in the middle.<\/p>\n<p>Our WordPress changes today reflect that client\/server teamwork, with the access both PHP and Javascript have to cookies coming in handy at different stages of our CSS styling modifications to our WordPress blog (here).  The modifications centre around offering the user the ability to choose their own <i>font families<\/i> to use when viewing this blog.  Should the user go down that route of specifying their own <i>font families<\/i> for any\/all of &#8230;<\/p>\n<ul>\n<li>blog title<\/li>\n<li>post title<\/li>\n<li>post contents (or &#8220;innards&#8221;)<\/li>\n<\/ul>\n<p> &#8230; this change is stored in cookies and will remain in place (for 6 months that is) as the default font setting for that web browser accessing this WordPress blog from then on, until the user picks another <i>font family<\/i> or leaves the blog to pick its own default <i>font family<\/i>.<\/p>\n<p>And what is the mechanism for the user to control that?  Web browser URLs will do it, or some <i>All Post<\/i> menu submenus we&#8217;ve written for the purpose.<\/p>\n<p>So what are the two ways for the client\/server Javascript\/PHP cookie access to work?<\/p>\n<ul>\n<li>Javascript can access DOM <a target=_blank title='Javascript cookie usage information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>document.cookie<\/i><\/a><\/li>\n<li>PHP can access $_SERVER variable <a target=_blank title='PHP $_SERVER variables' href='http:\/\/php.net\/manual\/en\/reserved.variables.server.php'><i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i><\/a><\/li>\n<\/ul>\n<p>You&#8217;ll see these two approaches in action in two separate sections of the WordPress Blog&#8217;s PHP header.php (usual file to make changes to) as below &#8230;<\/p>\n<ul>\n<li>Javascript can access DOM <i>document.cookie<\/i> and also maintain the cookies via the address bar URL &#8220;leads&#8221; (<b>bold<\/b> changes below)<br \/>\n<code><br \/>\n<b><br \/>\nfunction cookieAVal(cName) {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n<\/b><b><br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (cName == tCookie[j].split(\"=\")[0]) {<br \/>\n      return decodeURIComponent(tCookie[j].split(\"=\")[1]);<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/b><b><br \/>\nfunction deleteACookie(goodname) {<br \/>\n var expireDate = new Date();<br \/>\n expireDate.setDate(expireDate.getDate()-1);<br \/>\n \/\/if ((\"\" + cookieAVal(goodname)).length != 0) {<br \/>\n    document.cookie = goodname + \"=;expires=\" + expireDate.toGMTString();<br \/>\n \/\/}<br \/>\n}<br \/>\n<\/b><b style='color:red;'><br \/>\nfunction lookAtCookies() {<br \/>\n  if (document.cookie != '') {<br \/>\n   var tCookie=document.cookie.split(\"; \");<br \/>\n   for (var j=0; j&lt;tCookie.length; j++) {<br \/>\n    if (\"rjmwp_base_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.write(\" &lt;style&gt;  body, input, textarea, .page-title span, .pingback a.url { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \";<br \/>\n    }<br \/>\n    if (\"rjmwp_posttitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.write(\" &lt;style&gt;   h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \";<br \/>\n    }<br \/>\n    if (\"rjmwp_blogtitle_font-family\" == tCookie[j].split(\"=\")[0]) {<br \/>\n      document.write(\" &lt;style&gt;  #ahomeis { font-family: \" + decodeURIComponent(tCookie[j].split(\"=\")[1]) + \" } &lt;\/style&gt; \";<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/b><b><br \/>\nfunction cookie_fonts() {<br \/>\n  var oidea;<br \/>\n  var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : ' ';<br \/>\n  var expireDate;<br \/>\n <font color=red>lookAtCookies();<\/font><br \/>\n  if (base_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_base_font-family=\" + encodeURIComponent(base_font) + \";expires=\" + expireDate.toGMTString();<br \/>\n  } else if (base_font == '') {<br \/>\n   deleteACookie('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_base_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_base_font-family');<br \/>\n  }<br \/>\n  if (blogtitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_blogtitle_font-family=\" + encodeURIComponent(blogtitle_font) + \";expires=\" + expireDate.toGMTString();<br \/>\n  } else if (blogtitle_font == '') {<br \/>\n   deleteACookie('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_blogtitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_blogtitle_font-family');<br \/>\n  }<br \/>\n  if (posttitle_font.replace(' ','') != '') {<br \/>\n   expireDate = new Date();<br \/>\n   expireDate.setMonth(expireDate.getMonth()+6);<br \/>\n   document.cookie = \"rjmwp_posttitle_font-family=\" + encodeURIComponent(posttitle_font) + \";expires=\" + expireDate.toGMTString();<br \/>\n  } else if (posttitle_font == '') {<br \/>\n   deleteACookie('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n  oidea=document.getElementById('rjmwp_posttitle_font-family');<br \/>\n  if (oidea != null) {<br \/>\n   oidea.value=cookieAVal('rjmwp_posttitle_font-family');<br \/>\n  }<br \/>\n}<br \/>\n<\/b><b><br \/>\nfunction change_ff(thisi, thisv) {<br \/>\n  \/\/thisi.title='#';<br \/>\n  if (thisv != '' || 1 == 1) {<br \/>\n    if (thisv != '') thisi.style.fontFamily = thisv;<br \/>\n    if (document.URL.indexOf(thisi.id + '=&') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=&', thisi.id + '=' + encodeURIComponent(thisv) + '&');<br \/>\n    } else {<br \/>\n    if (document.URL.indexOf('#') != -1) {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '&' + thisi.id + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '?' + thisi.id + '=' + encodeURIComponent(thisv) + '#');<br \/>\n     }<br \/>\n    } else {<br \/>\n     if (document.URL.indexOf('?') != -1) {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '&' + thisi.id + '=' + encodeURIComponent(thisv);<br \/>\n     } else {<br \/>\n      thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '?' + thisi.id + '=' + encodeURIComponent(thisv);<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n    if (thisv != '') document.getElementById(thisi.id.replace('-','_')).style.fontFamily = thisv;<br \/>\n  }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n<b><br \/>\n  cookie_fonts(); \/\/ User font checks<br \/>\n  <\/b><br \/>\n  img_alt();  \/\/ Make sure all img have alt (=title)<br \/>\n  ajaxcontexthelp_mode();  \/\/ Check on Context Help mode<br \/>\n  download_mode();  \/\/ Check on Download mode<br \/>\n  metasep(); \/\/ meta-sep class dropdown<br \/>\n  checkpt(); \/\/ category and tag \"oldest\"<br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n  ul_li_noclass();  \/\/ Alternative to bullet ul\/li lists<br \/>\n  winit();  \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile<br \/>\n  checkMarginLeftImages();<br \/>\n<\/code>\n<\/li>\n<li>PHP can access $_SERVER variable <i>$_SERVER[&#8216;HTTP_COOKIE&#8217;]<\/i> and PHP is really useful here to change the CSS styling in the web page header as the server mechanism getting in ahead of the Javascript client (though this Javascript may have been able to work it manipulating DOM <i>document.head<\/i> &#8230; but this is not our preferred method if PHP is there, and because it is a WordPress blog, PHP is there (so use it) <font color=red> &#8230; alas, the PHP $_SERVER[&#8216;HTTP_COOKIE&#8217;] (as might be expected) is not useful for client cookie detection, so added <i>function lookAtCookies()<\/i> to Javascript above as an alternative client method not using <i>document.header<\/i> but, rather, appending into <i>document.body<\/i> &lt;style&gt; blah blah blah &lt;\/style&gt; information to get the job done<\/font>) (<b>bold<\/b> changes below)<br \/>\n<code>\n<link rel='stylesheet' type='text\/css' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_border.css' \/>\n&lt;style&gt;<br \/>\n<i><\/i><br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<br \/>\n<i><\/i><br \/>\n<i><\/i><br \/>\n#s {<br \/>\n   width: 55% !important;<br \/>\n}<br \/>\n<i><\/i><br \/>\n#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<br \/>\n<b><br \/>\n&lt;?php<br \/>\n  $font_family=\"Verdana\";<br \/>\n  $blogtitle_font_family=\"Verdana\";<br \/>\n  $posttitle_font_family=='\"Helvetica Neue\",Arial,Helvetica,\"Nimbus Sans L\",sans-serif';<br \/>\n  if (isset($_GET['rjmwp_base_font-family'])) {<br \/>\n    if ($_GET['rjmwp_base_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . urldecode($_GET['rjmwp_base_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_base_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_base_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n body, input, textarea, .page-title span, .pingback a.url { font-family: \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_blogtitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_blogtitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n #ahomeis { font-family:  \" . urldecode($_GET['rjmwp_blogtitle_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_blogtitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_blogtitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n #ahomeis { font-family:  \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n  if (isset($_GET['rjmwp_posttitle_font-family'])) {<br \/>\n    if ($_GET['rjmwp_posttitle_font-family'] != \"\") {<br \/>\n      echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($_GET['rjmwp_posttitle_font-family']) . \"; } \\n\\n\";<br \/>\n    }<br \/>\n  } else if (isset($_SERVER['HTTP_COOKIE'])) {<br \/>\n   if (strpos($_SERVER['HTTP_COOKIE'], \"rjmwp_posttitle_font-family=\") !== false) {<br \/>\n    $parts=explode(\"rjmwp_posttitle_font-family=\", $_SERVER['HTTP_COOKIE']);<br \/>\n    $subparts=explode(\";\", $parts[1]);<br \/>\n    if ($subparts[0] != \"\") echo \"\\n\\n h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text, input[type=\\\"submit\\\"] { font-family:  \" . urldecode($subparts[0]) . \"; } \\n\\n\";<br \/>\n   }<br \/>\n  }<br \/>\n?&gt;<br \/>\n<\/b><br \/>\ncode {<br \/>\n    width:90%;<br \/>\n    background-color:#F9F9F9;<br \/>\n    margin-top: 10px;<br \/>\n    margin-bottom: 10px;<br \/>\n    padding:20px 20px;<br \/>\n    border:1px dashed blue;<br \/>\n    display: inline-block;<br \/>\n    text-overflow: ellipsis;<br \/>\n    white-space: pre-wrap;       \/* css-3 *\/<br \/>\n    white-space: -moz-pre-wrap;  \/* Mozilla, since 1999 *\/<br \/>\n    white-space: -pre-wrap;      \/* Opera 4-6 *\/<br \/>\n    white-space: -o-pre-wrap;    \/* Opera 7 *\/<br \/>\n    word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/<br \/>\n}\u200b<br \/>\n<i><\/i><br \/>\n...<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>And so we come to the mechanism for the user to control this themselves, as 3 submenus off the <i>All Posts<\/i> menu.  Blog New Pages like below (for example of 3 &#8220;Pick Your Own Post Contents Font&#8221;) will do it (and show the idea) &#8230;<\/p>\n<p><code><br \/>\n&lt;p id='rjmwp_base_font_family'&gt;Please feel free to enter a Font Family to use for the Post Contents (nothing uses default and you get a preview as you tab out of the text box): &lt;br&gt;&lt;input id='rjmwp_base_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='https:\/\/www.rjmprogramming.com.au\/ITblog\/?rjmwp_base_font-family=' onfocus=\" this.value=cookieAVal('rjmwp_base_font-family');\"&gt;&lt;\/input&gt; &lt;input type='button' onclick=\" location.href=document.getElementById('rjmwp_base_font-family').title; \" value='Show Blog This Way with this Web Browser Until a Revisit Here'&gt;&lt;\/input&gt;&lt;\/p&gt;<br \/>\n<\/code><\/p>\n<p>You can try it yourself by accessing the <i>All Posts<\/i> menu you see above.  We hope some ideas spring from all this for you, and remember that HTML inspector tools like Firefox&#8217;s <a target=_blank title='Firebug' href='http:\/\/getfirebug.com'>Firebug<\/a> are invaluable for helping with the examination of that &#8220;middle&#8221; HTML to tweak on what might be right and what might be wrong with your programming.<\/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='#d19034' onclick='var dv=document.getElementById(\"d19034\"); 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='d19034' 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='#d19088' onclick='var dv=document.getElementById(\"d19088\"); 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='d19088' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Recap to Previous WordPress User Font Families Primer Tutorial as shown below, yesterday &#8230; In the world of client\/server programming it is surprising that PHP (on the server side) and Javascript (on the client side) can so often both be &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-header-section-border-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":[151,213,264,281,438,451,576,652,932,997,1319,1456],"class_list":["post-19088","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-blog","tag-clientserver","tag-cookies","tag-css","tag-firebug","tag-font","tag-html","tag-javascript","tag-php","tag-programming","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19088"}],"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=19088"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19088\/revisions"}],"predecessor-version":[{"id":57363,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19088\/revisions\/57363"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=19088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=19088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=19088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}