Wordpress Themes - WP Forum at BFA - Atahualpa, WHMCS, Iframe, SSL, and SEO, oh my...

I just spent about the last 5 hours of my life trying to figure this out...so I thought I'd be a nice guy and share what I learned.

Scenario

As the post title suggest, I'm using the Atahualpa theme with WHMCS in an Iframe for my web hosting site. Naturally, I wanted to encrypt the WHMCS checkout process, but I didn't want to encrypt every page on the site either.

Getting WHMCS to render in an Iframe actually wasn't too bad. I needed to configure WHMCS to use my https URL for encrypted pages, etc. I also had to find some javascript that would automatically resize the Iframe to the correct height. So far, so good.

The real difficulty came whenever I started trying to SEO the site. By default, Atahualpa embeds all the CSS and javascript that it uses in the head, which isn't very SEO. Fortunately, there is a nice little option to move both of them to an external file. I also needed to move my Iframe javascript to an external file.

Problem

As anyone that has much experience with SSL has probably already figured out, this "broke" my encrypted pages making them show up as partially encrypted. Typically, this is a pretty straight forward fix...one just has to change any occurrences of http to https. However, in the Atahualpa theme, these references are dynamically generated by PHP...and it just looks at the blog home URL as configured in the WordPress settings page...so it will always be http://examplehost.com... regardless of your current URL.

For the CSS, these lines are found in the header.php file.

Code:

<?php if ( $bfa_ata['css_external'] == "External" ) { ?>

<link rel="stylesheet" href="<?php echo $bfa_ata['get_option_home']; ?>/?bfa_ata_file=css" type="text/css" media="all" />

<?php } ?>

The lines that generates the JS reference are buried a bit deeper in the functions.php file.

Code:

function add_js_link() {

        global $bfa_ata;

        if ( $bfa_ata['javascript_external'] == "External" ) { ?>

        <script type="text/javascript" src="<?php echo $bfa_ata['get_option_home']; ?>/?bfa_ata_file=js"></script>

        <?php } 

}

Solution

Rewrite the code to generate the correct URI scheme (http or https) based on the current page URL. And no...I could not just hard code the URLs with https since this would "break" my unencrypted pages causing them to show up as partially encrypted.

Since I'm not much a programmer, I borrowed some code from Google. Specifically, the javascript they use to reference their analytics script via http or https, as shown below.

Code:

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

Modified for my purposes, it ends up looking like this.

For the CSS reference in header.php:

Code:

<?php if ( $bfa_ata['css_external'] == "External" ) { ?>

<script type="text/javascript">

var JsHost = (("https:" == document.location.protocol) ? "https://" : "http://");

document.write(unescape("%3Clink rel='stylesheet' href='" + JsHost + "craigshost.com/?bfa_ata_file=css' type='text/css' media='all'/%3E"));

</script>

<?php } ?>

For the JS reference in functions.php:

Code:

function add_js_link() {

        global $bfa_ata;

        if ( $bfa_ata['javascript_external'] == "External" ) { ?>

          <script type="text/javascript">

            var JsHost = (("https:" == document.location.protocol) ? "https://" : "http://");

            document.write(unescape("%3Cscript src='" + JsHost + "craigshost.com/wp-includes/js/iframe/iframe.js' type='text/javascript'%3E%3C/script%3E"));

          </script>

        <?php } 

}

Now, my pages are more SEO (since my JS and CSS are external and not cluttering up the top of my page) and my SSL shows as fully encrypted on all the correct pages. :)