How to Update Image URLs after migrating from HTTP to HTTPS in WordPress

webtrickz https enabled site

Recently, I moved this website to HTTPS / SSL which is hosted on WordPress CMS. The migration from HTTP to HTTPS went smooth and the permanent redirection to HTTPS was successful too. Soon after propagation, the HTTP pages were redirecting to their HTTPS equivalents and were showing a green padlock sign. The only issue was that most of the HTTPS pages were showing mixed content warnings. Due to such warnings, the pages don’t show a Secure tag aka padlock and instead say that “Your connection to this site is not fully secure” or “This connection is not Private”.

Your connection to this site is not fully secure

This problem arises when the page resources link to HTTP URL’s instead of HTTPS, thus labelling them as an insecure element. The mixed content warning is usually caused by images added on pages that are still loading with the HTTP URL. This issue doesn’t stem from the SSL setup itself and is needed to be fixed as a part of the migration process to HTTPS.

I intensely searched through a lot of sources to find a precise way to update image links from HTTP to HTTPS after SSL migration in WordPress. However, I couldn’t find a single guide that could help a first timer to accomplish this technical task with ease. After much brainstorming and going through a lot of articles, I finally figured out a simple solution to fix warnings on HTTPS pages.

I’ll keep this guide simple and straight to the point so that newbies don’t get confused like me. We will be using “Better Search Replace” plugin for WordPress that packs the best features found in similar plugins. You can perform this entire task without logging into phpMyAdmin to run any SQL queries which could mess up your site in case anything goes wrong.

Before proceeding, note that this tutorial is applicable for WordPress users who have set a 301 redirection and are using only the HTTPS protocol on their website or blog. Although this would work in most scenarios, one needs to consider other factors too if the problem persists.

1. Change WordPress Home and Site URL to HTTPS

Go to your WordPress dashboard > Settings > General. Now change the WordPress Address and Site Address URL to HTTPS instead of HTTP. (Refer image)

Wordpress general settings

This makes WordPress itself handle the redirect. Additionally, all internal links within the WordPress app and website will be set to their HTTPS equivalents. This would state that every bit of the website is, and leads to, encrypted content. Just to be sure, you can add the below rule to your .htaccess file.

RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-SSL} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

This 301 redirect will make sure to redirect any HTTP request to HTTPS.

2. Change Media Assets (Images, Internal links) from HTTP to HTTPS

Coming to the main step. You now need to replace all the old HTTP URLs in the WordPress database with HTTPS. This means updating all the image file links and internal links added manually (in post or pages) to HTTPS in order to prevent any insecure image warning and fixing the mixed content error. However, there is no need to update external links pointing to other websites to HTTPS.

WARNING: Make sure to backup your database first.

To proceed, install the “Better Search Replace” WordPress plugin and activate it. Now head over to plugin page located under Tools section. In “Search for” field enter the HTTP version of your website URL and the HTTPS version in the “Replace with” field. Under select tables, scroll down and select the “wp_posts” table which contains image URLs, and URLs embedded inside posts and pages. Then uncheck the “Run as dry run?” option and hit the Run Search/Replace button.

Better Search Replace WordPress plugin settings

Wait for the processing to take place. You can later view details such as the number of changes found and rows updated for the particular table.

better search replace plugin

Note: If you get an error during processing, go to the Settings tab and try decreasing the “Max Page Size” value to anywhere around 8000 to 10000.

That’s it! The HTTP version of your website’s embedded links and image URLs should now be updated with the HTTPS version. To confirm, simply open a blog post and copy the image address within a post or view the page source. The image URLs should now show the HTTPS version and you should now see a Secure padlock next to the address bar.

Images with HTTP link

Before (Image URL)

Images with HTTPS link

After (Image URL)

Internal links with HTTP

Before (Internal Link URL)

Internal Link URL with HTTPS

After (Internal Link URL)

Bonus Tip: After replacing HTTP with HTTPS successfully, you can remove the plugin.

Do note that some pages with broken or unavailable links such as of expired CDN might still result in mixed content. You can identify the insecure elements on such pages by using Inspect Element feature in Chrome or just use whynopadlock.com to easily find out insecure items on your SSL-enabled pages.

Reference: Check this detailed article by Michael Bely

Mayur

Mayur Agarwal is the founder and editor-in-chief of WebTrickz. As a Technology enthusiast and an Internet addict, he loves sharing useful How To’s and Tips & Tricks. Follow him @mayurjango on Twitter where he is extremely active.

2 Responses

  1. Prashanth says:

    Thanks for this simple but most useful tips 🙂

    I also made the switch to https yesterday! The installation of SSL was done smoothly by the hosting provider as I bought SSL from them. But I also faced the same issue with Padlock. I requested the hosting provider to look in to this. In the mean time I found your article and tried the plugin my self.

    The plugin was really amazing. It solved my issue with deep linking and images. I only required to manually change one header logo.

    For your Info, I used a different code for 301 redirect.

    • Mayur says:

      Glad to hear that this post helped you. I wrote it for the sole purpose to help everyone who is stuck with this problem and can’t figure out an easy fix to it.

Leave a Reply

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