WordPress User List Emoji Access Tutorial

Posted on by
WordPress User List Emoji Access Tutorial

WordPress User List Emoji Access Tutorial

The work and personalization functionality of the recent WordPress User List Emoji Primer Tutorial was fine and good, but less impactive in the way that access to the WordPress Interactive Input Blog Page was via the bottommost choice in a ul li list one column wide, and often “below the fold”, as a result. That one column wide is the salient point here. Surely, in these CSS3 days, there is a way to display the ul li list in more than one column, and in so doing, reduce the height needed for an “all above the fold” scenario, in the majority of cases?

We started our research with a Google search of “ul li two columns wide – Google search” which got us to great advice, thanks, at html – How to display an unordered list in two columns? – Stack Overflow … in order for us to work the two part tweakages to our WordPress Blog TwentyTen theme’s (good ol’) header.php as per …

<?php echo ”

ul.children {
font-size: 10px;
width: 580px !important;
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
}

“; ?>

… and …

<?php echo ”

lis = document.getElementsByTagName('a');
for (ilis=0; ilis<lis.length; ilis++) {
if (lis[ilis].innerHTML.indexOf('pink;') != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace('pink;', 'pink;width:580px;'); //180px;'); //212px;');
}
}

“; ?>

… improving ease of access to the “Change User Controllable Font, Border, Background Settings” submenu off the “All Posts” menu (in the sense that more often they will appear “above the fold”), where List Emojis can be defined via their hexadecimal HTML Entity definition(s).

Previous relevant WordPress User List Emoji Primer Tutorial is shown below.

WordPress User List Emoji Primer Tutorial

WordPress User List Emoji Primer Tutorial

We’re revisiting the PHP and Javascript code relating to WordPress User Body Background Primer Tutorial, today, for two reasons …

  • allow the use personalization control over list emojis, optionally, just in case they are fond of a particular emoji here … and …
  • start down the road to using windows.localStorage rather than Document Cookies, at least for this new functionality (and perhaps for the old ideas into the future)

One blog page and the TwentyTen theme’s header.php changed to make this happen. We use CSS to control these list emojis and so in any new CSS styling we make we’ve added the CSS !important (property) clause, which raises the CSS hierarchy priority level for any styling we start adding with our work, which is …

  • optional
  • personal
  • associated with HTTP: or HTTPS: protocol of web browser being used by the user

The code interplay goes like this …

The One blog page, where the user sets up all this as the “Change User Controllable Font, Border, Background Settings” submenu off the “All Posts” menu has …


<script> setTimeout(frnx, 2000); </script>

… quite rightly (script code within a WordPress blog posting is not ideal), its previous placement moved to header.php’s document.body onload arrangements, as per …

<?php echo ”

<body onload=" setTimeout(frnx,2000); if (onlok) { ahashlook(); setInterval(prehideIt, 3000); pp_ref(('' + document.URL), ('' + document.referrer)); if (1 == 1) { lookforbincode(); } lookforhighlight(); postcalendar(); changeasfordownload(); if (cafd == cafd) { cafd=0; } else { cafd=true; } checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); is_mentioned_by(); calendar_pass(); prejustshow(); details_summary(0); pre_last_email_check(); maybevp(); setTimeout(last_email_check,15000); } if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { setTimeout(bylinedo,5000); } else { bylinedo(); } setTimeout(newlpcheck, 3000); " <?php body_class(); ?>>

“; ?>

… and that “function frnx” changes, in header.php, as per …

<?php echo ”

function frnx() {
if (document.getElementById('forced_emoji')) {
if (window.localStorage) {
if (decodeURIComponent(('' + localStorage.getItem('forced_emoji')).replace(/^undefined/g,'').replace(/^null/g,'')) != '') {
if (decodeURIComponent(('' + localStorage.getItem('forced_emoji')).replace(/^undefined/g,'').replace(/^null/g,'')).indexOf('`') != -1) {
document.getElementById('forced_emoji').placeholder=String.fromCodePoint(parseInt(decodeURIComponent(localStorage.getItem('forced_emoji')).split('`')[0],16)) + ' ' + String.fromCodePoint(parseInt(decodeURIComponent(localStorage.getItem('forced_emoji')).split('`')[1],16));
} else {
document.getElementById('forced_emoji').placeholder=String.fromCodePoint(parseInt(decodeURIComponent(localStorage.getItem('forced_emoji')).split('`')[0],16));
}
}
}
}
var mfis=document.getElementById('fmyform');
if (mfis != null) mfis.action=rnxize(document.URL.replace(/-border=/g,'_border=').replace(/-family=/g,'_family='));
}

“; ?>

… and the new user interfacing slots into the One blog page, as per (the “up the top”) …


<p>Please feel free to enter an optional ...</p><br>
<form id='efmyform' method='GET' action='//www.rjmprogramming.com.au/ITblog/'>
<p id='femojip'>Emoji Hex Value eg; 01f98d would be Gorilla 🦍 that might be found at <a target=_blank href=HTTPs://www.fileformat.info/ title=FileFormat>https://www.fileformat.info/</a> (optional and space to re-randomize): <br><input data-name='forced_emoji' id='forced_emoji' type='text' value='' onblur=newlsvsco(this.value); title='Separate any second menu dropdown emoji hex definition by `' onfocus=" this.value=cookieAVal('forced_emoji');"></input> <input style='display:none;' type='button' data-onclick=" location.href=document.getElementById('forced_emoji').title; " value='Show Blog This Way with this Web Browser Session Until a Revisit Here'></input></p>
<input type=hidden name=post value=19140></input><input type='submit' value='Show Blog This Way Until a Revisit Here'></input>
</form>
<br>

… working alongside the new window.localStorage code in amongst the previous Document Cookie code, of before, in header.php, as per the new PHP …

<?php

if (isset($_GET['forced_emoji'])) {
$esubparts=explode("`", str_replace('+',' ',urldecode($_GET['forced_emoji'])));
if ($esubparts[0] != "") {
if (sizeof($esubparts) >= 1) {
if (trim($esubparts[-1 + sizeof($esubparts)]) != '' && sizeof($esubparts) > 1) {
echo "\n\n ul.children li.page_item:before { color:black; content: '" . substr('\\',0,1) . $esubparts[1] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
echo "\n\n ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
} else if (trim($esubparts[-1 + sizeof($esubparts)]) != '') {
echo "\n\n ul.children li.page_item:before { color:black; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
echo "\n\n ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
}
}
}
} else if (isset($_POST['forced_emoji'])) {
$esubparts=explode("`", str_replace('+',' ',urldecode($_POST['forced_emoji'])));
if ($esubparts[0] != "") {
if (sizeof($esubparts) >= 1) {
if (trim($esubparts[-1 + sizeof($esubparts)]) != '' && sizeof($esubparts) > 1) {
echo "\n\n ul.children li.page_item:before { color:black; content: '" . substr('\\',0,1) . $esubparts[1] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
echo "\n\n ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
} else if (trim($esubparts[-1 + sizeof($esubparts)]) != '') {
echo "\n\n ul.children li.page_item:before { color:black; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
echo "\n\n ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
}
}
}
} else if (isset($_SERVER['HTTP_COOKIE']) && 1 == 2) {
if (strpos($_SERVER['HTTP_COOKIE'], "forced_emoji=") !== false) {
$eparts=explode("forced_emoji=", $_SERVER['HTTP_COOKIE']);
$esubparts=explode("`", str_replace('+',' ',urldecode($eparts[1])));
if ($esubparts[0] != "") {
if (sizeof($esubparts) >= 1) {
if (trim($esubparts[-1 + sizeof($esubparts)]) != '' && sizeof($esubparts) > 1) {
echo "\n\n ul.children li.page_item:before { color:black; content: '" . substr('\\',0,1) . $esubparts[1] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
echo "\n\n ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
} else if (trim($esubparts[-1 + sizeof($esubparts)]) != '') {
echo "\n\n ul.children li.page_item:before { color:black; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
echo "\n\n ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" . substr('\\',0,1) . $esubparts[0] . " " . substr('\\',0,1) . "0000a0' !important; } \n\n";
}
}
}
}
}

?>

… and modified Javascript …

<?php echo ”

function cookieAVal(cName) {
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()-1);
if (window.localStorage && cName == 'forced_emoji') {
if (decodeURIComponent(('' + localStorage.getItem('forced_emoji')).replace(/^undefined/g,'').replace(/^null/g,'')) != '') {
if (decodeURIComponent(('' + localStorage.getItem('forced_emoji')).replace(/^undefined/g,'').replace(/^null/g,'')).indexOf('`') != -1) {
document.cookie = cName + "=; expires=" + expireDate.toGMTString();
return decodeURIComponent(localStorage.getItem('forced_emoji'));
} else {
document.cookie = cName + "=; expires=" + expireDate.toGMTString();
return decodeURIComponent(localStorage.getItem('forced_emoji'));
}
}
}
if (document.cookie != '') {
var tCookie=document.cookie.split("; ");


for (var j=0; j<tCookie.length; j++) {
if (cName == tCookie[j].split("=")[0]) {
return decodeURIComponent(tCookie[j].split("=")[1]);
}
}
}
return '';
}

function deleteACookie(goodname) {
if (window.localStorage && goodname == 'forced_emoji') {
if (('' + localStorage.getItem('forced_emoji')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
localStorage.removeItem('forced_emoji');
}
}
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()-1);
//if (("" + cookieAVal(goodname)).length != 0) {
document.cookie = goodname + "=; expires=" + expireDate.toGMTString();
//}
}

function newlsvsco(tvis) {
var origtvis=tvis;
if (eval('' + tvis.length) > 0) {
tvis=tvis.replace(/\#/g,'').replace(/\&/g,'').replace(/\x/g,'').replace(/\X/g,'').replace(/\u/g,'').replace(/\U/g,'').replace(/\//g,'').replace(/\|/g,'`').replace(/\;/g,'`').replace(/\,/g,'`').replace('```','`').replace('``','`').replace('```','`').replace(/\`$/g,'').replace(/\`$/g,'');
if (window.localStorage) {
if (document.getElementById('forced_emoji')) {
document.getElementById('forced_emoji').name=document.getElementById('forced_emoji').id;
}
if (tvis.trim() != '') {
window.localStorage.setItem('forced_emoji', encodeURIComponent(tvis.trim()));
if (document.getElementById('forced_emoji') && (tvis != tvis.trim() || origtvis != tvis)) {
document.getElementById('forced_emoji').value=tvis.trim();
}
} else {
window.localStorage.setItem('forced_emoji', encodeURIComponent(tvis));
}
} else {
var xexpireDate = new Date();
xexpireDate.setMonth(xexpireDate.getMonth()+6);
if (tvis.trim() != '') {
document.cookie = 'forced_emoji=' + encodeURIComponent(tvis.trim()) + '; expires=' + xexpireDate.toGMTString();
if (document.getElementById('forced_emoji') && (tvis != tvis.trim() || origtvis != tvis)) {
document.getElementById('forced_emoji').value=tvis.trim();
}
} else {
document.cookie = 'forced_emoji=' + encodeURIComponent(tvis) + '; expires=' + xexpireDate.toGMTString();
}
}
}
if (1 == 2) { change_ff(this, this.value); }
}

function lookAtCookies() {
//if (window.self !== window.top) {
//if (top.document.URL.indexOf('?pp') != -1) { return ''; }
//}
if (1 == 1 || document.URL.indexOf('?pp') == -1) {
if (window.localStorage) {
if (('' + localStorage.getItem('forced_emoji')).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
var esubparts=decodeURIComponent(('=' + localStorage.getItem('forced_emoji')).split("=")[1]).split('`');
if (eval('' + esubparts.length) >= 1) {
if (esubparts[-1 + esubparts.length].trim() != '' && eval('' + esubparts.length) > 1) {
document.getElementById('bbottom').innerHTML+=(" <style> ul.children li.page_item:before { color:black; content: '" + String.fromCharCode(92) + esubparts[1] + " " + String.fromCharCode(92) + "0000a0' !important; } ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" + String.fromCharCode(92) + esubparts[0] + " " + String.fromCharCode(92) + "0000a0' !important; } </style> ");
} else if (esubparts[-1 + esubparts.length].trim() != '') {
document.getElementById('bbottom').innerHTML+=(" <style> ul.children li.page_item:before { color:black; content: '" + String.fromCharCode(92) + esubparts[0] + " " + String.fromCharCode(92) + "0000a0' !important; } ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" + String.fromCharCode(92) + esubparts[0] + " " + String.fromCharCode(92) + "0000a0' !important; } </style> ");
}
}
if (document.URL.indexOf('?pp') == -1 || 1 == 1) { appendtoa("forced_emoji", "" + localStorage.getItem('forced_emoji')); }
}
}

if (document.cookie != '') {
var tCookie=(document.cookie + "; ").split("; ");
var tc='';


for (var j=0; j<tCookie.length; j++) {
if ("rjmwp_body-background" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> body { background-color: " + tc + " !important; } </style> ");
appendtoa("rjmwp_body-background", "" + encodeURIComponent(tc));
}
if ("rjmwp_masthead-border" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> #masthead { border: " + tc + " !important; } </style> ");
appendtoa("rjmwp_masthead-border", "" + encodeURIComponent(tc));
}
if ("rjmwp_base_font-family" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> body, input, textarea, .page-title span, .pingback a.url { font-family: " + tc + " !important; } </style> ");
appendtoa("rjmwp_base_font-family", "" + encodeURIComponent(tc));
}
if ("rjmwp_posttitle_font-family" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> 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: " + tc + " !important; } </style> ");
appendtoa("rjmwp_posttitle_font-family", "" + encodeURIComponent(tc));
}
if ("rjmwp_blogtitle_font-family" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> #ahomeis { font-family: " + tc + " !important; } </style> ");
appendtoa("rjmwp_blogtitle_font-family", "" + encodeURIComponent(tc));
}


if (1 == 2 && "forced_emoji" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
var esubparts=decodeURIComponent(tCookie[j].split("=")[1]).split('`');
if (eval('' + esubparts.length) >= 1) {
if (esubparts[-1 + esubparts.length].trim() != '' && eval('' + esubparts.length) > 1) {
document.getElementById('bbottom').innerHTML+=(" <style> ul.children li.page_item:before { color:black; content: '" + String.fromCharCode(92) + esubparts[1] + " " + String.fromCharCode(92) + "0000a0' !important; ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" + String.fromCharCode(92) + esubparts[0] + " " + String.fromCharCode(92) + "0000a0' !important; } </style> ");
} else if (esubparts[-1 + esubparts.length].trim() != '') {
document.getElementById('bbottom').innerHTML+=(" <style> ul.children li.page_item:before { color:black; content: '" + String.fromCharCode(92) + esubparts[0] + " " + String.fromCharCode(92) + "0000a0' !important; ul.noclass li:before { list-style: none; float: left; margin-left: -15px; color: purple; font-size: 1.2em; font-weight: bold; content: '" + String.fromCharCode(92) + esubparts[0] + " " + String.fromCharCode(92) + "0000a0' !important; } </style> ");
}
}
if (document.URL.indexOf('?pp') == -1 || 1 == 1) { appendtoa("forced_emoji", "" + encodeURIComponent(tc)); }
}


}
}
}
return '';
}

function cookie_fonts() {
var oidea;
var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_base_font-family"])) { echo urldecode($_POST["rjmwp_base_font-family"]); } else { echo " "; } ?>';
var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_blogtitle_font-family"])) { echo urldecode($_POST["rjmwp_blogtitle_font-family"]); } else { echo " "; } ?>';
var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_posttitle_font-family"])) { echo urldecode($_POST["rjmwp_posttitle_font-family"]); } else { echo " "; } ?>';
var expireDate;
lookAtCookies();
var masthead_border=location.search.split('rjmwp_masthead-border=')[1] ? decodeURIComponent(location.search.split('rjmwp_masthead-border=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_masthead-border"])) { echo urldecode($_POST["rjmwp_masthead-border"]); } else { echo " "; } ?>';
var body_background=location.search.split('rjmwp_body-background=')[1] ? decodeURIComponent(location.search.split('rjmwp_body-background=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_body-background"])) { echo urldecode($_POST["rjmwp_body-background"]); } else { echo " "; } ?>';
if (body_background.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "rjmwp_body-background=" + encodeURIComponent(body_background) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_body-background", "" + encodeURIComponent(body_background));
} else if (body_background == '' && document.URL.indexOf('-background=') != -1) {
deleteACookie('rjmwp_body-background');
}
oidea=document.getElementById('rjmwp_body-background');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_body-background');
}

var femojis=location.search.split('forced_emoji=')[1] ? decodeURIComponent(location.search.split('forced_emoji=')[1].split('&')[0]) : '<?php if (isset($_POST["forced_emoji"])) { echo urldecode($_POST["forced_emoji"]); } else { echo " "; } ?>';
if (femojis.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "forced_emoji=" + encodeURIComponent(femojis) + "; expires=" + expireDate.toGMTString();
if (document.URL.indexOf('?pp') == -1 || 1 == 1) { appendtoa("forced_emoji", "" + encodeURIComponent(femojis)); }
} else if (femojis == '' && document.URL.indexOf('-background=') != -1) {
deleteACookie('forced_emoji');
}
oidea=document.getElementById('forced_emoji');
if (oidea != null) {
oidea.value=cookieAVal('forced_emoji');
}

if (masthead_border.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "rjmwp_masthead-border=" + encodeURIComponent(masthead_border) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_masthead-border", "" + encodeURIComponent(masthead_border));
} else if (masthead_border == '' && document.URL.indexOf('-border=') != -1) {
deleteACookie('rjmwp_masthead-border');
}
oidea=document.getElementById('rjmwp_masthead-border');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_masthead-border');
}
if (base_font.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "rjmwp_base_font-family=" + encodeURIComponent(base_font) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_base_font-family", "" + encodeURIComponent(base_font));
} else if (base_font == '' && document.URL.indexOf('-family=') != -1) {
deleteACookie('rjmwp_base_font-family');
}
oidea=document.getElementById('rjmwp_base_font-family');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_base_font-family');
}
if (blogtitle_font.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
//alert(918);
document.cookie = "rjmwp_blogtitle_font-family=" + encodeURIComponent(blogtitle_font) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_blogtitle_font-family", "" + encodeURIComponent(blogtitle_font));
} else if (blogtitle_font == '' && document.URL.indexOf('-family=') != -1) {
//alert(928);
deleteACookie('rjmwp_blogtitle_font-family');
}
oidea=document.getElementById('rjmwp_blogtitle_font-family');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_blogtitle_font-family');
}
if (posttitle_font.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "rjmwp_posttitle_font-family=" + encodeURIComponent(posttitle_font) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_posttitle_font-family", "" + encodeURIComponent(posttitle_font));
} else if (posttitle_font == '' && document.URL.indexOf('-family=') != -1) {
deleteACookie('rjmwp_posttitle_font-family');
}
oidea=document.getElementById('rjmwp_posttitle_font-family');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_posttitle_font-family');
}
<?php
if (isset($_SESSION['ourcss'])) {
echo "\n" . ' appendtoa("cssextra", "" + user_encodeURIComponent("' . str_replace('"','" + String.fromCharCode(34) + "',str_replace('+',' ',urldecode($_SESSION['ourcss']))) . '")); ' . "\n";
}
if (isset($_SESSION['ourprint'])) {
echo "\n" . ' appendtoa("printextra", "" + user_encodeURIComponent("' . str_replace('"','" + String.fromCharCode(34) + "',str_replace('+',' ',urldecode($_SESSION['ourprint']))) . '")); ' . "\n";
}
?>
}
}

“; ?>

Previous relevant WordPress User Body Background Primer Tutorial is shown below.

WordPress User Body Background Primer Tutorial

WordPress User Body Background Primer Tutorial

Similarly to two days ago (with WordPress User Header Section Border Primer Tutorial as shown below), but we’ll be adding new Body Background (Colour) user controllable functionality (within any one web browser session), let’s recap to …

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’t be so surprising, since they both share the mutual “HTML” friend in the middle.

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 font families to use when viewing this blog. Should the user go down that route of specifying their own font families for any/all of …

  • blog title
  • post title
  • post contents (or “innards”)

… 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 font family or leaves the blog to pick its own default font family.

And what is the mechanism for the user to control that? Web browser URLs will do it, or some All Post menu submenus we’ve written for the purpose.

So what are the two ways for the client/server Javascript/PHP cookie access to work?

… same basic scenario today, but let’s try three other ideas, namely …

  • let’s just have the one Blog Page handling all these user controlled CSS concepts … which brings into play …
  • let’s start allowing the use of an HTML form method=POST, because we are using PHP
  • let’s try to not run into caching issues (which I’m still thinking might be combining with our ob_start blog speed ideas to cause issues sometimes … please read WordPress Blog PHP mod_deflate Speed Improvement Tutorial) by adding random $_GET[] components so that URLs involved are unique within sessions (as a way to try to encourage a lack of cacheing by your web browser for our purposes, here, only)

And let’s start the other way around explaining the, now, one submenu off the All Posts menu, and let’s start you with the one HTML form method=POST WordPress webpage contents to oversee the user usage of this functionality …


<form id='fmyform' method='POST' action='./'>
<p>Please feel free to enter a ...</p><br>
<p id='rjm_wp_body_background'>Background Colour (CSS Styling (eg. green)) to use for the Blog Body Section (nothing uses default and you get a preview as you tab out of the text box): <br><input name='rjmwp_body-background' id='rjm_wp_body-background' type='text' value='' onblur=' change_ff(this, this.value); ' title='//www.rjmprogramming.com.au/wordpress/?rjm_wp_body-background=' onfocus=" this.value=cookieAVal('rjm_wp_body-background');"></input> <input style='display:none;' type='button' onclick=" location.href=document.getElementById('rjm_wp_body-background').title; " value='Show Blog This Way with this Web Browser Session Until a Revisit Here'></input></p>
<p id='rjm_wp_masthead_border'>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): <br><input name='rjmwp_masthead-border' id='rjm_wp_masthead-border' type='text' value='' onblur=' change_ff(this, this.value); ' title='//www.rjmprogramming.com.au/wordpress/?rjm_wp_masthead-border=' onfocus=" this.value=cookieAVal('rjm_wp_masthead-border');"></input> <input style='display:none;' type='button' onclick=" location.href=document.getElementById('rjm_wp_masthead-border').title; " value='Show Blog This Way with this Web Browser Session Until a Revisit Here'></input></p>
<p id='rjm_wp_blogtitle_font_family'>Font Family to use for the Blog Title (nothing uses default and you get a preview as you tab out of the text box): <br><input name='rjmwp_blogtitle_font-family' id='rjm_wp_blogtitle_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='//www.rjmprogramming.com.au/wordpress/?rjm_wp_blogtitle_font-family=' onfocus=" this.value=cookieAVal('rjm_wp_blogtitle_font-family');"></input> <input style='display:none;' type='button' onclick=" location.href=document.getElementById('rjm_wp_blogtitle_font-family').title; " value='Show Blog This Way with this Web Browser Session Until a Revisit Here'></input></p>
<p id='rjm_wp_posttitle_font_family'>Font Family to use for the Post Title (nothing uses default and you get a preview as you tab out of the text box): <br><input name='rjmwp_posttitle_font-family' id='rjm_wp_posttitle_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='//www.rjmprogramming.com.au/wordpress/?rjm_wp_posttitle_font-family=' onfocus=" this.value=cookieAVal('rjm_wp_posttitle_font-family');"></input> <input style='display:none;' type='button' onclick=" location.href=document.getElementById('rjm_wp_posttitle_font-family').title; " value='Show Blog This Way with this Web Browser Session Until a Revisit Here'></input></p>
<p id='rjm_wp_base_font_family'>Font Family to use for the Post Contents (nothing uses default and you get a preview as you tab out of the text box): <br><input name='rjmwp_base_font-family' id='rjm_wp_base_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='//www.rjmprogramming.com.au/wordpress/?rjm_wp_base_font-family=' onfocus=" this.value=cookieAVal('rjm_wp_base_font-family');"></input> <input style='display:none;' type='button' onclick=" location.href=document.getElementById('rjm_wp_base_font-family').title; " value='Show Blog This Way with this Web Browser Session Until a Revisit Here'></input></p>
<input type='submit' value='Show Blog This Way with this Web Browser Session Until a Revisit Here'></input>
<script> setTimeout(frnx, 2000); </script>

And let’s do the header.php bits in the order in which they appear …

Firstly, here’s new (bold) PHP placed before the </style> ending part of the code of header.php we’ve set aside for local CSS styling code …



<?php
$font_family="Verdana";
$blogtitle_font_family="Verdana";
$posttitle_font_family='"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif';
$masthead_border="";
$body_background="";
if (isset($_GET['rjmwp_body-background'])) {
if ($_GET['rjmwp_body-background'] != "") {
echo "\n\n body { background-color: " . urldecode($_GET['rjmwp_body-background']) . " !important; } \n\n";
}
} else if (isset($_POST['rjmwp_body-background'])) {
if ($_POST['rjmwp_body-background'] != "") {
echo "\n\n body { background-color: " . urldecode($_POST['rjmwp_body-background']) . " !important; } \n\n";
}
} else if (isset($_SERVER['HTTP_COOKIE'])) {
if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_body-background=") !== false) {
$parts=explode("rjmwp_body-background=", $_SERVER['HTTP_COOKIE']);
$subparts=explode(";", $parts[1]);
if ($subparts[0] != "") echo "\n\n body { background-color: " . urldecode($subparts[0]) . " !important; } \n\n";
}
}
if (isset($_GET['rjmwp_masthead-border'])) {
if ($_GET['rjmwp_masthead-border'] != "") {
echo "\n\n #masthead { border: " . returldecode($_GET['rjmwp_masthead-border']) . " !important; } \n\n";
}
} else if (isset($_POST['rjmwp_masthead-border'])) {
if ($_POST['rjmwp_masthead-border'] != "") {
echo "\n\n #masthead { border: " . returldecode($_POST['rjmwp_masthead-border']) . " !important; } \n\n";
}
} else if (isset($_SERVER['HTTP_COOKIE'])) {
if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_masthead-border=") !== false) {
$parts=explode("rjmwp_masthead-border=", $_SERVER['HTTP_COOKIE']);
$subparts=explode(";", $parts[1]);
if ($subparts[0] != "") echo "\n\n #masthead { border: " . returldecode($subparts[0]) . " !important; } \n\n";
}
}
if (isset($_GET['rjmwp_base_font-family'])) {
if ($_GET['rjmwp_base_font-family'] != "") {
echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . returldecode($_GET['rjmwp_base_font-family']) . " !important; } \n\n";
//$_SESSION['rjmwp_base_font-family']=$_GET['rjmwp_base_font-family'];
}
//} else if (isset($_SESSION['rjmwp_base_font-family'])) {
// echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . returldecode($_SESSION['rjmwp_base_font-family']) . " !important; } \n\n";
} else if (isset($_POST['rjmwp_base_font-family'])) {
if ($_POST['rjmwp_base_font-family'] != "") {
echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . returldecode($_POST['rjmwp_base_font-family']) . " !important; } \n\n";
//$_SESSION['rjmwp_base_font-family']=$_POST['rjmwp_base_font-family'];
}
//} else if (isset($_SESSION['rjmwp_base_font-family'])) {
// echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . returldecode($_SESSION['rjmwp_base_font-family']) . " !important; } \n\n";
} else if (isset($_SERVER['HTTP_COOKIE'])) {
if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_base_font-family=") !== false) {
$parts=explode("rjmwp_base_font-family=", $_SERVER['HTTP_COOKIE']);
$subparts=explode(";", $parts[1]);
if ($subparts[0] != "") echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . returldecode($subparts[0]) . " !important; } \n\n";
}
}
if (isset($_GET['rjmwp_blogtitle_font-family'])) {
if ($_GET['rjmwp_blogtitle_font-family'] != "") {
echo "\n\n #ahomeis { font-family: " . returldecode($_GET['rjmwp_blogtitle_font-family']) . " !important; } \n\n";
//$_SESSION['rjmwp_blogtitle_font-family']=$_GET['rjmwp_blogtitle_font-family'];
}
//} else if (isset($_SESSION['rjmwp_blogtitle_font-family'])) {
// echo "\n\n #ahomeis { font-family: " . returldecode($_SESSION['rjmwp_blogtitle_font-family']) . " !important; } \n\n";
} else if (isset($_POST['rjmwp_blogtitle_font-family'])) {
if ($_GET['rjmwp_blogtitle_font-family'] != "") {
echo "\n\n #ahomeis { font-family: " . returldecode($_POST['rjmwp_blogtitle_font-family']) . " !important; } \n\n";
//$_SESSION['rjmwp_blogtitle_font-family']=$_POSR['rjmwp_blogtitle_font-family'];
}
//} else if (isset($_SESSION['rjmwp_blogtitle_font-family'])) {
// echo "\n\n #ahomeis { font-family: " . returldecode($_SESSION['rjmwp_blogtitle_font-family']) . " !important; } \n\n";
} else if (isset($_SERVER['HTTP_COOKIE'])) {
if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_blogtitle_font-family=") !== false) {
$parts=explode("rjmwp_blogtitle_font-family=", $_SERVER['HTTP_COOKIE']);
$subparts=explode(";", $parts[1]);
if ($subparts[0] != "") echo "\n\n #ahomeis { font-family: " . returldecode($subparts[0]) . " !important; } \n\n";
}
}
if (isset($_GET['rjmwp_posttitle_font-family'])) {
if ($_GET['rjmwp_posttitle_font-family'] != "") {
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']) . " !important; } \n\n";
//$_SESSION['rjmwp_posttitle_font-family']=$_GET['rjmwp_posttitle_font-family'];
}
//} else if (isset($_SESSION['rjmwp_posttitle_font-family'])) {
// 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($_SESSION['rjmwp_posttitle_font-family']) . " !important; } \n\n";
} else if (isset($_SERVER['HTTP_COOKIE'])) {
if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_posttitle_font-family=") !== false) {
$parts=explode("rjmwp_posttitle_font-family=", $_SERVER['HTTP_COOKIE']);
$subparts=explode(";", $parts[1]);
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]) . " !important; } \n\n";
}
}
?>

Secondly, here’s new Javascript placed before the </script> ending part of the code of header.php we’ve set aside for local (bold) Javascript code (and could be placed above any <body … onload= blah blah > that call it) …



 
function cookieAVal(cName) {
if (document.cookie != '') {
var tCookie=document.cookie.split("; ");
 
for (var j=0; j<tCookie.length; j++) {
if (cName == tCookie[j].split("=")[0]) {
return decodeURIComponent(tCookie[j].split("=")[1]);
}
}
}
return '';
}
 
function deleteACookie(goodname) {
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()-1);
//if (("" + cookieAVal(goodname)).length != 0) {
document.cookie = goodname + "=; expires=" + expireDate.toGMTString();
//}
}
 
function lookAtCookies() {
if (document.cookie != '') {
var tCookie=(document.cookie + "; ").split("; ");
var tc='';
 
for (var j=0; j<tCookie.length; j++) {
if ("rjmwp_body-background" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> body { background-color: " + tc + " !important; } </style> ");
appendtoa("rjmwp_body-background", "" + encodeURIComponent(tc));
}
if ("rjmwp_masthead-border" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> #masthead { border: " + tc + " !important; } </style> ");
appendtoa("rjmwp_masthead-border", "" + encodeURIComponent(tc));
}
if ("rjmwp_base_font-family" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> body, input, textarea, .page-title span, .pingback a.url { font-family: " + tc + " !important; } </style> ");
appendtoa("rjmwp_base_font-family", "" + encodeURIComponent(tc));
}
if ("rjmwp_posttitle_font-family" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> 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: " + tc + " !important; } </style> ");
appendtoa("rjmwp_posttitle_font-family", "" + encodeURIComponent(tc));
}
if ("rjmwp_blogtitle_font-family" == tCookie[j].split("=")[0]) {
tc=tCookie[j].split("=")[1];
if (tc.indexOf('%20') != -1) tc=decodeURIComponent(tCookie[j].split("=")[1]);
document.getElementById('bbottom').innerHTML+=(" <style> #ahomeis { font-family: " + tc + " !important; } </style> ");
appendtoa("rjmwp_blogtitle_font-family", "" + encodeURIComponent(tc));
}
}
}
return '';
}
 
function cookie_fonts() {
var oidea;
var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_base_font-family"])) { echo urldecode($_POST["rjmwp_base_font-family"]); } else { echo " "; } ?>';
var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_blogtitle_font-family"])) { echo urldecode($_POST["rjmwp_blogtitle_font-family"]); } else { echo " "; } ?>';
var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_posttitle_font-family"])) { echo urldecode($_POST["rjmwp_posttitle_font-family"]); } else { echo " "; } ?>';
var expireDate;
lookAtCookies();
var masthead_border=location.search.split('rjmwp_masthead-border=')[1] ? decodeURIComponent(location.search.split('rjmwp_masthead-border=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_masthead-border"])) { echo urldecode($_POST["rjmwp_masthead-border"]); } else { echo " "; } ?>';
var body_background=location.search.split('rjmwp_body-background=')[1] ? decodeURIComponent(location.search.split('rjmwp_body-background=')[1].split('&')[0]) : '<?php if (isset($_POST["rjmwp_body-background"])) { echo urldecode($_POST["rjmwp_body-background"]); } else { echo " "; } ?>';
if (body_background.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "rjmwp_body-background=" + encodeURIComponent(body_background) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_body-background", "" + encodeURIComponent(body_background));
} else if (body_background == '' && document.URL.indexOf('-background=') != -1) {
deleteACookie('rjmwp_body-background');
}
oidea=document.getElementById('rjmwp_body-background');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_body-background');
}
if (masthead_border.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "rjmwp_masthead-border=" + encodeURIComponent(masthead_border) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_masthead-border", "" + encodeURIComponent(masthead_border));
} else if (masthead_border == '' && document.URL.indexOf('-border=') != -1) {
deleteACookie('rjmwp_masthead-border');
}
oidea=document.getElementById('rjmwp_masthead-border');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_masthead-border');
}
if (base_font.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "rjmwp_base_font-family=" + encodeURIComponent(base_font) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_base_font-family", "" + encodeURIComponent(base_font));
} else if (base_font == '' && document.URL.indexOf('-family=') != -1) {
deleteACookie('rjmwp_base_font-family');
}
oidea=document.getElementById('rjmwp_base_font-family');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_base_font-family');
}
if (blogtitle_font.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
//alert(918);
document.cookie = "rjmwp_blogtitle_font-family=" + encodeURIComponent(blogtitle_font) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_blogtitle_font-family", "" + encodeURIComponent(blogtitle_font));
} else if (blogtitle_font == '' && document.URL.indexOf('-family=') != -1) {
//alert(928);
deleteACookie('rjmwp_blogtitle_font-family');
}
oidea=document.getElementById('rjmwp_blogtitle_font-family');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_blogtitle_font-family');
}
if (posttitle_font.replace(' ','') != '') {
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "rjmwp_posttitle_font-family=" + encodeURIComponent(posttitle_font) + "; expires=" + expireDate.toGMTString();
appendtoa("rjmwp_posttitle_font-family", "" + encodeURIComponent(posttitle_font));
} else if (posttitle_font == '' && document.URL.indexOf('-family=') != -1) {
deleteACookie('rjmwp_posttitle_font-family');
}
oidea=document.getElementById('rjmwp_posttitle_font-family');
if (oidea != null) {
oidea.value=cookieAVal('rjmwp_posttitle_font-family');
}
}
 
function frnx() {
var mfis=document.getElementById('fmyform');
if (mfis != null) mfis.action=rnxize(document.URL.replace(/-border=/g,'_border=').replace(/-family=/g,'_family='));
}
 
function rnxize(iuis) {
var inuis=iuis;
var rsuff='';
if (inuis.indexOf('rnx=') == -1) rsuff='rnx=' + Math.floor(Math.random() * 800000) + 5;
if (inuis.indexOf('#') != -1) {
if (inuis.indexOf('?') != -1) {
inuis=inuis.replace('#', '&' + rsuff + '#');
} else {
inuis=inuis.replace('#', '?' + rsuff + '#');
}
} else {
if (inuis.indexOf('?') != -1) {
inuis=inuis + '&' + rsuff;
} else {
inuis=inuis + '?' + rsuff;
}
}
//alert(inuis);
return inuis;
}
 
function appendtoa(thisiid, thisv) {
var asis=document.getElementsByTagName("a");
var rsuff='';
if (thisv.indexOf('%20') != -1) thisv=decodeURIComponent(thisv);
for (var i=0; i<asis.length; i++) {
if (asis[i].href.indexOf(thisiid) == -1) {
if (asis[i].href.indexOf("/wordpress/") != -1 || asis[i].href.indexOf("/ITblog/") != -1 && asis[i].href.indexOf("/sitemap") == -1) {
rsuff='';
if (asis[i].href.indexOf('rnx=') == -1) rsuff='&rnx=' + Math.floor(Math.random() * 800000) + 5;
if (asis[i].href.indexOf(thisiid + '=&') != -1) {
asis[i].href=asis[i].href.replace(thisiid + '=&', thisiid + '=' + encodeURIComponent(thisv) + rsuff + '&');
} else {
if (asis[i].href.indexOf('#') != -1) {
if (asis[i].href.indexOf('?') != -1) {
asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '&' + thisiid + '=' + encodeURIComponent(thisv) + rsuff + '#');
} else {
asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '?' + thisiid + '=' + encodeURIComponent(thisv) + rsuff + '#');
}
} else {
if (asis[i].href.indexOf('?') != -1) {
asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '&' + thisiid + '=' + encodeURIComponent(thisv) + rsuff;
} else {
asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '?' + thisiid + '=' + encodeURIComponent(thisv) + rsuff;
}
}
}
}
}
}
}
 
function change_ff(thisi, thisv) {
//thisi.title='#';
if (thisv != '' || 1 == 1) {
var rsuff='';
if (document.URL.indexOf('rnx=') == -1) rsuff='&rnx=' + Math.floor(Math.random() * 800000) + 5;
if (thisv.indexOf('%20') != -1) thisv=decodeURIComponent(thisv);
if (thisv != '' && thisi.id.indexOf("border") != -1) thisi.style.border = thisv;
if (thisv != '' && thisi.id.indexOf("background") != -1) thisi.style.backgroundColor = thisv;
if (thisv != '' && thisi.id.indexOf("family") != -1) thisi.style.fontFamily = thisv;
if (document.URL.indexOf(thisi.id + '=&') != -1) {
thisi.title=document.URL.replace(thisi.id + '=&', thisi.id + '=' + encodeURIComponent(thisv) + rsuff + '&');
} else {
if (document.URL.indexOf('#') != -1) {
if (document.URL.indexOf('?') != -1) {
thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '&' + thisi.id + '=' + encodeURIComponent(thisv) + rsuff + '#');
} else {
thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '?' + thisi.id + '=' + encodeURIComponent(thisv) + rsuff + '#');
}
} else {
if (document.URL.indexOf('?') != -1) {
thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '&' + thisi.id + '=' + encodeURIComponent(thisv) + rsuff;
} else {
thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '?' + thisi.id + '=' + encodeURIComponent(thisv) + rsuff;
}
}
}
if (thisv != '' && thisi.id.indexOf("border") != -1) document.getElementById(thisi.id.replace('-','_')).style.border = thisv;
if (thisv != '' && thisi.id.indexOf("background") != -1) document.getElementById(thisi.id.replace('-','_')).style.backgroundColor = thisv;
if (thisv != '' && thisi.id.indexOf("family") != -1) document.getElementById(thisi.id.replace('-','_')).style.fontFamily = thisv;
}
}

...
</script>
</head>
<body onload=" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); " <?php body_class(); ?>>

Please feel free to try it all off the All Posts menu above.

Previous WordPress User Header Section Border Primer Tutorial is shown below.

WordPress User Header Section Border Primer Tutorial

WordPress User Header Section Border Primer Tutorial

Recap to

Previous WordPress User Font Families Primer Tutorial as shown below, yesterday …

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’t be so surprising, since they both share the mutual “HTML” friend in the middle.

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 font families to use when viewing this blog. Should the user go down that route of specifying their own font families for any/all of …

  • blog title
  • post title
  • post contents (or “innards”)

… 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 font family or leaves the blog to pick its own default font family.

And what is the mechanism for the user to control that? Web browser URLs will do it, or some All Post menu submenus we’ve written for the purpose.

So what are the two ways for the client/server Javascript/PHP cookie access to work?

… well, this was good in theory, but its “backdoor” approach to WordPress development (to see some good information here please read this) didn’t take into account the way WordPress manipulates client cookies, and controls them in scenarios where users are logged in, which we don’t want to demand here … so … lowering expectations a bit … 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 “not using cookies” so much anymore, is to fix the HTML a links on the page (via function appendtoa(thisiid, thisv) 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 “looks” via the “All Posts” submenu options.

And so, below, we add in new functionality for the user to control the blog’s Header Section’s Border look, and you’ll see these two approaches in action in two separate sections of the WordPress Blog’s PHP header.php (usual file to make changes to) as below (where we moved the timing of this functionality to being the last thing done at the document.body onload event …

  • Javascript can access DOM document.cookie and also maintain the cookies via the address bar URL “leads” (bold changes below)


    function cookieAVal(cName) {
    if (document.cookie != '') {
    var tCookie=document.cookie.split("; ");

    for (var j=0; j<tCookie.length; j++) {
    if (cName == tCookie[j].split("=")[0]) {
    return decodeURIComponent(tCookie[j].split("=")[1]);
    }
    }
    }
    return '';
    }

    function deleteACookie(goodname) {
    var expireDate = new Date();
    expireDate.setDate(expireDate.getDate()-1);
    //if (("" + cookieAVal(goodname)).length != 0) {
    document.cookie = goodname + "=;expires=" + expireDate.toGMTString();
    //}
    }

    function lookAtCookies() {
    if (document.cookie != '') {
    var tCookie=document.cookie.split("; ");
    for (var j=0; j #masthead { border: " + decodeURIComponent(tCookie[j].split("=")[1]) + " }

    ");
    appendtoa("rjmwp_masthead-border", "" + encodeURIComponent(decodeURIComponent(tCookie[j].split("=")[1])));
    }
    if ("rjmwp_base_font-family" == tCookie[j].split("=")[0]) {
    document.getElementById('bbottom').innerHTML+=("

    ");
    appendtoa("rjmwp_base_font-family", "" + encodeURIComponent(decodeURIComponent(tCookie[j].split("=")[1])));
    }
    if ("rjmwp_posttitle_font-family" == tCookie[j].split("=")[0]) {
    document.getElementById('bbottom').innerHTML+=("

    ");
    appendtoa("rjmwp_posttitle_font-family", "" + encodeURIComponent(decodeURIComponent(tCookie[j].split("=")[1])));
    }
    if ("rjmwp_blogtitle_font-family" == tCookie[j].split("=")[0]) {
    document.getElementById('bbottom').innerHTML+=("

    ");
    appendtoa("rjmwp_blogtitle_font-family", "" + encodeURIComponent(decodeURIComponent(tCookie[j].split("=")[1])));
    }
    }
    }
    return '';
    }

    function cookie_fonts() {
    var oidea;
    var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : ' ';
    var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : ' ';
    var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : ' ';
    var expireDate;
    lookAtCookies();
    var masthead_border=location.search.split('rjmwp_masthead-border=')[1] ? decodeURIComponent(location.search.split('rjmwp_masthead-border=')[1].split('&')[0]) : ' ';
    if (masthead_border.replace(' ','') != '') {
    expireDate = new Date();
    expireDate.setMonth(expireDate.getMonth()+6);
    document.cookie = "rjmwp_masthead-border=" + encodeURIComponent(masthead_border) + "; expires=" + expireDate.toGMTString();
    appendtoa("rjmwp_masthead-border", "" + encodeURIComponent(masthead_border));
    } else if (masthead_border == '' && document.URL.indexOf('-border=') != -1) {
    deleteACookie('rjmwp_masthead-border');
    }
    oidea=document.getElementById('rjmwp_masthead-border');
    if (oidea != null) {
    oidea.value=cookieAVal('rjmwp_masthead-border');
    }
    if (base_font.replace(' ','') != '') {
    expireDate = new Date();
    expireDate.setMonth(expireDate.getMonth()+6);
    document.cookie = "rjmwp_base_font-family=" + encodeURIComponent(base_font) + "; expires=" + expireDate.toGMTString();
    appendtoa("rjmwp_base_font-family", "" + encodeURIComponent(base_font));
    } else if (base_font == '' && document.URL.indexOf('-family=') != -1) {
    deleteACookie('rjmwp_base_font-family');
    }
    oidea=document.getElementById('rjmwp_base_font-family');
    if (oidea != null) {
    oidea.value=cookieAVal('rjmwp_base_font-family');
    }
    if (blogtitle_font.replace(' ','') != '') {
    expireDate = new Date();
    expireDate.setMonth(expireDate.getMonth()+6);
    //alert(918);
    document.cookie = "rjmwp_blogtitle_font-family=" + encodeURIComponent(blogtitle_font) + "; expires=" + expireDate.toGMTString();
    appendtoa("rjmwp_blogtitle_font-family", "" + encodeURIComponent(blogtitle_font));
    } else if (blogtitle_font == '' && document.URL.indexOf('-family=') != -1) {
    //alert(928);
    deleteACookie('rjmwp_blogtitle_font-family');
    }
    oidea=document.getElementById('rjmwp_blogtitle_font-family');
    if (oidea != null) {
    oidea.value=cookieAVal('rjmwp_blogtitle_font-family');
    }
    if (posttitle_font.replace(' ','') != '') {
    expireDate = new Date();
    expireDate.setMonth(expireDate.getMonth()+6);
    document.cookie = "rjmwp_posttitle_font-family=" + encodeURIComponent(posttitle_font) + "; expires=" + expireDate.toGMTString();
    appendtoa("rjmwp_posttitle_font-family", "" + encodeURIComponent(posttitle_font));
    } else if (posttitle_font == '' && document.URL.indexOf('-family=') != -1) {
    deleteACookie('rjmwp_posttitle_font-family');
    }
    oidea=document.getElementById('rjmwp_posttitle_font-family');
    if (oidea != null) {
    oidea.value=cookieAVal('rjmwp_posttitle_font-family');
    }
    }

    function appendtoa(thisiid, thisv) {
    var asis=document.getElementsByTagName("a");
    for (var i=0; i<asis.length; i++) {
    if (asis[i].href.indexOf(thisiid) == -1) {
    if (asis[i].href.indexOf("/wordpress/") != -1 || asis[i].href.indexOf("/ITblog/") != -1 && asis[i].href.indexOf("/sitemap") == -1) {
    if (asis[i].href.indexOf(thisiid + '=&') != -1) {
    asis[i].href=asis[i].href.replace(thisiid + '=&', thisiid + '=' + encodeURIComponent(thisv) + '&');
    } else {
    if (asis[i].href.indexOf('#') != -1) {
    if (asis[i].href.indexOf('?') != -1) {
    asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '&' + thisiid + '=' + encodeURIComponent(thisv) + '#');
    } else {
    asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=').replace('#', '?' + thisiid + '=' + encodeURIComponent(thisv) + '#');
    }
    } else {
    if (asis[i].href.indexOf('?') != -1) {
    asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '&' + thisiid + '=' + encodeURIComponent(thisv);
    } else {
    asis[i].href=asis[i].href.replace(thisiid + '=',thisiid.replace('-','_') + '=') + '?' + thisiid + '=' + encodeURIComponent(thisv);
    }
    }
    }
    }
    }
    }
    }

    function change_ff(thisi, thisv) {
    //thisi.title='#';
    if (thisv != '' || 1 == 1) {
    if (thisv != '' && thisi.id.indexOf("border") == -1) thisi.style.fontFamily = thisv;
    if (thisv != '' && thisi.id.indexOf("border") != -1) thisi.style.border = thisv;
    if (document.URL.indexOf(thisi.id + '=&') != -1) {
    thisi.title=document.URL.replace(thisi.id + '=&', thisi.id + '=' + encodeURIComponent(thisv) + '&');
    } else {
    if (document.URL.indexOf('#') != -1) {
    if (document.URL.indexOf('?') != -1) {
    thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '&' + thisi.id + '=' + encodeURIComponent(thisv) + '#');
    } else {
    thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '?' + thisi.id + '=' + encodeURIComponent(thisv) + '#');
    }
    } else {
    if (document.URL.indexOf('?') != -1) {
    thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '&' + thisi.id + '=' + encodeURIComponent(thisv);
    } else {
    thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '?' + thisi.id + '=' + encodeURIComponent(thisv);
    }
    }
    }
    if (thisv != '' && thisi.id.indexOf("border") == -1) document.getElementById(thisi.id.replace('-','_')).style.fontFamily = thisv;
    if (thisv != '' && thisi.id.indexOf("border") != -1) document.getElementById(thisi.id.replace('-','_')).style.border = thisv;
    }
    }

    ...
    </script>
    </head>
    <body onload=" setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); " <?php body_class(); ?>>

  • PHP can access $_SERVER variable $_SERVER[‘HTTP_COOKIE’] 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 document.head … but this is not our preferred method if PHP is there, and because it is a WordPress blog, PHP is there (so use it) … alas, the PHP $_SERVER[‘HTTP_COOKIE’] (as might be expected) is not useful for client cookie detection, so added function lookAtCookies() to Javascript above as an alternative client method not using document.header but, rather, appending into document.body <style> blah blah blah </style> information to get the job done) (bold changes below)

    <style>

    .mypclass { color:rgb(185,127,206); }
    #mypid { color:rgb(185,127,206); }
    .mypclass2 { background-color:rgb(185,127,206); color:'black'; }
    .mypclass22 { background-color:rgb(185,127,206); color:'black'; }
    #mypid2 { background-color:rgb(185,127,206); color:'black'; }


    #s {
    width: 55% !important;
    }

    #ahomeis {
    color: #ffffff;
    font: 24pt Arial;
    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);
    }

    <?php
    $font_family="Verdana";
    $blogtitle_font_family="Verdana";
    $posttitle_font_family=='"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif';
    $masthead_border="";
    if (isset($_GET['rjmwp_masthead-border'])) {
    if ($_GET['rjmwp_masthead-border'] != "") {
    echo "\n\n #masthead { border: " . urldecode($_GET['rjmwp_masthead-border']) . "; } \n\n";
    }
    } else if (isset($_SERVER['HTTP_COOKIE'])) {
    if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_masthead-border=") !== false) {
    $parts=explode("rjmwp_masthead-border=", $_SERVER['HTTP_COOKIE']);
    $subparts=explode(";", $parts[1]);
    if ($subparts[0] != "") echo "\n\n #masthead { border: " . urldecode($subparts[0]) . "; } \n\n";
    }
    }
    if (isset($_GET['rjmwp_base_font-family'])) {
    if ($_GET['rjmwp_base_font-family'] != "") {
    echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . urldecode($_GET['rjmwp_base_font-family']) . "; } \n\n";
    }
    } else if (isset($_SERVER['HTTP_COOKIE'])) {
    if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_base_font-family=") !== false) {
    $parts=explode("rjmwp_base_font-family=", $_SERVER['HTTP_COOKIE']);
    $subparts=explode(";", $parts[1]);
    if ($subparts[0] != "") echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . urldecode($subparts[0]) . "; } \n\n";
    }
    }
    if (isset($_GET['rjmwp_blogtitle_font-family'])) {
    if ($_GET['rjmwp_blogtitle_font-family'] != "") {
    echo "\n\n #ahomeis { font-family: " . urldecode($_GET['rjmwp_blogtitle_font-family']) . "; } \n\n";
    }
    } else if (isset($_SERVER['HTTP_COOKIE'])) {
    if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_blogtitle_font-family=") !== false) {
    $parts=explode("rjmwp_blogtitle_font-family=", $_SERVER['HTTP_COOKIE']);
    $subparts=explode(";", $parts[1]);
    if ($subparts[0] != "") echo "\n\n #ahomeis { font-family: " . urldecode($subparts[0]) . "; } \n\n";
    }
    }
    if (isset($_GET['rjmwp_posttitle_font-family'])) {
    if ($_GET['rjmwp_posttitle_font-family'] != "") {
    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";
    }
    } else if (isset($_SERVER['HTTP_COOKIE'])) {
    if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_posttitle_font-family=") !== false) {
    $parts=explode("rjmwp_posttitle_font-family=", $_SERVER['HTTP_COOKIE']);
    $subparts=explode(";", $parts[1]);
    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";
    }
    }
    ?>

    code {
    width:90%;
    background-color:#F9F9F9;
    margin-top: 10px;
    margin-bottom: 10px;
    padding:20px 20px;
    border:1px dashed blue;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }​

    ...
    </style>

Again the mechanism for the user to control this themselves is 4 submenus off the All Posts menu. Blog New Pages like below (for example of 3 “Pick Your Own Blog Header Section Border”) will do it (and show the idea) …


<p id='rjmwp_masthead_border'>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): <br><input id='rjmwp_masthead-border' type='text' value='' onblur=' change_ff(this, this.value); ' title='//www.rjmprogramming.com.au/ITblog/?rjmwp_masthead-border=' onfocus=" this.value=cookieAVal('rjmwp_masthead-border');"></input> <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'></input></p>

You can try it yourself by accessing the All Posts menu to see for yourself. Again, we hope some ideas spring from all this for you, and remember that HTML inspector tools like Firefox’s Firebug are invaluable for helping with the examination of that “middle” HTML to tweak on what might be right and what might be wrong with your programming.

Previous WordPress User Font Families Primer Tutorial is shown below.

WordPress User Font Families Primer Tutorial

WordPress User Font Families Primer Tutorial

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’t be so surprising, since they both share the mutual “HTML” friend in the middle.

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 font families to use when viewing this blog. Should the user go down that route of specifying their own font families for any/all of …

  • blog title
  • post title
  • post contents (or “innards”)

… 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 font family or leaves the blog to pick its own default font family.

And what is the mechanism for the user to control that? Web browser URLs will do it, or some All Post menu submenus we’ve written for the purpose.

So what are the two ways for the client/server Javascript/PHP cookie access to work?

You’ll see these two approaches in action in two separate sections of the WordPress Blog’s PHP header.php (usual file to make changes to) as below …

  • Javascript can access DOM document.cookie and also maintain the cookies via the address bar URL “leads” (bold changes below)


    function cookieAVal(cName) {
    if (document.cookie != '') {
    var tCookie=document.cookie.split("; ");

    for (var j=0; j<tCookie.length; j++) {
    if (cName == tCookie[j].split("=")[0]) {
    return decodeURIComponent(tCookie[j].split("=")[1]);
    }
    }
    }
    return '';
    }

    function deleteACookie(goodname) {
    var expireDate = new Date();
    expireDate.setDate(expireDate.getDate()-1);
    //if (("" + cookieAVal(goodname)).length != 0) {
    document.cookie = goodname + "=;expires=" + expireDate.toGMTString();
    //}
    }

    function lookAtCookies() {
    if (document.cookie != '') {
    var tCookie=document.cookie.split("; ");
    for (var j=0; j<tCookie.length; j++) {
    if ("rjmwp_base_font-family" == tCookie[j].split("=")[0]) {
    document.write(" <style> body, input, textarea, .page-title span, .pingback a.url { font-family: " + decodeURIComponent(tCookie[j].split("=")[1]) + " } </style> ";
    }
    if ("rjmwp_posttitle_font-family" == tCookie[j].split("=")[0]) {
    document.write(" <style> 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]) + " } </style> ";
    }
    if ("rjmwp_blogtitle_font-family" == tCookie[j].split("=")[0]) {
    document.write(" <style> #ahomeis { font-family: " + decodeURIComponent(tCookie[j].split("=")[1]) + " } </style> ";
    }
    }
    }
    return '';
    }

    function cookie_fonts() {
    var oidea;
    var base_font=location.search.split('rjmwp_base_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_base_font-family=')[1].split('&')[0]) : ' ';
    var blogtitle_font=location.search.split('rjmwp_blogtitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_blogtitle_font-family=')[1].split('&')[0]) : ' ';
    var posttitle_font=location.search.split('rjmwp_posttitle_font-family=')[1] ? decodeURIComponent(location.search.split('rjmwp_posttitle_font-family=')[1].split('&')[0]) : ' ';
    var expireDate;
    lookAtCookies();
    if (base_font.replace(' ','') != '') {
    expireDate = new Date();
    expireDate.setMonth(expireDate.getMonth()+6);
    document.cookie = "rjmwp_base_font-family=" + encodeURIComponent(base_font) + ";expires=" + expireDate.toGMTString();
    } else if (base_font == '') {
    deleteACookie('rjmwp_base_font-family');
    }
    oidea=document.getElementById('rjmwp_base_font-family');
    if (oidea != null) {
    oidea.value=cookieAVal('rjmwp_base_font-family');
    }
    if (blogtitle_font.replace(' ','') != '') {
    expireDate = new Date();
    expireDate.setMonth(expireDate.getMonth()+6);
    document.cookie = "rjmwp_blogtitle_font-family=" + encodeURIComponent(blogtitle_font) + ";expires=" + expireDate.toGMTString();
    } else if (blogtitle_font == '') {
    deleteACookie('rjmwp_blogtitle_font-family');
    }
    oidea=document.getElementById('rjmwp_blogtitle_font-family');
    if (oidea != null) {
    oidea.value=cookieAVal('rjmwp_blogtitle_font-family');
    }
    if (posttitle_font.replace(' ','') != '') {
    expireDate = new Date();
    expireDate.setMonth(expireDate.getMonth()+6);
    document.cookie = "rjmwp_posttitle_font-family=" + encodeURIComponent(posttitle_font) + ";expires=" + expireDate.toGMTString();
    } else if (posttitle_font == '') {
    deleteACookie('rjmwp_posttitle_font-family');
    }
    oidea=document.getElementById('rjmwp_posttitle_font-family');
    if (oidea != null) {
    oidea.value=cookieAVal('rjmwp_posttitle_font-family');
    }
    }

    function change_ff(thisi, thisv) {
    //thisi.title='#';
    if (thisv != '' || 1 == 1) {
    if (thisv != '') thisi.style.fontFamily = thisv;
    if (document.URL.indexOf(thisi.id + '=&') != -1) {
    thisi.title=document.URL.replace(thisi.id + '=&', thisi.id + '=' + encodeURIComponent(thisv) + '&');
    } else {
    if (document.URL.indexOf('#') != -1) {
    if (document.URL.indexOf('?') != -1) {
    thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '&' + thisi.id + '=' + encodeURIComponent(thisv) + '#');
    } else {
    thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=').replace('#', '?' + thisi.id + '=' + encodeURIComponent(thisv) + '#');
    }
    } else {
    if (document.URL.indexOf('?') != -1) {
    thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '&' + thisi.id + '=' + encodeURIComponent(thisv);
    } else {
    thisi.title=document.URL.replace(thisi.id + '=',thisi.id.replace('-','_') + '=') + '?' + thisi.id + '=' + encodeURIComponent(thisv);
    }
    }
    }
    if (thisv != '') document.getElementById(thisi.id.replace('-','_')).style.fontFamily = thisv;
    }
    }

    function courseCookies() {

    cookie_fonts(); // User font checks

    img_alt(); // Make sure all img have alt (=title)
    ajaxcontexthelp_mode(); // Check on Context Help mode
    download_mode(); // Check on Download mode
    metasep(); // meta-sep class dropdown
    checkpt(); // category and tag "oldest"
    rptwo(); // Recent Post images
    ul_li_noclass(); // Alternative to bullet ul/li lists
    winit(); // Ajax functionality 26/11/2014 ... slow hover ... not for mobile
    checkMarginLeftImages();
  • PHP can access $_SERVER variable $_SERVER[‘HTTP_COOKIE’] 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 document.head … but this is not our preferred method if PHP is there, and because it is a WordPress blog, PHP is there (so use it) … alas, the PHP $_SERVER[‘HTTP_COOKIE’] (as might be expected) is not useful for client cookie detection, so added function lookAtCookies() to Javascript above as an alternative client method not using document.header but, rather, appending into document.body <style> blah blah blah </style> information to get the job done) (bold changes below)

    <style>

    .mypclass { color:rgb(185,127,206); }
    #mypid { color:rgb(185,127,206); }
    .mypclass2 { background-color:rgb(185,127,206); color:'black'; }
    .mypclass22 { background-color:rgb(185,127,206); color:'black'; }
    #mypid2 { background-color:rgb(185,127,206); color:'black'; }


    #s {
    width: 55% !important;
    }

    #ahomeis {
    color: #ffffff;
    font: 24pt Arial;
    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);
    }

    <?php
    $font_family="Verdana";
    $blogtitle_font_family="Verdana";
    $posttitle_font_family=='"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif';
    if (isset($_GET['rjmwp_base_font-family'])) {
    if ($_GET['rjmwp_base_font-family'] != "") {
    echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . urldecode($_GET['rjmwp_base_font-family']) . "; } \n\n";
    }
    } else if (isset($_SERVER['HTTP_COOKIE'])) {
    if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_base_font-family=") !== false) {
    $parts=explode("rjmwp_base_font-family=", $_SERVER['HTTP_COOKIE']);
    $subparts=explode(";", $parts[1]);
    if ($subparts[0] != "") echo "\n\n body, input, textarea, .page-title span, .pingback a.url { font-family: " . urldecode($subparts[0]) . "; } \n\n";
    }
    }
    if (isset($_GET['rjmwp_blogtitle_font-family'])) {
    if ($_GET['rjmwp_blogtitle_font-family'] != "") {
    echo "\n\n #ahomeis { font-family: " . urldecode($_GET['rjmwp_blogtitle_font-family']) . "; } \n\n";
    }
    } else if (isset($_SERVER['HTTP_COOKIE'])) {
    if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_blogtitle_font-family=") !== false) {
    $parts=explode("rjmwp_blogtitle_font-family=", $_SERVER['HTTP_COOKIE']);
    $subparts=explode(";", $parts[1]);
    if ($subparts[0] != "") echo "\n\n #ahomeis { font-family: " . urldecode($subparts[0]) . "; } \n\n";
    }
    }
    if (isset($_GET['rjmwp_posttitle_font-family'])) {
    if ($_GET['rjmwp_posttitle_font-family'] != "") {
    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";
    }
    } else if (isset($_SERVER['HTTP_COOKIE'])) {
    if (strpos($_SERVER['HTTP_COOKIE'], "rjmwp_posttitle_font-family=") !== false) {
    $parts=explode("rjmwp_posttitle_font-family=", $_SERVER['HTTP_COOKIE']);
    $subparts=explode(";", $parts[1]);
    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";
    }
    }
    ?>

    code {
    width:90%;
    background-color:#F9F9F9;
    margin-top: 10px;
    margin-bottom: 10px;
    padding:20px 20px;
    border:1px dashed blue;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }​

    ...
    </style>

And so we come to the mechanism for the user to control this themselves, as 3 submenus off the All Posts menu. Blog New Pages like below (for example of 3 “Pick Your Own Post Contents Font”) will do it (and show the idea) …


<p id='rjmwp_base_font_family'>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): <br><input id='rjmwp_base_font-family' type='text' value='' onblur=' change_ff(this, this.value); ' title='//www.rjmprogramming.com.au/ITblog/?rjmwp_base_font-family=' onfocus=" this.value=cookieAVal('rjmwp_base_font-family');"></input> <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'></input></p>

You can try it yourself by accessing the All Posts menu you see above. We hope some ideas spring from all this for you, and remember that HTML inspector tools like Firefox’s Firebug are invaluable for helping with the examination of that “middle” HTML to tweak on what might be right and what might be wrong with your programming.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>