Cloudways + CloudFlare DNS/CDN + WPMU + Woocommerce + WP Whitelabeling


#1

How I managed to get the following services to work together: Cloudways + CloudFlare DNS/CDN + WordPress Multisite + Woocommerce.

All you need to know before you begin is how to navigate through the Cloudways Backend, WordPress Backend, CloudFlare Backend, and an FTP Client.

Please read the descriptions carefully. I recommend that you do not visit your WordPress Website until Step 6.

I’M NOT AN EXPERT, SO FOLLOW THIS AT YOUR OWN RISK. A FRESH INSTALL IS RECOMMENDED.

UPDATE: Added separate steps for non-www and WWW root domains, added Let’s Encrypt Wildcard SSLs, and added non-existent subdomain redirect to root domain.

Major Issue, but unsure prob. a bug

I previous activated Let’s Encrypt Wildcard on Cloudways using a test domain, then DELETED the application. An error occurred but the application deleted. However, when I tried to install Let’s Encrypt Wildcard with the same test domain I was unable to do so. So at the moment, I think you only have on shot to enable WildCard SSLs. I don’t have anymore test domains to retry.


Prerequisites:

  1. Domain Name and Account Access.

  2. A Cloudways Account.

  3. FTP Client and Text Editor.


Step 1: Installing a WordPress Application with Woocommerce on Cloudways.

  1. Important: Add new application as WordPress with Woocommerce NOT WordPress Multisite .

  2. Pick a server and location nearest you and wait until it installs. (Linode is amazing & cheap)

  3. Go to your Server and under Settings & Packages / Advanced find the WAF MODULE and change it to CloudFlare.




4. In Settings & Packages > Packages tab upgrade the PHP Version to 7.1 and change the Database to MariaDB10. Click “Save Changes” and “Ok” on the Warning. Wait for it to install.



5. Leave the server how it is. DO NOT go into WordPress or start configuring WordPress.


Step 2: Configuring DNS using CloudFlare DNS

  1. Visit CloudFlare and sign up for an account.

  2. Enter the domain you want to use and continue the setup process.

  3. Important: In the DNS section delete all the A records and CNAMEs by clicking the X. Do NOT delete MX Records.

  • Add an A Record with a Name of " * " (Asterisk ONLY) and enter the Server IP Address in Value with a TTL of 2 Minutes and Uncheck Orange Cloud.

  • Add another A Record with a Name of " shop " and enter the Server IP Address in Value with a TTL of 10 Minutes and Uncheck Orange Cloud.

  • To add more subdomains, add another A Record and Name it whatever you are going to call your subdomain without www or domain. com add to it. ( just type “support”, “blog”, etc). Point it to your Server IP Address and TTL of 10 Minutes and Uncheck Orange Cloud. Just like the step above with “shop”.


Option 1: Root Domain with WWW in front (www.example.com)

  • Change the word example to YOUR DOMAIN NAME!

  • Add an A Record with a Name of WWW and enter the Server IP Address in Value with a TTL of 10 Minutes and Uncheck Orange Cloud.

  • Add a CNAME with a Name of example.com and Value of www.example.com with a TTL of 10 Minutes and Uncheck Orange Cloud.


Option 2: Root Domain without WWW in front (example.com)

  • Change the word example to YOUR DOMAIN NAME!

  • Add a A Record with a Name of example.com and enter the Server IP Address in Value with a TTL of 10 Minutes and Uncheck Orange Cloud.

  • Add a CNAME with a Name of WWW and Value of example.com in Value with a TTL of 10 Minutes and Uncheck Orange Cloud.


  1. Important: Click the Orange Cloud Icon and it will turn into a Grey Cloud, which means you will only be using CloudFlare’s DNS service. Do this to all Records until there are no more Orange Clouds. We will setup CloudFlare CDN later.

  2. Ignore any warnings that may pop up.

  3. Make sure all A Record and CNAME have a TTL of 10 Minutes and proceed with the setup.

  4. Choose the free plan.

  5. Point your domain nameservers to CloudFlare’s nameservers.

  • Google “how to change your nameservers” if you need help.
  1. Wait for Propagation. Usually less than an hour but could take up 24 Hours.

Step 3: CloudFlare Domain Settings

  1. Go to CloudFlare Crypto Section and turn SSL to Flexible. Wait up to 24 hours for a CloudFlare SSL Certificate. If you have used CloudFlare with the same domain you already have one. (No wait time, the status will say “Active Certificate”)



Here are my current CloudFlare settings. I’m not an expert and some of these settings may not be the best, but I would recommend that you follow them just for this guide. You can change the settings later at your own risk.

UPDATE: Since the release of Let’s Encrypt Wildcard SSL on Aug. 6, 2018 on Cloudways, SSL Uptime/Renewals is unknown . Although, I created multiple test websites with Wildcard SSL and CloudFlare and they all run without any issues. Auto renew should work if enabled, but know until it happens in a couple of months.

Any advice would be helpful in the comments.

  • SSL - Flexible
  • Always use HTTPS - OFF
  • HTTP Strict Transport Security (HSTS) - Disabled
  • Authenticated Origin Pulls - ON
  • Require Modern TLS - ON
  • Opportunistic Encryption - ON
  • TLS 1.3 - Enabled + 0RTT
  • Automatic HTTPS Rewrites - OFF
  • Security Level - HIGH
  • Browser Integrity Check - ON
  • Auto Minify - HTML, CSS, JS ------- Turn on After the Guide and Theme Customization
  • Enable Accelerated Mobile Links - OFF
  • Rocket Loader - OFF
  • Mobile Redirect - OFF
  • Caching Level - Standard
  • Browser Cache Expiration - Respect Existing Header (Will change it later)
  • Always Online - OFF
  • Development Mode - OFF
  • WebSockets - ON (Will turn it off later - I don’t need it)
  • Pseudo IPv4 - OFF
  • IP Geolocation
  • Maximum Upload Size - 100MB

Step 4: Setup your domain on Cloudways, Let’s Encrypt, HTTP to HTTPS

  1. Remember anywhere u see the word example replace it with your domain name.

  2. On Cloudways > Domain Management add example.com under Primary Domain WITHOUT WWW and hit Save Changes.

  3. Add wildcard (Asterisk) -> *.example.com, shop.example.com and any other subdomain you created in Step 2 by clicking Add Domain on the right and Save Changes.

  1. Click on SSL Certificate on the left sidebar.

  2. Enter an Email Address

  3. ENTER ONLY: example.com and select Apply WildCard. It will add a Wildcard (asterisk) in front.

  4. You will get a notice below to add a CNAME and to point it to your Cloudways Application URL.

  5. On CloudFlare DNS, add the CNAME and Value of Cloudways Application URL with TTL of 2 Minutes and Unchecked Orange Cloud. Don’t point it to your Server IP Address, use the CW App URL given in the step above.

  6. Wait for the DNS to propagate. Usually 5 minutes but up to 24 hours.

  7. Click Verify DNS and Install Certificate.

  • If Let’s Encrypts fails, then you most likely need to wait until your domain name servers propagate, your DNS is incorrect, or your CloudFlare SSL is not set to flexible.
  1. After SSL install, make sure Auto Renew is turned on.


Step 5: Replace HTTP with HTTPS everywhere in the database

  1. On Cloudways Server, go to Access Details tab and Launch Database Manager
  • If you receive a not secure connection click proceed with caution.

  1. Go to SQL Commands. Left sidebar at the top.

  2. Only replace the word example with YOUR DOMAIN NAME! Then Execute.

UPDATE wp_options SET option_value = replace(option_value, 'http://example.com', 'https://example.com') WHERE option_name = 'home' OR option_name = 'siteurl';

UPDATE wp_posts SET guid = replace(guid, 'http://example.com','https://example.com');

UPDATE wp_posts SET post_content = replace(post_content, 'http://example.com', 'https://example.com');

UPDATE wp_postmeta SET meta_value = replace(meta_value, 'http://example.com', 'https://example.com');


Step 6: Setup a WordPress Multisite.

  1. Login to your Wordpress website. Hopefully this is your first time. If your domain doesn’t load, your domain probably hasn’t propagated or you missed a step.
  • I would recommend that you create another admin account and login to that account and delete your first admin account that cloudways automatically created using your email address.
  1. Go to your WordPress Plugins and deactivate all of them. DO NOT UPDATE ANY PLUGINS.

  2. Open a new tab and go to your server and create an FTP User.

  1. Use your favorite FTP Client and login using your new credentials. For SFTP, the port is 22.

  2. A list of folder will show up. Select public_html and scroll down. Open and edit the wp-config.php file.

  • Inside the wp-config.php find the line /* That's all, stop editing! Happy blogging. */ and right above it copy and paste define('WP_ALLOW_MULTISITE', true);

  • Save the file and upload it to the website using FTP.

  1. In the WordPress admin, go to Tools >Network Setup. You’ll be prompted to choose subdomains or subdirectories for your installation: choose subdomain.
  • Edit the title of your network and email address of the network administrator when prompted, or leave them as they are.

  • Click the Install button and read the next step carefully!!

  • Important: You will be giving code to paste into your wp-config.php and .htaccess before continuing. DO NOT USE THAT CODE. Copy and paste the code below using FTP. There are two options similar to STEP 2, one for WWW and Non-WWW Root Domains.


Option 1: Root Domain with WWW in front (www.example.com)

  • Only replace the word example with YOUR DOMAIN NAME!

wp-config.php - Right under define( ‘WP_ALLOW_MULTISITE’, true );

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', true);
define('DOMAIN_CURRENT_SITE', 'www.example.com');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);
define('NOBLOGREDIRECT', '');

.htaccess - Replace all the code with the following:

RewriteEngine On

# ENSURE WWW ON MAIN PAGE
RewriteCond %{HTTP_HOST} ^example.com$ [NC]
RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# ENSURE HTTPS EVERYWHERE
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# REDIRECT NOT IN USE SUBDOMAINS TO ROOT DOMAIN
RewriteCond %{HTTP_HOST} !^(example\.com$|www\.example\.com$|shop\.example\.com$) [NC]
RewriteRule (.*) https://www.example.com/$1 [L,R=301,QSA]

# BEGIN WORDPRESS
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

# END WORDPESS
  • Only replace the word example with YOUR DOMAIN NAME! Keep all the backslashes, periods, | (vertical bars) etc.!!!

  • Understand the RewriteCond

# REDIRECT NOT IN USE SUBDOMAINS TO ROOT DOMAIN
RewriteCond %{HTTP_HOST} !^(example\.com$|www\.example\.com$|shop\.example\.com$) [NC]
  • This redirects all subdomains not in use to root domain. (doesntexist.example.com to www.example.com)

  • If you added extra subdomains, you will need to clarify that they are in use (exist) in the RewriteCond. Just like our shop subdomain, it’s clarified that it exists in the RewriteCond and it won’t be redirect to www.example.com when a user enters that domain.

  • How to clarify a subdomains exists. Remember to first add a subdomain to your DNS (Step 2) and Domain Management (Step 4). Here is the format:

  • |subdomain\.example\.com$

  • Add it right after|shop\.example\.com$ inside the parenthesis and NO SPACES. Remember, do it for every subdomain that you are going to use.

  • DO NOT ADD *.example.com as a site on your WordPress Multisite.

# REDIRECT NOT IN USE SUBDOMAINS TO ROOT DOMAIN
RewriteCond %{HTTP_HOST} !^(example\.com$|www\.example\.com$|shop\.example\.com$|subdomain\.example\.com$) [NC]
  1. Don’t go to your WordPress Website. Go to Cloudways > Domain Management and change your Primary Domain to include WWW (www.example.com).

  2. Back on your Cloudways server, clear the Varnish cache. Proceed to STEP 7.


Option : Root Domain without WWW in front (example.com)

  • Only replace the word example with YOUR DOMAIN NAME!

wp-config.php - Right under define( ‘WP_ALLOW_MULTISITE’, true );

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', true);
define('DOMAIN_CURRENT_SITE', 'example.com');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);
define('NOBLOGREDIRECT', '');

.htaccess - Replace all the code with the following:

RewriteEngine On

# ENSURE HTTPS EVERYWHERE
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# REDIRECT NOT IN USE SUBDOMAINS TO ROOT DOMAIN
RewriteCond %{HTTP_HOST} !^(example\.com$|www\.example\.com$|shop\.example\.com$) [NC]
RewriteRule (.*) https://example.com/$1 [L,R=301,QSA]

# BEGIN WORDPRESS
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

# END WORDPESS
  • Only replace the word example with YOUR DOMAIN NAME! Keep all the backslashes, periods, | (vertical bars) etc.!!!

  • Understand the RewriteCond

# REDIRECT NOT IN USE SUBDOMAINS TO ROOT DOMAIN
RewriteCond %{HTTP_HOST} !^(example\.com$|www\.example\.com$|shop\.example\.com$) [NC]
  • This redirects all subdomains not in use to root domain. (doesntexist.example.com to www.example.com)

  • If you added extra subdomains, you will need to clarify that they are in use (exist) in the RewriteCond. Just like our shop subdomain, it’s clarified that it exists in the RewriteCond and it won’t be redirect to www.example.com when a user enters that domain.

  • How to clarify a subdomains exists. Remember to first add a subdomain to your DNS (Step 2) and Domain Management (Step 4). Here is the format:

  • |subdomain\.example\.com$

  • Add it right after |shop\.example\.com$ inside the parenthesis and NO SPACES. Remember, do it for every subdomain that you are going to use.

  • DO NOT ADD *.example.com as a site on your WordPress Multisite.

# REDIRECT NOT IN USE SUBDOMAINS TO ROOT DOMAIN
RewriteCond %{HTTP_HOST} !^(example\.com$|www\.example\.com$|shop\.example\.com$|subdomain\.example\.com$) [NC]
  1. You will have to login to your WordPress again after making the changes.

  2. Back on your Cloudways server, clear the Varnish cache. Proceed to STEP 7.


Step 7: Creating a subdomain site on WordPress

  1. Go to the network admin screens by clicking on My Sites > Network Admin in the admin menu.

  2. Go to Sites > Add New.

  3. Enterin the shop (i.e. subdomain ), the site title and the email address of the site administrator, as shown in the screenshot.

  • Only add subdomains already listed on CloudFlare, Domain Management, and RewriteCond. Such as shop.example.com.

  • DO NOT ADD *.example.com as a site on your WordPress Multisite.

  1. Go to your mySQL Database (Step 5) and select SQL Command. For every new site you add will will have to repeat STEP 5, however using the following code below.
  • Replace the word subdomain with your Subdomain and example with your Domain Name.
UPDATE wp_2_options SET option_value = replace(option_value, 'http://subdomain.example.com', 'https://subdomain.example.com') WHERE option_name = 'home' OR option_name = 'siteurl';

UPDATE wp_2_posts SET guid = replace(guid, 'http://subdomain.example.com','https://subdomain.example.com');

UPDATE wp_2_posts SET post_content = replace(post_content, 'http://subdomain.example.com', 'https://subdomain.example.com');

UPDATE wp_2_postmeta SET meta_value = replace(meta_value, 'http://subdomain.example.com', 'https://subdomain.example.com');
  • Notice the wp_2_... in the code. Each new site will create tables usually titled wp_#_... depending on how many subdomain you are using the # will increase. Make sure you know which subdomain corresponds with that #. To find out, simply click one of the wp_#_options and it will tell you the subdomain.
  1. Clear Varnish Cache and purge CloudFlare Cache on CloudFlare.com.

Step 8: Activating Woocommerce

  1. Visit the shop.example.com WordPress Backend and go to plugins. Enter shop.example.com/login in your browser if you don’t know how to get there.
  • Activate Woocommerce only on shop.example.com or whichever subdomain will be your store and run the database updater.
  1. Visit each of your sites (WPMU) and change the Permalinks. Mine are set to post name.

permalinks-settings

  1. Clear Varnish Cache and purge CloudFlare Cache on CloudFlare.com just in case.

Step 9: Activating CloudFlare CDN “Experimental”

For the last 8 months, CloudFlare CDN (Orange Cloud) has been turned on for the following A Records without any issues. Activiating CloudFlare CDN changes the TTL to Automatic and is controlled by CloudFlare. Here is what my DNS Record looks like.

  • WWW
  • example.com

  • shop - I turned off the CDN because I don’t want issues with Woocommerce. If someone know how to properly setup Woocommerce with CloudFlare CDN, please share.

Here are my CloudFlare Settings again:

  • SSL - Flexible — Full Strict is best, but if any SSL issues occur use Flexible
  • Always use HTTPS - OFF
  • HTTP Strict Transport Security (HSTS) - Disabled
  • Authenticated Origin Pulls - ON
  • Require Modern TLS - ON
  • Opportunistic Encryption - ON
  • TLS 1.3 - Enabled + 0RTT
  • Automatic HTTPS Rewrites - OFF
  • Security Level - HIGH
  • Browser Integrity Check - ON
  • Auto Minify - HTML, CSS, JS ------- Turn on After the Guide and Theme Customization
  • Enable Accelerated Mobile Links - OFF
  • Rocket Loader - OFF
  • Mobile Redirect - OFF
  • Caching Level - Standard
  • Browser Cache Expiration - Respect Existing Header (Will change it later)
  • Always Online - OFF
  • Development Mode - OFF
  • WebSockets - ON (Will turn it off later - I don’t need it)
  • Pseudo IPv4 - OFF
  • IP Geolocation
  • Maximum Upload Size - 100MB
- Clear Varnish Cache and purge CloudFlare Cache on `CloudFlare.com` just in case.

In most cases, visual issues are resolved by simply purging Varnish and CloudFlare Cache.

Step 10: Whitelabeling WordPress

  1. Use a Child Theme

  2. Use an FTP Client to open the Child Theme function.php

  3. Pastebin links is below with php functions. Read the code comments and copy what you want. The code looks weird due to spacing on pastebin, but should work if you just copy and paste the into functions file.


Any fixes to incorrect information or improvements are appreciated in the comment section. I learned all of this by messing around and reading as much as could, but mainly by stitching together bits and pieces from Github, Stackexchange, etc.

Step 10. Extras

  1. You can Network Activate the Breeze plugin (Cloudways) and set it up only for Varnish Purging on WordPress Admin Backend. No need to visit the Cloudways Server Backend every time to purge it.
  • Breeze settings - I did not change any settings after plugin activation. Only activated Varnish purge.
  1. If you would like to redirect all Login and Register pages to your Woocommerce login page simply add the following code at the bottom of your .htaccess file after # END WORDPRESS and replace example.com with your domain.
Redirect 301 /login/ https://shop.example.com/my-account/

Redirect 301 /register/ https://shop.example.com/my-account/
  • This will redirect all example.com/login and example.com/register including all subdomain to shop.example.com/my-account.

  • If you change the Woocommerce account URL make sure to change /my-account/ in the .htaccess as well.

  1. Any user account created on a subdomain will only be created for that subdomain. If you want users to be able to move through all subdomain while logged into their account, install Join My Multisite plugin. This plugin automatically creates the same account for every subdomain and main domain.

Common Minor Issues

Most visual issues can be resolved by purging Varnish and CloudFlare cache.

CloudFlare CDN settings are experimental at the moment but have worked without issue on two similar projects. One of them has been running excellent for the last 8 months.

Please keep in mind that not all WordPress plugins have been tested with the setup listed in this Guide and new issues may arise as plugins are managed by third parties. If it’s a popular plugin that regularly gets updated, then it should be fine. The same goes for themes as theme and plugin issues are managed by third parties and how well they coded everything.


#2

Hi @Freddie,

Thank you so much for preparing such a detailed guide for us! I am sure it can come in handy for the customers looking for Cloudways plus CloudFlare solution.

Regards,
Ibad


#3

Hi @Freddie A great write-up thanks.

I have a question about parallel downloading, is this still needed when using HTTP/2? I have never set it up before with WordPress and not sure if it is worth it or not?


#4

Hey Web,

GUIDE UPDATE: Parallel Downloading

Great question. After some digging, Parallel Downloading is not needed for this Guide as CloudFlare (CF) automatically enables HTTP/2 by default whether you use CF DNS or CDN. I would recommended that you don’t enable Parallel Downloading as HTTP/2 uses Multiplexing to parallel download files using only one domain.

However, just in case, if you decide not to use CF on a Cloudways Server and decide to not enable HTTP/2 use Parallel Downloading.

Although, I’ll disable Parallel Downloading on my website to compare the loading times.

  • Loading times depend on your server specs and how you setup WordPress, plugins, themes, etc.

Thanks for the question. It helped correct the information in the Guide.


#5

Thanks for the update. To be honest I have never setup parallel downloading as it never seemed worth it for the sites I have done on WordPress. But like you say it is a good alternative to a CloudFlare setup if needed.