Using WordPress on localhost with a local SSL domain with XAMPP

You are ready to start creating with WordPress. You have the vision and the plan and all it takes is to install WordPress on your hosting and make your first change to your new website. Then it hits you - what if I could do that before actually paying for hosting and domain and before going live? And to be honest this is the right question every new WordPress owner has to ask themselves! Why? More on that in a moment but right now you need to know that this is possible and you just need - XAMPP, your domain name of choice and your localhost!

First things first! Why would I want to test WordPress locally with a local SSL domain with XAMPP?

For several reasons! The first one is that you are not going to spend any money upfront. The second is that you will have a very good idea how exactly your site will look and behave when you are ready to go live. Third - because working on a live site could be risky for SEO ratings even with the possibility of returning a 503 response code that tells Googlebot not to drop the page from the search index or to add it there in the first place with incorrect data. The latter simply means that if not done correctly you could end up with initial indexing or AI crawling that later on might need serious effort to fix.

In this case don't risk it - start your WordPress journey locally! Learn via trial and error without any worries of SEO penalties. And when you are done - all it could take is just one registration, one domain purchase and one upload.

How to prepare XAMPP for local SSL domain?

You will begin your journey by installing XAMPP first in a target location of your choice then going in that install directory. Find the file:

apache\conf\extra\httpd-vhosts.conf

Now you have to (if not already) decide upon a domain name. It could be a 100% real domain that you will buy or a fake local domain. Both options work well. If you go with the domain that you want to buy when ready, just continue with it. If unsure yet, I recommend going with a "*.loc" domain. The example below will demonstrate how to work with that but if you go with a real domain the steps are the same. The tutorial domain we will use will be "future-site.loc".

Once that is cleared out, open the file and, preferably at its end, add the following code block to it:

<VirtualHost future-site.loc:443>
	DocumentRoot "D:/xampp/htdocs/future-site"
	ServerName future-site.loc
	ServerAlias *.future-site.loc
	SSLEngine On
	SSLCertificateFile "crt/future-site.loc/server.crt"
	SSLCertificateKeyFile "crt/future-site.loc/server.key"
	<Directory "D:/xampp/htdocs/future-site">
	Order allow,deny
	Allow from all
	</Directory>
</VirtualHost>

Pay attention that there are also several paths mentioned in that code block, referring to the domain name. We will get to them in a bit as right now they still do not exist.

After that open and edit the following file inside the XAMPP installation directory:

apache\conf\httpd.conf

Ensure the lines in the code block below are not commented out (i.e. no "#" in front of them):

LoadModule ssl_module modules/mod_ssl.so

Include conf/extra/httpd-vhosts.conf
Include conf/extra/httpd-ssl.conf

Then in case they are commented out - uncomment them and save the file. After that open and edit the following file inside the XAMPP installation directory:

apache\conf\extra\httpd-ssl.conf

Here just ensure the line below is uncommented:

<VirtualHost _default_:443>

After that XAMPP itself is almost prepared for your site. But before we finalize the preparation now you must focus on the SSL certificate for your test site.

How to create a self-signed SSL certificate for my local SSL domain for XAMPP?

Go to this directory (again under XAMPP install dir):

apache\crt

Here you need to create a folder named "future-site.loc". After that execute the code below in Windows PowerShell/Terminal:

..\bin\openssl req -config certificate.conf -new -keyout .\future-site.loc\server.key -x509 -days 825 -out .\future-site.loc\server.crt

It might ask you some questions about the SSL and site - answer them. Once you are done, it will store the server.crt and server.key files in the directory you created.

Then you must install the crt in the Trusted Root Certificates. This can happen by double clicking on the file and following the instructions in the wizard. And that will work flawlessly with Chrome and Chrome based browsers. For simplicity I will not cover Firefox now but there it needs one more step to accept the self-signed certificate for future-site.loc.

Before we move to WordPress, there is one more XAMPP touch worth doing - a forwarding rule for the htdocs. Right now only https://future-site.loc works. If you type future-site.loc without the https part, the request falls into Apache's default port 80 virtual host and lands in the plain htdocs folder instead of your site. Add the rule below in the same httpd-vhosts.conf file, right under the 443 block:

<VirtualHost *:80>
	ServerName future-site.loc
	Redirect permanent / https://future-site.loc/
</VirtualHost>

Now every http request to your local domain is permanently forwarded to its https version, exactly like a live site with SSL would behave.

Planning to test on a phone or tablet? Android can do it without rooting the device. Copy the server.crt file to the phone and install it via Settings - Security and privacy - More security settings - Encryption and credentials - Install a certificate - CA certificate (the exact path may differ slightly between brands and Android versions). Chrome honors user-installed certificates, so https://future-site.loc opens clean in the mobile browser - regular apps ignore user certificates by default, which is fine, you only need the browser here. For the hosts part use the app Hosts GO - it works through the Android VPN slot, so no root is needed, and it maps future-site.loc to your PC's local network IP (not 127.0.0.1 - that is the phone itself!). Mind that the app has not been updated since 2020 - it still does the job, but if it misbehaves on a newer Android, AdAway in VPN mode is the maintained alternative. And if the phone cannot reach the site at all, allow Apache through the Windows firewall.

And before all of this even matters, the domain has to be known on your Windows machine as well: open C:\Windows\System32\drivers\etc\hosts as administrator and add the line below at its end, otherwise no browser will know where future-site.loc lives:

127.0.0.1 future-site.loc

With the certificate for the local SSL domain you can now complete XAMPP preparation and proceed to WordPress install!

First go to:

\htdocs

In it create future-site directory. Place WordPress zip file and extract it. Prepare wp-config.php in the way described below to start the installation.

define( 'DB_NAME', 'future_site_db' );
define( 'DB_USER', 'root' );
define( 'DB_PASSWORD', '' );
define( 'DB_HOST', 'localhost' );
define( 'DB_CHARSET', 'utf8mb4' );
define( 'DB_COLLATE', '' );

define( 'WP_HOME', 'https://future-site.loc' );
define( 'WP_SITEURL', 'https://future-site.loc' );
define( 'FORCE_SSL_ADMIN', true );

$table_prefix = 'wp_';

WordPress ships only a wp-config-sample.php file - make a copy of it in the same directory, name it wp-config.php and apply the changes above. The database lines are the XAMPP defaults: MariaDB runs on localhost, the user is root with an empty password, so the only thing left is to create the future_site_db database in phpMyAdmin (http://localhost/phpmyadmin/) or use your own name and match it in the file. The SSL lines are what lock the custom local SSL domain in place: WP_HOME and WP_SITEURL pin both site addresses to https://future-site.loc so the installation and every internal link use it, and FORCE_SSL_ADMIN forces the admin area over SSL as well. No extra HTTPS detection is needed in wp-config.php - Apache sets it itself on the SSL virtual host (and the port 80 forwarding rule sends every plain http request to https before PHP even runs). Optionally you can paste fresh authentication keys from https://api.wordpress.org/secret-key/1.1/salt/ - WordPress handles the placeholder ones itself, but unique keys are the better practice.

After that just enter in Chrome https://future-site.loc and complete the installation! Congratulations - your first WordPress site with a local SSL domain is installed!

Featured image is AI generated.