SSL certificate breaks CSS

Question

Recently purchased a SSL certificate but it looks like the website won't load the site CSS. This is the link, https://www.rentpayment.com/ By viewing the Console error message, this seems to be the issue:

<link rel="stylesheet" href="http://www.rentpayment.com/wp-content/themes/rentpayment/style.css?ver=1.0" />

Obviously changing the http to https would solve the problem, however, this is what I have in the header.php file:

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>?ver=1.0" />

Can I add https to the dynamic field in header.php or is the problem elsewhere?

Answer 1

The SSL did not break the CSS file; you need to make sure the CSS file loads under https and not http. If you look at your site with browser dev tools, you will see that many images and other resources like scripts are not loading via https.

The bloginfo function - as well as others - pull the site URL from the WordPress site settings in Dashboard>General, WordPress Address (URL) and Site Address (URL), both which are stored in the wp_options table in the database. Change those two URLs to https, either in WordPress or in the database via Adminer or PHPMyAdmin. Make a backup of your database beforehand.

But be aware that you need to change all URLs in the database, such as image URLs in posts and pages. Use https://interconnectit.com/products/search-and-replace-for-wordpress-databases/ that will correctly change URLs and minimize breakage.

But your theme options may still break when changing URLs in the database, and you may need to reset them. And, other things may break; make a backup of your database beforehand.

After that, use dev tools to look for other elements that may still be http, like hardcoded links in the theme files, so your site will be fully https and users won't see "insecure element" errors.

Answer 2

I like to use the Better Search Replace WordPress plugin after I have enabled an SSL certificate to make sure to change all of the URLs in the database. https://wordpress.org/plugins/better-search-replace/

In this case, I would search for:

http://www.rentpayment.com

And replace it with:

https://www.rentpayment.com

Definitely make a backup before performing this operation.