WordPress Blog Mini Makeover Tutorial
“Mini makeover WordPress Blog time” beckons today (or at least a few days ago). This “mini makeover” addressed issues as per …
- mobile platform tutorial picture sizes could be larger
- mobile navigation needed improved hashtag navigation
- navigation from Landing Page to “Course Interest” view of the blog posting chosen needed improved hashtag navigation
… and as far as that goes let’s go into more detail with these changes to our WordPress Blog’s Twenty Ten theme’s header.php and functions.php …
- mobile platform tutorial picture sizes could be larger …
Remedies taken from MacBook Pro point of view Symptoms and Steps to Fixes for iPad and iPhone … needed new CSS within header.php PHP as per …
<style>
/* Portrait and Landscape ... thanks to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.alignnone { width: 98% !important; }
.alignnone > img { width: 98% !important; }
}
/* Portrait and Landscape iPhone */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 765px) {
div.entry-content > div.wp-caption.alignnone { width: 98% !important; }
div.entry-content > div.wp-caption.alignnone > a > img { width: 98% !important; }
}
</style>
- mobile navigation needed improved hashtag navigation …
header.php code used to be …
echo "\n if (1 == 1) { if (document.URL.indexOf('?') != -1 || (document.URL.indexOf('/ITblog/') != -1 && (document.URL + '*').indexOf('/ITblog/*') == -1)) { location.href='#main'; window.scrollBy(36,220); } else { window.scrollBy(36,0); } \n";
… and becomes …
$mainhash="#main";
if (isset($post->ID)) {
$mainhash="#post-" . $post->ID;
}
echo "\n if (1 == 1) { if (document.URL.indexOf('?') != -1 || (document.URL.indexOf('/ITblog/') != -1 && (document.URL + '*').indexOf('/ITblog/*') == -1)) { location.href='" . $mainhash . "'; if (1 == 1) { window.scrollBy(28,0); } } else if (1 == 1) { window.scrollBy(28,0); } \n";
- navigation from Landing Page to “Course Interest” view of the blog posting chosen needed improved hashtag navigation …
functions.php code used to be and then becomes …
function previous_next($both = true) {
// lots of code
if ("$both" != "") {
echo "<table id=iftable style='width:150%; background-color: #F6F5F1;'><tbody><tr>";
} else {
echo "<table style='width:150%; background-color: #F6F5F1;'><tbody><tr>";
}
// lots of code
}
header.php code used to be and then becomes to make use of new id=iftable above … … and becomes …
<body onload=" 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(); setTimeout(last_email_check,15000); " <?php body_class(); ?>>
… calls …
function post_pp_ref() {
if (document.getElementById('iftable')) {
location.href='#iftable';
}
}
function pp_ref(inuone, inutwo) {
if ((inuone + inutwo).indexOf('pp=&pn=&title=') != -1 || (inuone + inutwo).indexOf('pp&pn&title=') != -1) {
setTimeout(post_pp_ref, 8000);
}
}
… which you can see in action via a visit to the RJM Programming Landing Page and select a blog posting from the right hand midpage dropdown.
If this was interesting you may be interested in this too.
