Adding SSL to WordPress

The best way to have your site HTTPS secure is do to it during install. However, if you hadn’t done that, follow this guide to set your WordPress site to HTTPS. If using ISPmanager, you’ll be able to set the automatic redirect which makes this process very easy.

You’ll first need an SSL certificate. Luckily, you get it free with BryZar web hosting. Follow the guides there to enable it before proceeding.

Changing to HTTPS in WordPress

  • Once your SSL certificate is ready, log into your WordPress admin and navigate to Settings > General.
  • Edit the “WordPress Address URL” and “WordPress Site URL” to replace HTTP with HTTPS.
add ssl URL to WordPress
  • Save your changes.

Redirect HTTP to HTTPS

In some cases, you’ll need to manually edit the .htaccess file in order to add the redirect. If you aren’t sure about the next step, please contact BryZar for help. This step requires knowledge of .htaccess file and code.

To force redirect to HTTPS, we need to add the redirect code in the correct location. Follow the steps below to add your code.

Redirect Code for WordPress .htaccess
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
Original WordPress .htaccess code
# BEGIN WordPress
# The directives (lines) between `BEGIN WordPress` and `END WordPress` are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
New WordPress .htaccess with Code for Redirect
# BEGIN WordPress
# The directives (lines) between `BEGIN WordPress` and `END WordPress` are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

</IfModule>

# END WordPress

Viewing the above, we added the code right before the ending “</IfModule>” code tag.

Securing Your Admin Area (Optional)

In order to force SSL and HTTPS for your WordPress admin area or login pages, you need to configure SSL in the wp-config.php file.

Add the following code above the “That’s all, stop editing!” line in your wp-config.php file:

define('FORCE_SSL_ADMIN', true);
Tip for CloudFlare

Tip: If you’re using Cloudflare, make sure you set the SSL there to Full.

Cloudflare SSL
Final Notes

Once your website is set up to use SSL / HTTPS, you might still encounter mixed content errors.

Mixed Content Issues

Images, scripts, or stylesheets could still be loading using the insecure HTTP protocol. If that is the case, then you won’t see a secure padlock icon in your website’s address bar.

Browser SSL Security Lock

Many modern browsers automatically block scripts and resources from non-secure URLs.

To find out which causing an issue, use Inspect Element for your browser. The mixed content error will be displayed as a warning in the console tab with details for each mixed content item. Our image below shows that a shared link is causing the issue as it is not a secure site being shared. You’ll want to grab secure links when sharing content or have members do the same.

Mixed content warning
Fixing Mixed Content in Your WordPress Database

Warning! The following is for experienced users who know how to work in a database. Do not do these steps if you are not familiar with databases. Also, have a backup of your database before proceeding.

A majority of the incorrect URLs will be images, files, embeds, and other data stored in your WordPress database. Let’s fix them first.

You’ll need to find all instances of your website HTTP URL in the database and replace it them with your new HTTPS URL. For that, a database query would need to be run to find all posts with HTTP and replace with HTTPS.

Fixing Mixed Content Errors in WordPress Themes

Mixed content errors can be caused by your WordPress theme. Properly coded WordPress themes following WordPress coding standards will not cause this issue. If you find that your theme is causing the issue, you should have the theme developer fix the bug. If they won’t, you’ll need to do it yourself or find a better theme.

Use your browser’s developer console (Inspect Element) tool to find the resources and where they are loading from. See image above. Check first to see if the asset, such as an image URL, works to load via HTTPS by trying the URL in another tab. If it doesn’t have an HTTPS URL, you would want to use a different image or different theme.

Once you’ve checked the URLs that you need to fix, you will need to find them in your WordPress theme and replace them with HTTPS. This will be a little difficult for most beginners, as you will not be able to see which theme files contain these URLs. If you can get with the theme developer, that would be best. If not, you’ll need to find the path via inspect element or download the theme files and search for the URLs by using a tool such as Sublime Text, Netbeans or any other code editor.

Once you’ve found the links in the theme, it’s best to replace them with relative URLs. For example:
Current URL: ‘http://yoursite.com/assets/logo.png’
Change to: ‘//yoursite.com/assets/logo.png’
Note in our example you would replace “yoursite.com” with your own domain or the domain that’s hosting the asset. The example shows for your own logo. Don’t forget to check that the asset is available via HTTPS before making the change.

Fixing Mixed Content Errors Caused by Plugins

Some mixed content resources could be loaded by WordPress plugins. Any WordPress plugin following WordPress coding standards will not cause mixed content errors. We strongly recommend contacting developers if you find mixed content errors. If they won’t fix the errors, you should look for plugins that are up to date and using current coding standards.

Submitting Your HTTPS Site to Google Search Console

Search engines such as Google consider HTTPS and HTTP as two different websites. This means that you will need to let Google know that your website has moved to avoid any SEO issues. Follow the guide at Google to set your HTTPS property.