Guide: How to Use Both HTTP and HTTPS on WordPress

This is a guide on how to host your website on HTTP and HTTPS simultaneously with WordPress. I’ll show each step with further explanations.

Useful for converting old WordPress websites and new ones — use both protocols without conflicts and choose which version gets indexed by Google.

WordPress HTTP HTTPS

Please note:

  • If you are starting with a fresh install of WordPress you may skip steps 2 & 3.
  • Go through the steps in the right order so that at no point your site is giving the wrong signals to Google and the site works throughout the process.
  • We will be editing functions.php, header.php (& optinally wp-config.php) files through the dashboard. Using a WordPress child theme will be necessary so edits are not over-written by theme updates.

Step 1. Enable SSL certificate

First and most important is to have a working SSL certificate. So make sure it’s installed and enabled in your hosting control panel.

Still paying for your SSL certificate? Don’t. For example SiteGround provides completely free SSL. It’s one of the smarter hosting companies with great speeds for all plans. Also comes with free migration and superior support.

Step 2. Remove HTTP elements with phpMyAdmin

Because you cannot have any HTTP elements within HTTPS pages you will need to change all the links to your image files from let’s say:

<img src="http://www.yourblog.com/wp-content/uploads/http-and-https.jpg">

to this (when a link starts with // it can be used by both protocols):

<img src="//www.yourblog.com/wp-content/uploads/http-and-https.jpg">

You’ll need to go to phpMyAdmin in cPanel and run this SQL query:

UPDATE wp_posts 
SET post_content = ( Replace (post_content, 'src="http://', 'src="//') )
WHERE Instr(post_content, 'jpeg') > 0 
OR Instr(post_content, 'jpg') > 0 
OR Instr(post_content, 'png') > 0
OR Instr(post_content, 'gif') > 0;

You will also need to change internal links in content to the “//” format or otherwise user could be redirected to a different protocol after clicking on a link.

Step 3. Scan for non-secure content

At this point you should be able to open pages of your website using HTTPS.

Then use this tool and enter the https url of your website. It will automatically scan each page and make sure there are no HTTP elements. Otherwise browser will give a warning for insecure content. Fix any content necessary.

Step 4. Set WordPress URL

Important — you will need to set these two in general settings of the WordPress dashboard to the http version of your website like this:

  • WordPress Address (URL): http://www.yoursite.com
  • Site Address (URL): http://www.yoursite.com

If you do this — all automatically generated internal links (for posts, menu, etc) will change depending on which protocol version visitor is browsing.

If this would be set to https — visitors browsing the http version will get internal links to https versions of posts and pages; unable to use http.

Step 5. Set canonical url

To avoid any duplicate content issues and to redirected search engine visitors to your preference; set a canonical URL which tells Google to index either the https or http version of your website (or see this post for a per post/page solution).

By default WordPress sets a canonical URL which changes between http and https depending on which version the visitor is on. This is conflicting information and likely Google will choose https by default.

To define your own — first remove the default canonical in headers.php by placing this code just before where it says “<?php wp_head(); ?>“.

<?php remove_action('wp_head', 'rel_canonical'); ?>

Then place this code in the header and change to https/http:

<link rel="canonical" href="https://www.yourdomain.com<?php echo $_SERVER['REQUEST_URI'];?>">

Check the page source code that you are left with only one canonical url.

Step 6. Protocol-neutral media content

When adding new images and other media content; by default http or https is prefixed to the URLs. Keep them protocol-neutral with this in functions.php:

function have_https_for_media( $url ) {
 if ( is_ssl() )
 $url = str_replace( 'http://', '//', $url );
 return $url;
}
add_filter( 'wp_get_attachment_url', 'have_https_for_media' );

This will add new images automatically with the // prefix.

Step 7. Redirect WP admin area to HTTPS (optional)

This is an optional but recommended step — it’s good practice to force the dashboard to use https at all times as a safety measure.

Add this line to your wp-config.php file:

define('FORCE_SSL_ADMIN', true);

Conclusion

What we have achieved is a WordPress website where all of the content adopts to either protocol without conflicts and stay’s that way as you continue to build the site. Also it will be indexed with the protocol of your choice.

Please — care, share and mention my post if you found it useful.
Questions, comments? Don’t hesitate to give me a shout!

Please note: Some of the pages on this post contain affiliate links and help to promote my work — thank you for your visit! Regards, Tim.

1 thought on “Guide: How to Use Both HTTP and HTTPS on WordPress”

Leave a Reply to Jim @ BusyBees Locksmith Cancel reply