e.preventDefault(); // Prevent form submission input.blur(); // remove focus input.value = ""; // optional: clear the input

Moving WordPress site to HTTPS

You have this site which was working fine on http://example.com and next, you moved it to https://example.com and the UI is all messed up. And you have to fix it. How do you do that?

Problem:
First, the reason behind it. When you moved it to https, there are few CSS/JS files that are still coming from the URL that is http://example.com and hence browser is blocking them. You can not have anything coming from HTTP on an HTTPS site without asking user.

Solution:
In order to fix it, follow these steps:

CDN/CSS URL paths have hardcoded HTTP
Check your theme files. If you are using CDN or even your site URLs to include JS/CSS, you would have to change them to HTTP/HTTPS depending upon what is the current protocol. Here is a simple PHP code snippet that would tell you if you are on HTTP or HTTPS.
<?php
$protocolPrefix = “http://”;
if (!empty($_SERVER[‘HTTPS’]) && $_SERVER[‘HTTPS’] !== ‘off’
|| $_SERVER[‘SERVER_PORT’] == 443) {
$secure_connection = true;
$protocolPrefix = “https://”;
}
?>

 

Next, wherever you are using HTTP blindly, change it to use protocolPrefix instead. For example, CSS include should look like:

<link type=”text/css” href=<?php echo($protocolPrefix.”ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-darkness/jquery-ui.css”);?> rel=”stylesheet”>

Theme JS/CSS files
If you are including JS files from the theme itself, use the syntax below as get_template_directory_uri() function takes care of switching between HTTP or HTTPS.
<script src=”<?php echo get_template_directory_uri(); ?>/js/main.js” type=”text/javascript”></script>

Plugin code
Almost all the plugins include their own JS/CSS files. Most of the time they work fine but those plugins are written by developers like you and me. There might be some oversight in their JS/CSS inclusions too. The most common one is this call:
get_options(‘site_url’)

The above call does NOT take care of switching between HTTP and HTTPs. Replace this line with:
site_url();

Other places
The above steps should fix the UI but user might still get a warning about HTTP content being served over HTTPS. Make sure that you check all the img srcs tags and change them with the proper protocol.

Related Posts

Latest Posts

  • All Posts
  • Generative AI
  • manufacturing
  • News
  • Portfolio
    •   Back
    • Android
    • iOS
    • Java
    • PHP
    • MEAN
    • Ruby
    • DotNet
    • IoT
    • Cloud
    • Testing
    • Roku
    • CMS
    • Python

India

Plot No. 11/2, Phase 3, Hinjewadi Rajiv Gandhi Infotech Park, Pune, India – 411057.
info@tudip.com
+91-96-8990-0537

United States

1999 S. Bascom Ave Suite 700, Campbell CA. 95008, USA.
info@tudip.com
+1-408-216-8162

Canada

64 Caracas Road North York, Toronto Ontario M2K 1B1, Canada.
info@tudip.com

Mexico

Calle Amado Nervo #785 Interior B Colonia Ladron De Guevara 44600 Guadalajara, Jalisco, Mexico.
info@tudip.com

Colombia

Cra. 9 # 113-53 Of. 1405 Bogotá D.C., Colombia.
info@tudip.com

UAE

Tudip Information Technologies L.L.C Office No 109, ABU HAIL BUILDING 13, Abu Hail, Dubai, UAE.
info@tudip.com

Nigeria

22 Kumasi Crescent, Wuse 2, Abuja, Nigeria.
info@tudip.com