{"id":3195,"date":"2020-03-28T11:04:26","date_gmt":"2020-03-28T11:04:26","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3195"},"modified":"2023-03-02T10:11:04","modified_gmt":"2023-03-02T10:11:04","slug":"wordpress-how-to-properly-move-from-http-to-https","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/wordpress-how-to-properly-move-from-http-to-https\/","title":{"rendered":"WordPress : How to Properly Move from HTTP to HTTPS"},"content":{"rendered":"<p><a href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> &#8211; Are you looking to move WordPress from HTTP to HTTPS and install an SSL certificate on your website? We have been getting a lot of requests on this topic because Google announced that Chrome browser will start marking all websites without SSL as insecure starting July 2018. In this article, we will show you how to properly move WordPress from HTTP to HTTPs by adding a SSL certificate.<\/p>\n<p>Don\u2019t worry, if you have no idea what SSL or HTTPS is. We\u2019re going to explain that as well.<\/p>\n<h4>What is HTTPS?<\/h4>\n<p>HTTPS or Secure HTTP is an encryption method that secures the connection between users\u2019 browser and your server. This makes it harder for hackers to eavesdrop on the connection.<\/p>\n<p>Every day we share our personal information with different websites whether it\u2019s making a purchase or simply logging in.<\/p>\n<p>In order to protect the data transfer, a secure connection needs to be created.<\/p>\n<p>That\u2019s when SSL and HTTPS come in.<\/p>\n<p>Each site is issued a unique SSL certificate for identification purposes. If a server is pretending to be on HTTPS, and its certificate doesn\u2019t match, then most modern browsers will warn the user from connecting to the website.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54070 lazyloaded aligncenter\" title=\"Insecure website warning\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/unsecure-connection-warn.png\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/unsecure-connection-warn.png 520w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2018\/07\/unsecure-connection-warn-300x165.png 300w\" alt=\"Insecure website warning\" width=\"520\" height=\"286\" data-ll-status=\"loaded\" \/><\/p>\n<h4>Setting up WordPress to Use SSL and HTTPs<\/h4>\n<p>After you have enabled SSL certificate on your domain name, you will need to set up WordPress to use SSL and HTTPs protocols on your website.<\/p>\n<p>We will show you two methods to do that, and you can choose one that best fits your need.<\/p>\n<h4>Method 1: Setup SSL\/HTTPS in WordPress Using a Plugin<\/h4>\n<p>This method is easier and is recommended for beginners.<\/p>\n<p>First, you need to install and activate the\u00a0Really Simple SSL plugin.<\/p>\n<p>Upon activation, you need to visit\u00a0<strong>Settings \u00bb SSL<\/strong>\u00a0page. The plugin will automatically detect your SSL certificate, and it will set up your WordPress site to use HTTPs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-54057 lazyloaded\" title=\"SSL enabled on a WordPress website\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/enablewpssl.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/enablewpssl.png 550w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/enablewpssl-300x128.png 300w\" alt=\"SSL enabled on a WordPress website\" width=\"550\" height=\"234\" data-ll-status=\"loaded\" \/><\/p>\n<p>The plugin will take care of everything including the mixed content errors. Here\u2019s what the plugin does behind the scenes:<\/p>\n<ul>\n<li>Check SSL certificate<\/li>\n<li>Set WordPress to use https in URLs<\/li>\n<li>Set up redirects from HTTP to HTTPs<\/li>\n<li>Look for URLs in your content still loading from insecure HTTP sources and attempt to fix them.<\/li>\n<\/ul>\n<p><strong>Note:<\/strong>\u00a0The plugin attempts to fix mixed content errors by using output buffering technique. It can have a negative\u00a0performance impact\u00a0because it\u2019s replacing content on the site as the page is being loaded. This impact is only seen on first-page load, and it should be minimal if you are using a caching plugin.<\/p>\n<p>While the plugin says you can keep SSL and safely deactivate the plugin, it\u2019s not 100% true. You will have to leave the plugin active at all times because deactivating the plugin will bring back mixed content errors.<\/p>\n<h4>Method 2: Setup SSL\/HTTPS in WordPress Manually<\/h4>\n<p>This method requires you to troubleshoot issues manually and edit WordPress files. However this is a permanent and more performance optimized solution.<\/p>\n<p>If you find this method difficult, then you can hire a WordPress developer or use the first method instead.<\/p>\n<p>As part of this method, you may need to edit WordPress theme and code files. If you haven\u2019t done this before, then see our guide on\u00a0how to copy and paste code snippets in WordPress.<\/p>\n<p>First, you need to visit\u00a0<strong>Settings \u00bb General<\/strong>\u00a0page. From here you need to update your WordPress and site URL address fields by replacing http with https.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54058 lazyloaded aligncenter\" title=\"Update WordPress URLs\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/updatewpurls.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/updatewpurls.png 550w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/updatewpurls-300x150.png 300w\" alt=\"Update WordPress URLs\" width=\"550\" height=\"276\" data-ll-status=\"loaded\" \/><\/p>\n<p>Don\u2019t forget to click on the \u2018Save changes\u2019 button to store your settings.<\/p>\n<p>Once the settings are saved, WordPress will log you out, and you will be asked to re-login.<\/p>\n<p>Next, you need to set up WordPress redirects from HTTP to HTTPS by adding the following code to your\u00a0<a title=\"What is .htaccess File in WordPress?\" href=\"https:\/\/www.wpbeginner.com\/glossary\/htaccess\/\">.htaccess file<\/a>.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">&lt;IfModule mod_rewrite.c&gt;\r\nRewriteEngine On\r\nRewriteCond %{HTTPS} off\r\nRewriteRule ^(.*)$ https:\/\/%{HTTP_HOST}%{REQUEST_URI} [L,R=301]\r\n&lt;\/IfModule&gt;<\/pre>\n<p>If you are on nginx servers (most users are not), then you would need to add the following code to redirect from HTTP to HTTPS in your configuration file:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">server {\r\nlisten 80;\r\nserver_name example.com www.example.com;\r\nreturn 301 https:\/\/example.com$request_uri;\r\n}<\/pre>\n<p>Don\u2019t forget to replace example.com with your own domain name.<\/p>\n<p>By following these steps, you will avoid the WordPress HTTPS not working error because WordPress will now load your entire website using https.<\/p>\n<p>If you want to force SSL and HTTPS on your WordPress admin area or login pages, then you need to configure SSL in the\u00a0<a title=\"How to Edit wp-config.php File in WordPress\" href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/how-to-edit-wp-config-php-file-in-wordpress\/\">wp-c<\/a>o<a title=\"How to Edit wp-config.php File in WordPress\" href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/how-to-edit-wp-config-php-file-in-wordpress\/\">nfig.php file<\/a>.<\/p>\n<p>Simply add the following code above the\u00a0<em>\u201cThat\u2019s all, stop editing!\u201d<\/em>\u00a0line in your wp-config.php file:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">define('FORCE_SSL_ADMIN', true);<\/pre>\n<p>This line allows WordPress to force SSL \/ HTTPs in WordPress admin area. It also works on\u00a0<a title=\"How to Install and Setup WordPress Multisite Network\" href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-install-and-setup-wordpress-multisite-network\/\">Word<\/a>P<a title=\"How to Install and Setup WordPress Multisite Network\" href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-install-and-setup-wordpress-multisite-network\/\">ress multisite networks<\/a>.<\/p>\n<p>Once you do this, your website is now fully setup to use SSL \/ HTTPS, but you will still encounter mixed content errors.<\/p>\n<p>These errors are caused by sources (images, scripts, or stylesheets) that are still loading using the insecure HTTP protocol in the URLs. If that is the case, then you will not be able to see a secure padlock icon in your website\u2019s address bar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54059 lazyloaded aligncenter\" title=\"Not secure\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/notsecure.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/notsecure.png 550w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/notsecure-300x110.png 300w\" alt=\"Not secure\" width=\"550\" height=\"202\" data-ll-status=\"loaded\" \/><\/p>\n<p>Many modern browsers will automatically block unsafe scripts and resources. You may see a padlock icon but with a notification about it in your browser\u2019s address bar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54061 lazyloaded aligncenter\" title=\"Insecure content blocked\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2018\/07\/insecurecontent.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2018\/07\/insecurecontent.png 550w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/insecurecontent-300x170.png 300w\" alt=\"Insecure content blocked\" width=\"550\" height=\"312\" data-ll-status=\"loaded\" \/><\/p>\n<p>You can find out which content is served through insecure protocol by using the\u00a0Inspect tool. The mixed content error will be displayed as a warning in the console with details for each mixed content item.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54062 lazyloaded aligncenter\" title=\"Mixed content errors displayed in browser console\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/mixedcontentconsole.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/mixedcontentconsole.png 550w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/mixedcontentconsole-300x110.png 300w\" alt=\"Mixed content errors displayed in browser console\" width=\"550\" height=\"201\" data-ll-status=\"loaded\" \/><\/p>\n<p>You will notice that most URLs are images, iframes, and image galleries while some are scripts and stylesheets loaded by your WordPress plugins and themes.<\/p>\n<p><strong>Fixing Mixed Content in WordPress Database<\/strong><\/p>\n<p>Majority of the incorrect URLs will be images, files, embeds, and other data stored in your WordPress database. Let\u2019s fix them first.<\/p>\n<p>All what you need to do is find all mentions of your old website URL in the database that started with http and replace it with your new website URL that starts with https.<\/p>\n<p>You can easily do this by installing and activating the\u00a0<a title=\"Better Search Replace\" href=\"https:\/\/wordpress.org\/plugins\/better-search-replace\/\" target=\"_blank\" rel=\"noopener nofollow\">Better Search Replace<\/a>\u00a0plugin. For more details, see our step by step guide on\u00a0how to install a WordPress plugin.<\/p>\n<p>Upon activation, you need to visit\u00a0<strong>Tools \u00bb Better Search Replace<\/strong>\u00a0page. Under the \u2018Search\u2019 field, you need to add your website URL with\u00a0<code>http<\/code>. After that, add your website URL with https under the \u2018Replace\u2019 field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54077 lazyloaded aligncenter\" title=\"Search and replace\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/searchreplace.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/searchreplace.png 550w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/searchreplace-300x196.png 300w\" alt=\"Search and replace\" width=\"550\" height=\"360\" data-ll-status=\"loaded\" \/><\/p>\n<p>Below that, you will see all your WordPress database tables. You need to select all of them to run a thorough check.<\/p>\n<p>Lastly, you need to uncheck the box next to \u2018Run as dry run?\u2019 option, and then click on \u2018Run Search\/Replace\u2019 button.<\/p>\n<p>The plugin will now search your WordPress database for URLs starting with http and will replace them with secure https URLs. It may take a while depending on your WordPress database size.<\/p>\n<p><strong>Fixing Mixed Content Errors in WordPress Theme<\/strong><\/p>\n<p>Another common culprit causing mixed content error is your WordPress theme. Any decent WordPress theme following WordPress coding standards will not cause this issue.<\/p>\n<p>First, you will need to use your browser\u2019s Inspect tool to find the resources and where they are loading from.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54078 lazyloaded aligncenter\" title=\"Using inspect tool to find mixed content error\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/inspecttool2.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/inspecttool2.png 550w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/inspecttool2-300x171.png 300w\" alt=\"Using inspect tool to find mixed content error\" width=\"550\" height=\"314\" data-ll-status=\"loaded\" \/><\/p>\n<p>After that, 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.<\/p>\n<p><strong>Fixing Mixed Content Errors Caused by Plugins<\/strong><\/p>\n<p>Some mixed content resources will be loaded by WordPress plugins. Any WordPress plugin following WordPress coding standards will not cause mixed content errors.<\/p>\n<p>We don\u2019t recommend editing WordPress plugin files. Instead, you need to reach out to the plugin author and let them know. If they do not respond or are unable to fix it, then you need to find a suitable alternate.<\/p>\n<p>Note: If for some reason, you\u2019re still encountering mixed content error, then we recommend using the Really Simple SSL plugin temporarily, so your users are not impacted while you fix the issue on a staging website or hire a developer.<\/p>\n<h4>Submit Your HTTPS Site to Google Search Console<\/h4>\n<p>Search engines like Google consider https and http as two different websites. This means you will need to let Google know that your website has moved to avoid any SEO issues.<\/p>\n<p>To do that, you just need to go to your\u00a0Google Search Console\u00a0account and click on \u2018Add a Property\u2019 button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54087 lazyloaded aligncenter\" title=\"Add https site as a new property in Google Search Console\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/googlesearchconsole-1.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/googlesearchconsole-1.png 550w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/googlesearchconsole-1-300x157.png 300w\" alt=\"Add https site as a new property in Google Search Console\" width=\"550\" height=\"287\" data-ll-status=\"loaded\" \/><\/p>\n<p>This will bring up a popup where you need to add your website\u2019s new https address.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54081 lazyloaded aligncenter\" title=\"Add your https URL\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/addurl.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/addurl.png 550w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2018\/07\/addurl-300x119.png 300w\" alt=\"Add your https URL \" width=\"550\" height=\"219\" data-ll-status=\"loaded\" \/><\/p>\n<p>After that, Google will ask you to verify ownership of your website. There are several ways to do that, select any method and you will instructions to verify your site.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-54082 lazyloaded aligncenter\" title=\"Verify your website\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/verifyyoursite.png\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2018\/07\/verifyyoursite.png 550w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2018\/07\/verifyyoursite-300x176.png 300w\" alt=\"Verify your website\" width=\"550\" height=\"323\" data-ll-status=\"loaded\" \/><\/p>\n<p>Once your site is verified, Google will start showing your search console reports here.<\/p>\n<p>You also need to make sure that both the https and http versions are added in your Search Console.<\/p>\n<p>This tells Google that you want the https version of your website to be treated as the primary version. Combined with the 301 redirects that you setup earlier, Google will transfer your search rankings to the https version of your website, and you will most likely see improvements in your search rankings.<\/p>\n<p>We know that we did when switched our websites from http to https.<\/p>\n<p>We hope this article helped you add HTTPS and SSL in WordPress. You may also want to see our ultimate\u00a0WordPress security guide\u00a0with step by step instructions to keep your WordPress site secure.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Are you looking to move WordPress from HTTP to <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/wordpress-how-to-properly-move-from-http-to-https\/\" title=\"WordPress : How to Properly Move from HTTP to HTTPS\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3953,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[309,310,136],"newstopic":[],"class_list":{"0":"post-3195","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress","8":"tag-http-to-https","9":"tag-wordpress","10":"tag-wordpress-plugin"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3195"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3195\/revisions"}],"predecessor-version":[{"id":3201,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3195\/revisions\/3201"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3953"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3195"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}