Are you frustrated that your WordPress site not loading CSS over https when switching to secure HTTP? Have you been left scratching your head seeing your site’s ‘fashion sense’ suddenly fall apart? Has all the text on your site lost its alignment or basic formatting? If your answer to any of these questions is ‘yes’, you have stumbled upon the right article to help you out.
Switching to HTTPS is critical for your site security. While it is easy to do, not everything works out of the box every single time. The crux of the problem is that HTTP and HTTPS are considered to be separate, and thus each link, URL, and reference has to be changed. This is why your site design is breaking, because the CSS probably contains references to the old HTTP version of your site.
As confusing as it may sound to fix the CSS not loading correctly issue, you can breathe knowing that it is indeed fixable. In this article, we will:
explore the root causes behind this issue;
devise practical solutions to ensure your CSS and HTTPS handshake seamlessly; and
find ways to prevent this from recurring in the future.
TL;DR: If your WordPress site is unable to load CSS over HTTPS, the reason usually is that file requests are still taking place over an HTTP connection. There are many reasons for this, but it boils down to a mixed content issue on your WordPress site. Once you have rectified these issues, install MalCare to protect your site and keep an eye out for security vulnerabilities.
Why is WordPress not loading CSS over HTTPS?
Migrating your site from HTTP to HTTPS is an important step for amping up its security. You may have used a plugin to do this and followed the instructions to change URLs. However, there is still potential for things to go wrong. If you are seeing broken styling or design on your site, chances are that CSS is not loading correctly on your site post the migration to HTTPS.
Essentially, the site is trying to obtain data in the form of stylesheets, images, videos, etc. in an unsecured manner. Therefore, the browsers prevent the loading of these entities until they can be obtained securely.
So when your properly functioning WordPress site is unable to display its visual styling, this is because the browser can’t securely load the CSS stylesheet, which contains the elements that lend the styling to your website. This is the issue of WordPress not loading CSS over HTTPS.
As a result, you will see a barebones version of your WordPress site, without several formatting and functionalities, along with the ‘Not Secure’ warning on your browser address bar. This can hamper users’ experience on your site, and possibly your site’s SEO parameters.
How to fix WordPress not loading CSS over HTTPS issue?
There are a few reasons why this issue is occurring. We’ve listed them all out below, with the means to resolve them.
1. Fixing SSL certificate issues
You may have recently installed an SSL certificate on your site for the first time, marking the transition from HTTP to HTTPS. However, the site may not be correctly configured for this change. Alternatively, if your website already uses an SSL certificate, it may have expired. This would lead to browsers requesting web page data over HTTPS but receiving it over HTTP.
There could also be WordPress version issues. If you are running your site on WordPress version 3.5 or earlier, this may be a cause as these versions faced difficulties in processing CSS stylesheets.
If this is the first time you have installed an SSL certificate for your WordPress site
If this is the first time you are transitioning your website from HTTP to HTTPS using SSL certification, certain settings need to be changed from your WordPress Admin dashboard.
Update the site URLs in the file settings
In the WordPress Admin panel, go to Settings, and then to General. Here, you will find the WordPress Address (URL) and Site Address (URL) sections. By default, they contain the URL of your site. If these URLs are preceded by http://, you will need to switch to https://
Alternatively, if you can access your site using SSH, you can edit the wp-config.php file for the same result. To do so, open the file in your preferred editor and insert the following lines of code at the end:
define(‘WP_HOME’,’https://your.site.com/’);
define(‘WP_SITEURL’,’https://your.site.com/’);
Update the site URL in the database
Next, update the URL in the WordPress database. You can do this manually by logging into your database and changing the correct entries in the wp_options table. However, the smallest misstep will almost certainly crash your site, so instead, use a plugin like BetterSearchReplace (BSR). It can update the database quickly.
Install the BSR plugin from your WordPress Admin dashboard.
Once installed, activate the plugin. You will find it in the Tools section of your dashboard, as shown below.
In the Search for text box, enter the URL of your website in the http:// format. Similarly, in the Replace with text box, enter the same URL but in the https:// format.
Select all the tables shown in the Select tables list, using Ctrl + Left Click for Windows systems or Command + Left Click for Mac systems.
If you wish to perform a dry run without affecting any tables, you check the Run as dry run option. Once you are ready and sure of performing the changes, uncheck the option and run the tool by clicking on Run Search/Replace →.
If your WordPress site already has an SSL certificate
If your WordPress site already uses SSL certification and is still unable to load CSS over HTTPS, it could be because the certificate has expired. There are two ways to check this:
The first way is to check with the organization from which you obtained your SSL certificate. In case it has expired, you can either renew it or opt to get a new certificate from another provider.
The second way, and probably the quickest way to know if your certificate has expired, is through a basic check on your browser address bar. On your preferred web browser, go to your site and click on the padlock icon on the address bar. You will see a menu as shown below:
Click on the arrow next to the Connection is secure tab and you will see the Security menu appear:
On this menu, click on the Certificate is valid/invalid button to check the details of your site’s SSL certificate, as shown below:
As you can see in the above example, this certificate expires on May 28, 2024, which means it is valid at the time of writing this article. However, if your certificate has already expired, you can renew it from your existing provider or check others to obtain a new one.
2. Fixing plugin or theme issues
Your website may be served over HTTPS, but a poorly coded plugin/theme/media might be requesting its CSS files over HTTP. It may well be possible that one or more plugins/themes on your site may be old/incompatible, due to which they are unable to obtain files through HTTPS.
Newly installed a plugin/theme
The plugin/theme may link to its files through http:// links, causing the error. This can be checked using the Inspect tool in browsers. If the issue is with the plugin’s references, it can only be rectified by the plugin/theme developer, not the website owner. So replacing the plugin/theme is the solution.
To do so, right-click anywhere on your site to open a context menu, like the one shown below. Your context menu may vary from browser to browser.
Click on the Inspect button to get the following view:
Click on the >> arrows next to the Performance tab, and click on Security. You should see a view like this which shows all the issues with the webpage.
Older plugin or theme issues
Outdated plugins could also cause this issue if they do not link to https:// items or do not possess https:// linking capabilities. Hence, updating them, or replacing them if there are no updates, can remove this issue.
3. Fixing media issues
Often the culprit for CSS not loading correctly is that the stylesheets are referencing a media file via HTTP instead of HTTPS.
Newly added an image/video/other media to your site
Your newly added media could have http:// links. Use the Inspect tool again and find the details on the Elements tab, as shown below.
To resolve this, the image has to be loaded through https:// links. Try switching to a different Content Delivery Network (CDN) server that provides media over secure links, like Cloudflare, StackPath, etc.
4. Addressing WordPress version issues
Older WordPress versions have had difficulties in rendering CSS stylesheets. This was an issue seen typically on WordPress version 3.5 and earlier.
However, if you are running such an old version of WordPress, CSS not loading over HTTPS is probably the least of your concerns. These old versions could contain security vulnerabilities which are much more critical than your site’s formatting issues. Update to the latest version of WordPress (version 6.3 at the time of writing) at the earliest. Employ plugins like MalCare to regularly inform you of pending updates and automatically apply them without hampering your site’s functionality.
How to prevent WordPress not loading CSS over HTTPS issue?
Now that you are aware of the solutions to the WordPress not loading CSS over HTTPS issue, let’s look at some of how you can prevent it from recurring.
Update settings meticulously when switching from HTTP to HTTPS. As shown previously, the WordPress and site address URLs need to be set to https://, and all references to your site in the WordPress database should be replaced with the https:// version.
Keep track of certificate expiry dates to be prepared for such eventuality. If your certificate has expired, you can renew it with your existing provider, or switch to free verified HTTPS certification providers like LetsEncrypt.
Force HTTPS usage by adding the following command to the wp-config.php file:
if ($_SERVER[‘HTTP_X_FORWARDED_PROTO’] == ‘https’)
$_SERVER[‘HTTPS’]=’on’;
Ensure you add it before the following line:
require_once(ABSPATH . ‘wp-settings.php’);
Use plugins like Really Simple SSL to easily configure SSL on your WordPress site. Alternatively, you can use plugins like Easy HTTPS Redirection to redirect users to an already-configured HTTPS SSL version of your site.
Conclusion
We understand that it can be frustrating to meticulously design your WordPress site only to not have it reflect online. Thankfully, the fix isn’t too difficult. Depending on which solution works for you, it can take from a few minutes to a couple of hours. However, the biggest takeaway from this article is that installing an SSL certificate is a huge part of website security and data protection. It’s an easy but necessary tool in your security plan. However, it is also important to note that it cannot work alone. MalCare, the best-in-class security plugin for WordPress sites, protects your site from hackers.
FAQs
What is HTTP, HTTPS, and SSL?
HyperText Transfer Protocol, or HTTP, is the language used by your computer over the internet to communicate with servers that host websites. HTTP Secure, or HTTPS, is an extension of HTTP that uses encryption to secure all communications over a computer network. Secure Sockets Layer, or SSL, is one of the two forms of encryption used, the other being Transport Layer Security or TLS.
When a site is accessed over HTTPS, the browser is instructed to add a security layer over the communications using either SSL or TLS. Browsers then verify the legitimacy of the intended site based on certificates issued by trusted authorities. Subsequently, a secure channel of communication is created which allows the two rightful devices to communicate with each other.
Why is SSL important on WordPress sites?
Apart from ensuring the security and encryption of the data exchanged between your site and its users, here are a few more reasons why you should deploy SSL security on your website:
Trust: Securing your website with an SSL certificate enforces trust among your users/customers. This is one of the most important tenets that encourages users to visit your site and interact with it, which is the end goal of your website creation.
Legitimacy: A valid SSL certificate lends legitimacy to your site, which in turn aids your site users, their activities, and most importantly, their trust. Without legitimacy, users would be wary of visiting your site, which you would not want.
Ranking: The major search engines of the world, like Google, Bing, etc., prioritize websites with valid SSL security in their search results. If you wish to rank your website high on search, HTTPS is a must.
What are some of the ways to secure my WordPress site?
Securing your WordPress site is crucial to prevent unauthorized access, data breaches, and other potential threats. Here are some of the most effective ways to enhance the security of your WordPress website.
Utilize security plugins like MalCare to enhance overall website security by conducting malware scans, setting up firewalls, preventing brute-force attacks, and much more.
Regularly update WordPress core, themes, and plugins to patch vulnerabilities and reduce the risk of exploitation. Outdated WordPress files can pose security risks and open your site to possible hacks. Use plugins like BlogVault that help automate the update process for your site while also providing a staging site where you can do so without hampering existing functionality.
Use strong, unique passwords and consider implementing two-factor authentication (2FA) for an added layer of security.
Perform regular backups of your site and database to ensure data recovery in case of a security breach or other issues. For complete peace of mind, use plugins like MalCare that provide automatic site backup along with its plethora of security features.
In addition to all the above methods, nothing beats a keen, observant website owner/administrator. Keep an eye on your site’s activity and log files. Unusual or suspicious activities might indicate a security breach.
The post How to Fix CSS Not Loading over HTTPS in WordPress appeared first on MalCare.
