Converting this WordPress site from http: to https: – Part 3

The instructions I followed from wpbeginner.com suggested adding this new secure site to the google search console.

And there I was told that my site was not mobile-friendly!

So I took a look for myself using mobiletest.me and…

Er… yuck.

My (well, now it’s “My old”) theme is Grid Focus and it’s been on the site a long time.

WordPress Grid Focus was originally a personal project designed and coded for 5thirtyone.com. Grid Focus is a three column widget enabled WordPress 2.6 or 2.7+ compatible WordPress theme. Prominent navigation bar with room to share important pages. The latest update is completely optimized and stripped of any unnecessary code allowing for complete customizability.

Just what’s needed! Something compatible with WordPress 2.7+ and widget-enabled!

And some advice that is still either good or bad advice:
Do not download WordPress themes distributed by 3rd party sites

Anyway, I really liked the Grid Focus look. I liked how it had a navigation bar that would pop out choices when you clicked on it, that it told the page generation time at the bottom of the page, and that I had modified it to include some little video game icons in the upper right.

The solution was clear: Time to switch to another free WordPress theme. My current favorite is GeneratePress. It’s fast, it works, and it’s free. And it has a lot of options which don’t mess with those first three biggies.

Note: Along with Grid Focus, I had a jillion other old WordPress themes installed on the site from back when. I deleted them all too since who knows what security risks they present.

It was easy to set GeneratePress into a 3 column mode to lay out similar to the old Grid Focus theme.

GeneratePress even allowed a widget in the upper right on the header part of the page, so that I could add in those video game icons. Oh — and I had to load them via https instead of http (because that old hard-coding was one of my last holdouts to getting the nice secure lock icon when browsing the site). Interestingly, that issue solved itself in the way I wrote the new javascript.

This is the old php code from the Grid Focus theme functions file:

/** 2018-10-31 changed the http: to https:  **/
function erics_random_header_image() {
$location = '<img title="Hosted by pair.com Enjoy 20% off your first pair Networks bill! Use code: pairref-JJm9bFyc" src="https://www.ericshefferman.com/wp-content/themes/';
$number = rand(1,12);
switch ($number){
        case 1:
		echo $location;
                echo 'gridfocus/images/game-adventure.jpg">';
                break;
        case 2:
		echo $location;
                echo 'gridfocus/images/game-atari-space-invaders.jpg">';
                break;

        case 3:
		echo $location;
                echo 'gridfocus/images/game-defender.jpg">';
                break;
        case 4:
		echo $location;
                echo 'gridfocus/images/game-donkey.jpg">';
                break;
        case 5:
		echo $location;
                echo 'gridfocus/images/game-frogger.jpg">';
                break;
        case 6:
		echo $location;
                echo 'gridfocus/images/game-galaga.jpg">';
                break;
        case 7:
		echo $location;
                echo 'gridfocus/images/game-joust.jpg">';
                break;
        case 8:
		echo $location;
                echo 'gridfocus/images/game-maze-craze.jpg">';
                break;
        case 9:
		echo $location;
                echo 'gridfocus/images/game-pac-man.jpg">';
                break;
        case 10:
		echo $location;
                echo 'gridfocus/images/game-pong.jpg">';
                break;
        case 11:
		echo $location;
                echo 'gridfocus/images/game-robotron.jpg">';
                break;
        case 12:
		echo '<a href="http://www.ericshefferman.com/to/pair_com_web_hosting">';
		echo '<img src="http://promote.pair.com/125x125.pl"></a>';
                break;
	}
}

Since I now run a cache plugin (to help deal with the “wasting server time” issues), I wanted the video game icons to display randomly via a javascript snippet. This way they change with every page reload. Yum!

I came up with this javascript programming gem:

<script>
var headerimagelist = [
'<img src="/wp-content/uploads/game-adventure.jpg">',
'<img src="/wp-content/uploads/game-atari-space-invaders.jpg">',
'<img src="/wp-content/uploads/game-baseball.jpg">',
'<img src="/wp-content/uploads/game-defender.jpg">',
'<img src="/wp-content/uploads/game-donkey.jpg">',
'<img src="/wp-content/uploads/game-frogger.jpg">',
'<img src="/wp-content/uploads/game-galaga.jpg">',
'<img src="/wp-content/uploads/game-joust.jpg">',
'<img src="/wp-content/uploads/game-maze-craze.jpg">',
'<img src="/wp-content/uploads/game-pac-man.jpg">',
'<img src="/wp-content/uploads/game-pong.jpg">',
'<img src="/wp-content/uploads/game-robotron.jpg">',
'<img src="/wp-content/uploads/game-sinistar.jpg">',
'<img src="/wp-content/uploads/game-space_invaders.jpg">',
]

var randomNumber = Math.floor(Math.random() * (headerimagelist.length));
document.write(headerimagelist[randomNumber])
	
</script>

And there you have it — now everything on the site is https for some spiffy SSL and the site is mobile-friendly!

The 4 Parts of this Series
Part 1 – cleaning out old (ancient) plugins that aren’t relevant or useful anymore
Part 2 – actually updating the database etc.  inside WordPress to use https
Part 3 – updating to a modern, mobile-friendly theme
Part 4 – dealing with some robots.txt etc. plugin conflict