Category Archives: WordPress

GeneratePress to McLuhan

It was a bold decision, but I had to do this.

Lately, I’ve figured out even a premium theme like GeneratePress is overkill for me. My GP customizations get bloated at times, and I’ve realized most of the visitors of this website doesn’t give a shit or two about the styling. I write guides and tutorials. For me, any theme works OOB if the font rendering and navigation are precise.

Rediscovering McLuhan

I knew Anders Norén’s McLuhan ever since its inception on WordPress repository. At that time I wasn’t good at getting comfortable around the theme. I wanted to tweak and tone it down a bit to meet my needs.

Kudos to GeneratePress. GP helped me focus and learn more on front-end coding. I love how it forces you to push the limits. I liked the idea. But, as I’ve said before, I don’t need it now. I want to spend more effort on writing instead of wasting my time on tweaking and WP customization. I’ve decided to settle down.

Goodbye classic editor, my old friend.

Another milestone in my WP journey.

I’ve uninstalled the Classic Editor WordPress plugin. I’ve always preferred the classic editor over Gutenberg for a long (really long) time. But recently, I’ve learned to live with Gutenberg. It’s neat and it gets the job done. I’m happy with it.

What have you done with McLuhan?

A bit of pure CSS edits. And a few PHP edits. For example, I’ve:

  • Removed Google fonts completely.
  • Set to render system fonts (Avenir on Apple devices).
  • Removed the search option. 
  • Converted front page to a minimal landing page.
  • Added the updated on filter to single posts.
  • Changed the position of category meta information.

The additional CSS for the time being

.entry-content li {
	margin-top: 5px;
}

.wp-video {
    margin-bottom: 20px;
}

.page-id-5931 .site-header {
	display: none;
}

.page-id-5931 .entry-title {
	display: none;
}

.page-id-5931 .site-footer {
	display: none;
}

.page-id-5931 {
	height: 50%;
	min-height: 50%;
	background: #121212;
	color: #ececec;
	padding-left: 0px;
}

.page-id-5931 a {
	border-bottom: 1px dotted #ececec;
}

@media (min-width:728px) {
	.page-id-5931 {
		margin-top: 7.33%;
	}
}

@media (max-width:728px) {
	.page-id-5931 {
		margin-top: 7.33%;
	}
}

blockquote p {
	font-weight: 400;
	hanging-punctuation: first;
}

h2 {
	font-size: 25px;
	letter-spacing: -0.35px;
}

h3 {
	font-size: 23px;
	letter-spacing: -0.25px;
}

h4 {
	font-size: 20px;
	letter-spacing: -0.25px;
}

.site-title {
	animation: myanimation 25s infinite;
	font-size: 130%;
	font-weight: 700;
	font-family: avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

pre,
code {
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 90%;
}

.meta.bottom p.tags a {
	margin-right: 5px;
}

#side-pointer,
.button-dark {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	background: #ececec;
	letter-spacing: .1px;
	text-transform: uppercase;
	border-radius: 10px;
}

#side-pointer a {
	border-bottom: none;
}

.social-menu .social-search-wrapper {
	display: none;
}

.main-menu .toggle-mobile-search-wrapper {
	display: none;
}

.page-title {
	font-size: 17px;
}

strong {
	font-weight: 600;
}

body,
button,
input,
select,
textarea,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	text-rendering: optimizeLegibility;
	font-family: avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.entry-title {
	font-weight: 700;
}

Some habits should change.

How To Start A Blog In 2021

Here’s my step-by-step guide on how to start a self-hosted blog in 2021. If you’re a complete beginner, you’re in the right place.

This blog post is a definitive guide to starting a personal or niche blog from scratch.

If you search for the “best blogging platform” on Google, the SERP may end up with these suggestions:

  1. Blogger
  2. WordPress
  3. Ghost
  4. Tumblr
  5. Squarespace
  6. Medium
  7. Joomla

We’ll use WordPress CMS because it’s intuitive, versatile and the learning curve is smooth. It’s the ideal content management system for beginners. Furthermore, WordPress powers 30% of websites worldwide.

Keep in mind that I’m not a famous blogger or influencer. False motivation isn’t my thing. I won’t promise you a bogus metrics, or an income figure you can make each month as a blogger. I’ll stick to the facts and help you set up a self-hosted website based on WordPress.

I’ve prepared this guide in a story format. I’ll also recommend the optimal settings and plugins for WordPress bloggers. Please bear with my backstories and crossovers nobody asked for.

How to Start A Blog: Step-By-Step Instructions

Let’s divide this definitive guide into two sections:

  1. Buy a domain, enable CDN and purchase a VPS.
  2. Install and configure WordPress.

Prerequisites, Notes & Recommended Apps

Putty (Windows) or Terminal (MacOS): We need an SSH client to log in to the server. PuTTY is an SSH and telnet client, developed originally by Simon Tatham for the Windows platform. macOS users, stick with the Terminal app.

WinSCP (Windows) or Cyberduck (MacOS): As a beginner, you won’t be flexible with Linux commands to move/copy and edit files. Use an SFTP/FTP client to view, edit and manage the data on the server. WinSCP is a free and open-source SFTP, FTP, WebDAV, Amazon S3 and SCP client for Microsoft Windows. I recommend Cyberduck for MacOS users.

VestaCP:  We’ll use VestaCP, a free and open-source control panel as the default control panel to host the WordPress website on your server.

CDN & Managed DNS: We will be using Cloudflare as the DNS manager + cloud network platform. They provide free SSL also. Having an SSL certificate is crucial because Google will be counting HTTPS as a ranking factor. It is recommended to create an account right away.

Example.com: I will use example.com as the dummy domain. You’ve to replace it with your domain-name.tld.

127.0.0.1: I will use 127.0.0.1 as the dummy server IP. You’ve to replace it with your server’s public IP address.

Purchase Domain, Host & CDN.

These three are the crucial steps. A Content Delivery Network (CDN) service is optional, but it has its benefits. We’ll discuss it later. Let’s purchase a server (VPS) first.

Buy A Domain

You need a brand name. Maybe you already have one. Let’s translate that brand name to digital identity.

I prefer NameCheap because I’ve already made more than 40 domain name purchases via their site. They are reliable, and their support has been great.

However, I don’t recommend NameCheap’s hosting services.

Sign-up here, search for a domain name of your choice, add it to the cart and make the payment.

Now, visit this URL, locate the domain you recently purchased, and click “manage.”

Buy and Manage Domain NameCheap

Once you click “manage,” you’ll see something like this.

Manage NameCheap domain

Keep this browser window idle, open a new tab, and proceed to the next step.

Add Site to Cloudflare

Visit dash.cloudflare.com and log in to your account (assuming you’ve created an account). Click “+ Add Site” located in the upper right corner.

Cloudflare Add Site

Now fill in your domain name and click “Add Site.”

Cloudflare Add Domain

Click “Next,” select the free plan and click “Confirm Plan.”

Cloudflare Free Plan

Wait for Cloudflare to finish querying your DNS records.

Cloudflare DNS Query

Usually, Cloudflare will return your current DNS settings; this will be NameCheap’s default settings. Clear all the fields and Click “Next.”

But, sometimes it may display an error like “we are unable to find your DNS settings.” Just click “Next”.

Now, Cloudflare will ask you to change the nameservers in your NameCheap dashboard.

Cloudflare Nameservers

Visit the idle window I mentioned before. Select the “Custom DNS” from the dropdown in the NAMESERVERS section. Fill in the nameservers as suggested by Cloudflare and Click ✓ (save).

Cloudflare Custom DNS

Switch the active window to the Cloudflare setup once again and click “Continue.”

Cloudflare Nameservers

Give it a few minutes for the DNS propagation. The Cloudflare status will be “Active” after DNS propagation.

You’ll receive an email confirmation with the subject line: “example.com has been added to a Cloudflare Free Plan.”

Understand Self-Hosting vs. Shared Hosting

I’m against the idea of shared hosting. A lot of bloggers out there recommend shared-hosting (just because they want to promote their partners/affiliates).

Anyone could purchase, self-host and manage a Virtual Private Server (VPS) efficiently. It’s not as expensive as we think.

I’ve prepared WordPress installation scripts and other necessary resources to aid you.

Buy A Virtual Private Server (Host)

A Virtual Private Server (VPS) is a virtual machine sold as a service by an Internet hosting service.

We will host our WordPress site on a dedicated VPS. Shared hosting is okay, but not recommended since we’ve to share the resources with other people.

I prefer to host the site(s) on my server. Sites like Bluehost come with one-click WordPress installation.

But, I don’t recommend Bluehost or any of the companies that come under the EIG umbrella. They’re known to upsell the services.

I’ve seen some well-known bloggers recommending Bluehost. Don’t fall for the marketing gimmicks. Most of these websites have a partnership with Bluehost.

Moreover, you shouldn’t be hosting your site on a shared server if you plan to go big in the future. Stick with dedicated hosting (VPS), own a private server and scale it.

I always recommend a DIY approach when it comes to web hosting. It’s easy and cheap if you can register an account on sites like RamNode or DigitalOcean.

We’ll use DigitalOcean for this beginners’ guide. I’ve used their services to host multiple projects since it’s reliable, secure and budget-friendly. Their customer support has been great so far.

Here’s another reason why I’m recommending DigitalOcean. My referral link comes with a free $100, 60-day credit for new registrations.

DigitalOcean $100, 60-day credit

Sign-up here.

Nb: All new registrants should verify their account by binding a Credit / Debit Card or by topping up $5 via Paypal. The next step is to create a project and set goals. The company created the “Projects” section to keep users’ systems organized and focused, which save us time navigating the Control Panel.

You’d be able to finish the registration and verification process under five minutes.

Visit this link after verification and creating a new project.

Build Your First Droplet on DigitalOcean

Click on “Get Started with a Droplet

DigitalOcean Droplets: Explained

DigitalOcean Droplets are flexible Linux-based virtual machines (VMs) that run on top of virtualized hardware. Each Droplet you create is a new server you can use. The company offers Standard and CPU Optimized droplets. Standard Droplet is scalable and more than enough for bloggers.

Now the platform asks you to choose an image, size and datacenter region.

DigitalOcean Droplet: Recommended Settings

DigitalOcean Droplet: Recommended Settings

Adding backup and block storage is entirely optional. Don’t worry about backups. We’re going to use VestaCP as the control panel. It comes with backup  option.

Image: CentOS 7.5 x64.
Size: $10/mo. (2GB/1CPU, 50GB SSD Disk & 2TB Bandwidth).
Datacenter region: Select a region close to yor potential audience.

Note:

  1. You can upgrade and scale droplets anytime.
  2. I’ve selected CentOS 7.5 x64 because it is a stable Linux Distro.
  3. I highly recommend users to learn more about SSH keys and generate/set-up SSH keys while creating a droplet. SSH keys provide a more secure way of logging into a virtual private server with SSH than using a password alone. Read this official guide from DigitalOcean. You need PuTTYgen to create SSH Keys on Windows.

Finally, Click “create” if everything looks okay for you.

Patiently wait for DigitalOcean to create the droplet, generate a Public IP, one-time root password and send it over to your registered email address.

Managed Hosting Recommendation (Optional)

Only recommended if DigitalOcean sounds too much of a hassle.

Managed hosting is usually an extension of dedicated hosting, whereby the required hardware is owned by the hosting provider and is leased to a single client. — interoute.com

Sign-up with Kinsta if you prefer a managed WordPress hosting solution. Web hosting with Kinsta can range from $30 per month to $900 per month. The platform exceptional, sleek, and intuitive.

Why Kinsta?

It is a platform officially recommended by Google Cloud as a fully-managed WordPress hosting solution.

Install VestaCP On CentOS

Login to your server as root

Use the credentials DigitalOcean sent you over email to log in.

  • MacOS: Open the Terminal.
  • Windows: Open up PuTTY. If you find it confusing, read this article.

Type the following and hit enter:

$ ssh [email protected]

Replace 127.0.0.1 with your server’s public IP address.

During first login, DigitalOcean’s CentOS distro will force you to change the password.

Install Vesta CP (Control Panel)

Download installation script

$ curl -O http://vestacp.com/pub/vst-install.sh

Run it to start the installation

$ bash vst-install.sh --nginx yes --phpfpm yes --apache no --named yes --remi yes --vsftpd yes --proftpd no --iptables yes --fail2ban yes --quota yes --exim yes --dovecot yes --spamassassin yes --clamav yes --softaculous no --mysql yes --postgresql no

We’re going with the NGINX + PHP-FPM configuration instead of Apache + PHP. This is one of the best configurations that promises better performance.

CentOS may ask you to force the installation sometimes. Run this command to do it:

$ bash vst-install.sh --nginx yes --phpfpm yes --apache no --named yes --remi yes --vsftpd yes --proftpd no --iptables yes --fail2ban yes --quota yes --exim yes --dovecot yes --spamassassin yes --clamav yes --softaculous no --mysql yes --postgresql no -f

The setup will ask you type in the hostname and email address.

It’s wise not to use example.com as the hostname. Use server.example.com instead.

VestaCP roughly needs 5 to 10 minutes to finish the installation. It will display the login URL and admin credentials upon completing the installation.

Configure DNS

Visit the DNS section of your website in Cloudflare.com.

Set CNAME and A records as follows.

  • A Record – Name: @, ipv4 address: 127.0.0.1
  • A Record – Name: server, ipv4 address: 127.0.0.1
  • CNAME record – Name: www, Domain Name: @

Make sure it looks like this after editing.

Cloudflare DNS

Don’t forget to replace 67.218.150.74 with your server’s IP.

Add New Website on VestaCP 

Visit the VestaCP login URL

Log in using the credentials you saved before (Login URL may look like https://127.0.0.1:8083). Change the admin password after logging in. Feel free to tweak other settings according to your preference.

Add a website

Visit the WEB section in the VestaCP and click the “ADD WEB DOMAIN” button.

VestaCP Add New Domain

Fill in example.com (e.g., mynewsite.com) and select the default IP address. Click the ADVANCED OPTIONS and edit the Alias to www.example.com. Click “Add” when you’re ready.

VestaCP New Domain

Wait for a few seconds and visit example.com. You’d see a dummy home page generated by VestaCP.

jot.sh example domain VestaCP

jot.sh example domain VestaCP.

Disable Cloudflare HTTP proxy to enable LetsEncrypt SSL.

It is not possible to create Let’s Encrypt SSL certificates in VestaCP while the CloudFlare CDN is active, so turn it off by clicking the Orange Cloud as shown in the image. The Grey Cloud means CloudFlare CDN is off.

Turn off Cloudflare CDN to generate CloudWays Let's Encrypt SSL Certificates

Enable Let’s Encrypt SSL for example.com

Visit this URL: https://127.0.01:8083/edit/web/?domain=example.com

Locate the SSL Support section and check the Let’s Encrypt Support and click Save.

Enable Let's Encrypt SSL for example.com

Install & Configure WordPress

We’ve to configure wordpress2 Web Template for example.com before WordPress installation. It is a dedicated template for WordPress sites based on NGINX + PHP-FPM on VestaCP.

Visit this URL: https://127.0.01:8083/edit/web/?domain=example.com once more and look for the Web Template section. Select wordpress2 from the drop down and click Save.

Now revisit VestaCP web dashboard and make sure it looks like this:

Ideal set-up for an NGINX PHP-FPM WordPress site on VestaCP

Ideal set-up for an NGINX PHP-FPM WordPress site on VestaCP

Finally, Install WordPress

Login to your server as root

Type the following and hit enter:

$ ssh [email protected]

Use my bash script to install WordPress:

Copy and paste:

curl -O https://gist.githubusercontent.com/mighildotcom/7205442783534792a606df39629e22d3/raw/a02564e5eb9931da31e3f4988717b6119a82ea6e/vesta-wp.sh

and run:

bash vesta-wp.sh

The script will ask you to fill in few details like domain name, user and database details. USERNAME should be admin, and you must fill in other information according to your preferences.

  • USERNAME: admin
  • DOMAIN: example.com
  • Database NAME:
  • Database USER:
  • Database PASSWORD:

Wait for the “All done! Enjoy Fresh WordPress Installation.” message.

Now, visit example.com to configure WordPress.

Fill in Site Title, username, email, and password etc. Copy and paste your password and username somewhere safe. There are chances VestaCP mailer won’t send WordPress’ system emails.

You can use Sparkpost as the default mailer. Create an account on their website and configure TXT, CNAME records for the mailer domain (mailer.example.com). Install their plugin and save the API details to activate the same.

Finish WordPress Installation

Install the Cloudflare Flexible SSL, Really Simple SSL Plugins & Turn on Cloudflare SSL

Cloudflare Flexible SSL plugin is essential for enabling Flexible SSL on Cloudflare and will prevent infinite redirect loops when loading your WordPress site under CloudFlare’s Flexible SSL system.

Flexible SSL for CloudFlare

Really Simple SSL plugin will make sure your site is loading over https:// all the time. It is essential to install this one as well.

Really Simple SSL

Install both plugins and head over to Cloudflare dashboard. Turn on Cloudflare CDN right away.

Enable Cloudflare CDN Cloudways

Install A WordPress Theme

Read This Before Installing A Theme

Twenty Nineteen will be the default theme of your blog. Stick with it, if you like it. WordPress 5.0 (Bebo) comes with Gutenberg block editor as default.

You may install and activate the “Classic Editor” plugin if you don’t like the Gutenberg editor.

Install And Activate Classic Editor WordPress

You can download Classic Editor plugin from the official GitHub repo, or install and activate it through your WordPress administration panel at Plugins → Add New.

How to Select The Default Editor on WordPress

You can set the default editor in the Writing Panel within the Settings → Writing.

How to Select The Default Editor on WordPress

How to Install A WordPress Theme

You can install themes via WordPress administration panel at Appearance → Themes → Add New. You could either search and install WordPress Themes or upload them and install.

How to Install A Theme in WordPress

Recommended WordPress Theme For Bloggers

I recommend GeneratePress; a Gutenberg-friendly WordPress theme ideal for both casual and serious bloggers. It is highly flexible, 100% A11Y-ready and lightweight. I’ve been using this theme for a few months. My GeneratePress review covers all the information you need to get started with this WordPress theme.

GeneratePress Review: Best Gutenberg-ready Theme in October 2021

You can download GeneratePress for free from their website, or install it through your WordPress administration panel at Appearance → Themes → Add New.

That’s it; you’re all set. Happy blogging!

Other recommendations

These recommendations are genuine and based on personal experience.

WordPress Caching Plugin

Make use of a caching plugin called Autoptimize developed by Frank Goossens (futtta). It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default (but can also defer), moves and defers scripts to the footer and minifies HTML.

Autoptimize

Hide WordPress Login URL With A Plugin

You should protect your website by changing the login URL and preventing access to the wp-login.php page and wp-admin directory while not logged-in. Use WPS Hide Login, a Free plugin.

WPS Hide Login

More

  • Sparkpost: For email delivery. The setup procedure is straightforward.
  • Zoho Mail: Ad-Free Business Email Hosting.

Need help from a pro?

Send a message now!

Dark Mode for GeneratePress

Yep, Dark mode for GeneratePress done minimally. This website is a demo.

I made Jot, a starter site template for GeneratePress Premium. It comes with an automatic dark mode for supported systems and browsers. This template heavily relies on  prefers-color-scheme CSS media feature. Refer to my previous blog post if you want to read more about that.

Key features of Jot:

  • Automatic dark mode. Follows Google’s best practices.
  • Grayscale filter while in dark mode. Applicable to img, code, kbd, pre, samp, and blockquote.

Overall, the site template would be ideal for writers and bloggers that embrace minimalism.

How to use the GeneratePress Dark Mode site template

Step 1: Download the JSON file and import it to your GeneratePress settings. Accessible via Dashboard → Appearance → GeneratePress → Import Settings.

Step 2: Copy and paste the CSS to the Additional CSS section. Accessible via Dashboard → Appearance → Customize → Additional CSS.

Be sure to edit the settings and style to meet your goals and standards.

Raw .json

{"modules":{"Backgrounds":"generate_package_backgrounds","Blog":"generate_package_blog","Colors":"generate_package_colors","Copyright":"generate_package_copyright","Elements":"generate_package_elements","Disable Elements":"generate_package_disable_elements","Menu Plus":"generate_package_menu_plus","Secondary Nav":"generate_package_secondary_nav","Sections":"generate_package_sections","Spacing":"generate_package_spacing","Typography":"generate_package_typography"},"mods":{"font_body_variants":"regular,italic,700,700italic","font_body_category":"serif","font_site_title_variants":"300,300italic,regular,italic,700,700italic,900,900italic","font_site_title_category":"serif","font_site_tagline_variants":false,"font_site_tagline_category":false,"font_navigation_variants":false,"font_navigation_category":false,"font_secondary_navigation_variants":false,"font_secondary_navigation_category":false,"font_buttons_variants":false,"font_buttons_category":false,"font_heading_1_variants":false,"font_heading_1_category":false,"font_heading_2_variants":false,"font_heading_2_category":false,"font_heading_3_variants":false,"font_heading_3_category":false,"font_heading_4_variants":false,"font_heading_4_category":false,"font_heading_5_variants":false,"font_heading_5_category":false,"font_heading_6_variants":false,"font_heading_6_category":false,"font_widget_title_variants":false,"font_widget_title_category":false,"font_footer_variants":"","font_footer_category":"","generate_copyright":"%copy% %current_year% jot.sh. <\/a> Powered by GeneratePress<\/a> for WordPress<\/a>."},"options":{"generate_settings":{"hide_title":false,"hide_tagline":true,"logo":"","retina_logo":"","top_bar_width":"full","top_bar_inner_width":"contained","top_bar_alignment":"left","container_width":500,"header_layout_setting":"fluid-header","header_inner_width":"contained","nav_alignment_setting":"left","header_alignment_setting":"center","nav_layout_setting":"contained-nav","nav_inner_width":"contained","nav_position_setting":"nav-below-header","nav_dropdown_type":"click-arrow","nav_search":"disable","content_layout_setting":"one-container","layout_setting":"no-sidebar","blog_layout_setting":"no-sidebar","single_layout_setting":"no-sidebar","post_content":"excerpt","footer_layout_setting":"fluid-footer","footer_inner_width":"contained","footer_widget_setting":"0","footer_bar_alignment":"right","back_to_top":"","background_color":"#ffffff","text_color":"#333333","link_color":"#72b1db","link_color_hover":"#3498db","link_color_visited":"","font_awesome":false,"font_awesome_v4_shim":false,"dynamic_css_cache":true,"smooth_scroll":false,"header_background_color":"rgba(232,232,232,0)","site_title_color":"#3a3a3a","site_tagline_color":"#7c7c7c","font_body":"PT Serif","site_title_font_transform":"none","site_title_font_size":45,"navigation_font_transform":"none","navigation_background_color":"rgba(232,232,232,0)","navigation_background_hover_color":"rgba(135,135,135,0)","navigation_background_current_color":"rgba(112,112,112,0)","navigation_font_weight":"400","navigation_font_size":17,"navigation_text_hover_color":"#6b96bc","header_text_color":"#3a3a3a","header_link_color":"#b5190e","navigation_text_color":"#727272","navigation_text_current_color":"#6b96bc","header_link_hover_color":"#b5190e","form_button_background_color":"#72b1db","form_button_text_color":"#ffffff","form_button_background_color_hover":"#3498db","form_button_text_color_hover":"#ffffff","form_background_color":"#ffffff","form_border_color":"#0a0a0a","form_border_color_focus":"#0a0a0a","form_text_color":"#0a0a0a","form_text_color_focus":"#0a0a0a","blog_post_title_color":"#333333","blog_post_title_hover_color":"","heading_2_weight":"500","heading_2_transform":"none","heading_2_font_size":24,"heading_1_weight":"500","heading_1_transform":"none","heading_1_font_size":27,"footer_background_color":"rgba(232,232,232,0)","footer_text_color":"#878787","footer_link_color":"#878787","footer_link_hover_color":"#3498db","buttons_font_weight":"600","buttons_font_transform":"none","buttons_font_size":17,"footer_transform":"none","widget_title_font_weight":"600","widget_title_font_transform":"none","widget_title_font_size":21,"widget_content_font_size":17,"footer_font_size":15,"heading_3_transform":"none","subnavigation_background_color":"#666666","subnavigation_background_hover_color":"rgba(85,85,85,0)","subnavigation_background_current_color":"#555555","subnavigation_text_hover_color":"#ffffff","font_awesome_essentials":true,"body_font_size":17,"mobile_heading_1_font_size":27,"logo_width":60,"mobile_site_title_font_size":24,"heading_3_weight":"500","heading_3_font_size":22,"heading_4_weight":"500","heading_4_font_size":20,"body_line_height":1.7,"site_title_font_weight":"500","site_tagline_font_size":15,"heading_1_line_height":1.15,"heading_2_line_height":1.5,"heading_3_line_height":1.3,"nav_dropdown_direction":"left","heading_1_margin_bottom":30,"single_post_title_font_size":29,"single_post_title_font_size_mobile":27,"single_post_title_line_height":1.7,"content_background_color":"rgba(255,255,255,0)","footer_widget_background_color":"rgba(232,232,232,0)","footer_widget_link_hover_color":"","sidebar_widget_background_color":"rgba(255,255,255,0)","paragraph_margin":1.3,"font_footer":"inherit","heading_2_margin_bottom":20,"mobile_heading_2_font_size":24,"entry_meta_link_color_hover":"#3498db","heading_3_margin_bottom":20,"heading_4_line_height":1.3,"top_bar_background_color":"rgba(99,99,99,0)","top_bar_font_size":14,"container_alignment":"boxes","footer_weight":"400","font_site_title":"Merriweather"},"generate_background_settings":false,"generate_blog_settings":{"excerpt_length":35,"read_more":"","masonry":true,"masonry_width":"width2","masonry_most_recent_width":"width4","masonry_load_more":"Load +","masonry_loading":"Loading...","post_image":true,"post_image_position":"","post_image_alignment":"post-image-aligned-center","post_image_width":"","post_image_height":"","date":true,"author":true,"categories":false,"tags":false,"comments":false,"column_layout":false,"columns":"50","featured_column":true,"single_date":true,"single_author":true,"single_categories":true,"single_tags":true,"read_more_button":false,"infinite_scroll":true,"post_image_padding":true,"single_post_image_padding":true,"page_post_image_padding":false,"page_post_image_position":"inside-content","single_post_image_position":"below-title","infinite_scroll_button":false},"generate_secondary_nav_settings":{"secondary_nav_position_setting":"secondary-nav-float-right"},"generate_spacing_settings":{"menu_item_height":52,"separator":20,"header_top":30,"header_right":30,"header_bottom":30,"header_left":30,"right_sidebar_width":30,"content_top":20,"content_right":10,"content_bottom":20,"content_left":10,"mobile_content_top":15,"mobile_content_right":15,"mobile_content_bottom":15,"mobile_content_left":15,"mobile_menu_item_height":53,"footer_right":10,"footer_left":20,"menu_item":11,"footer_bottom":30,"widget_right":30,"widget_left":30,"left_sidebar_width":30,"mobile_widget_right":20,"mobile_widget_top":20,"mobile_widget_bottom":20,"mobile_widget_left":20,"widget_top":25,"widget_bottom":25,"content_element_separator":1,"footer_top":10,"footer_widget_container_right":10,"footer_widget_container_left":10,"mobile_footer_widget_container_top":10,"mobile_footer_widget_container_bottom":10,"footer_widget_container_top":10,"footer_widget_container_bottom":10,"mobile_footer_widget_container_right":15,"mobile_footer_widget_container_left":15,"sub_menu_item_height":9,"mobile_header_right":10,"mobile_header_left":10,"mobile_menu_item":29,"sub_menu_width":110,"mobile_header_top":20,"mobile_header_bottom":20,"top_bar_right":10,"top_bar_left":30,"top_bar_top":8,"top_bar_bottom":8},"generate_menu_plus_settings":{"mobile_header":"enable","mobile_header_branding":"title","mobile_menu_label":"","mobile_header_logo":"","navigation_as_header":false}}}

Raw CSS

.main-navigation {
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
}
code {
	background: #72b1db;
	color: #fafafa;
	padding: 2px;
	border-radius: 3px;
}

img {
	border-radius: 5px;
}
kbd,
pre,
samp {
	font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	overflow-x: auto;
	margin: 1.5em 0 2em;
	padding: 20px;
	max-width: 100%;
	color: #fafafa;
	font-size: 0.97rem;
	line-height: 1.5em;
	background: #191919;
	border-radius: 3px;
}
blockquote {
	padding: 15px;
	quotes: "\201C""\201D""\2018""\2019";
	font-size: 96%;
	font-style: inherit;
	margin: 0 0 1.18em;
	position: relative;
	border-left: 3px solid #72b1db;
}
/* Dark Mode for GeneratePress*/
@media (prefers-color-scheme: dark) {
	body,
	.page-hero {
		background-color: #121212;
	}
	.entry-content,
	.entry-summary,
	h1,
	h2,
	h3,
	h4,
	.main-title,
	.main-title a,
	.main-title a:hover,
	.main-title a:visited,
	.wp-caption .wp-caption-text,
	br,
	.entry-title a,
	.entry-title a:visited {
		color: hsla(0, 0%, 100%, .75);
	}
	top,
	.generate-back-to-top {
		color: hsla(0, 0%, 100%, .75);
		background-color: #525252;
		text-decoration: none;
	}
	top,
	.generate-back-to-top:hover {
		color: hsla(0, 0%, 100%, .75);
		background-color: #72b1db;
		text-decoration: none;
	}
	.main-navigation {
		border-bottom: 1px solid #333;
		border-top: 1px solid #333;
	}
	code {
		background: #72b1db;
		color: #121212;
		padding: 2px;
		border-radius: 3px;
	}
	img,
	code,
	kbd,
	pre,
	samp,
	blockquote {
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
	}
}

Automatic Dark Mode for WordPress

Update: The Twenty Twenty-One by WordPress comes with color mode switcher. The feature is opt-in and supported in most operating systems, including Android, iOS, macOS, Windows 10, as well as most Linux distributions. If you have Dark Mode enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system’s preferences.

So if you’re new to tweaking CSS, you don’t have to follow my guide. You could just install the latest version of Twenty Twenty-One.

But, if you are determined, continue reading this blog post.

Now that prefers-color-scheme is available for modern web browsers, you can use it to enable an automatic dark mode for WordPress websites. It is a CSS media feature used to detect if the user has requested the system to use a light or dark color theme.

Meaning, you can define a dedicated style for each color scheme. And the browser will display the specific color scheme of the website according to the user’s system settings.

The recommended way to use it

@media (prefers-color-scheme: dark) {
body  {
background-color: #121212;color: #fafafa;}}
@media (prefers-color-scheme: light)  {
body {
background-color: #fafafa;color: #121212;}}

Refer to https://developer.mozilla.org/

But I use something straightforward like this

@media (prefers-color-scheme: dark) {
body {
background-color: #121212;color: #fafafa;}}

I prefer this approach since I’m confident with my default color combination.  Take a look at the styling I use for dark mode.

@media (prefers-color-scheme: dark) 
{
body, .page-hero {
background-color: #121212;
}
.entry-content, .entry-summary, h1, h2, h3, h4, .main-title, .main-title a, .main-title a:hover, .main-title a:visited, .wp-caption .wp-caption-text, br, .entry-title a, .entry-title a:visited {
color: hsla(0,0%,100%,.75);
}
top, .generate-back-to-top {
color: hsla(0,0%,100%,.75);
background-color: #525252;
text-decoration:none;
}
top, .generate-back-to-top:hover {
color: hsla(0,0%,100%,.75);
background-color: #72b1db;
text-decoration:none;
}
*.lgc-grid-50:hover {
background: #72b1db;
color: hsla(0,0%,100%,.75);
}
}

I use the GeneratePress framework for WordPress.

How to Implement Dark Mode for WordPress Websites

STEP 1: Understand and take a note of your default style.css or color options. It varies according to the WordPress theme you’re using. Make sure you don’t leave out tiny details such as the color combination for hyperlinks, menu elements, footer, code, blockquote, etc.

STEP 2: Adjust colors. You can add the prefers-color-scheme CSS media feature within style.css or to the additional CSS section of WordPress. Which is accessible via Dashboard → Appearance → Customize → Additional CSS.

BEST PRACTICE: It’s recommended to place @media (prefers-color-scheme: dark) {} right beneath the current set of additional CSS.

Keep in mind that dark theme isn’t just about replacing colors. Don’t use high contrast colors for paragraphs. Adhere to WebAIM guidelines and Google best practices. Good luck!

Tip Me:

Support if you’d like by referring my resume or donating through PayPal or Alipay.

GeneratePress Review: Best Gutenberg-ready Theme in December 2021

Looking for a top-notch lightweight WordPress theme compatible with Gutenberg? Your search ends here. Developed by Tom Usborne, GeneratePress is the best multipurpose theme you can download right now.

I’ve been using GeneratePress Premium version for a while. I tested GeneratePress free version last year. With optimal settings, it improved my site’s performance and loading speed. The base framework felt very flexible and promising, so I had to purchase the GP Premium license.

Update 1: Here’s one more reason to buy GeneratePress. I made an automatic dark mode site template for GeneratePress. Give it a try!
Update 2: I currently offer GeneratePress customization services.

Furthermore, the smooth learning curve makes GeneratePress stand out from the crowd. I’m currently redesigning ChengduLiving.com (a site I moderate) based on the GeneratePress framework.

So I decided to come up with a GeneratePress review and let everyone know why it’s one of the best WordPress themes out there.

Nb: Please bear with me. My review approach will be unorthodox but based on facts and technical reasoning. Let’s dive into it.

GeneratePress Review

GeneratePress is a 100% free Gutenberg-ready WordPress theme developed by Tom Usborne. You may download the free version with limited features and give it a whirl. Go ahead and download GeneratePress for free from their website, or install it through your WordPress administration panel at Appearance → Themes → Add New.

The free version surpassed 100,000+ installs on WordPress.org. The theme is routinely maintained and holds a 750+ 5 star rating. These numbers prove GeneratePress and Tom’s integrity as a developer.

Notable Features

I’m not going to mention the standard features. Let’s take a look the notable features of GeneratePress WordPress theme.

  • Insanely lightweight. The theme weighs around 887Kb.
  • Compatible with popular WordPress plugins.
  • 100% Compatible with WordPress 5.0 (Gutenberg).
  • A11Y-ready: Fully accessible to the blind/visually impaired.
  • Works well with Elementor page builder and Beaver builder.
  • Icons designed explicitly for built-in elements.
  • Active forum-based support at https://generatepress.com/support/.
  • Hooks (previously GP Hooks) allows users to “hook” custom code into various areas of the theme without changing core files.
  • Top-class documentation. https://docs.generatepress.com

Premium Version

GP Premium (priced at $49.95) is a plugin that adds a further layer of customizable options to the GeneratePress base theme.

Meaning, you’ll get access to premium modules like Site Library, Color, Typography, WooCommerce, Elements, Menu Plus, Sections, Secondary Navigation and more. Take a look at the official video overview:

You can use your license on unlimited websites. The license comes with one year of updates & support, 40% renewal discount and 30-day money back guarantee.

GeneratePress Premium Modules

Site Library: Lets you import demo sites and give you a headstart on your next project. Ideal for beginners to WordPress.

Color Options: You can take full control of your site colors using over 60 color options.

Typography: GenaratePress premium comes with 70 typography options. This module gives you complete control over your site text. You can add custom fonts also.

Elements: You can create beautiful dynamic page heros via Elements module. GeneratePress comes with an advanced hook system also. A few demo theme layouts are using these features.

WooCommerce: Take full control of your WooCommerce store using various typography, color, and layout options.

Menu Plus: This module includes features like sticky navigation, slideout navigation (uses vanilla JS), mobile header, navigation logo and more.

Spacing: Adjust the spaces according to your need. You can customize the padding and margins of various elements, including your header padding, menu item height and width, content padding, widget padding and more.

These are the GeneratePress Modules I’ve enabled as of now:

GeneratePress Modules Enabled on Mighil.com

GeneratePress Modules Enabled on Mighil.com

GeneratePress + Mighil.com, Results.

Take a look at the Pingdom Tools’ performance grade for Mighil.com. I’m using Autoptimize plugin on top of GeneratePress to speed up my website.

Mighil.com Performance Grade With GeneratePress

Tested from SF, USA region. I’m not using any premium CDN. CloudFlare is enabled.

I know a lot of people prefer GTmetrix over Pingdom Tools. So here’s the GTMetrix performance report for mighil.com.

GTmetrix Performance Report for Mighil.com, GeneratePress Enabled

I’m not using any premium CDN service. I’ve enabled CloudFlare HTTP proxy (CDN). My site is hosted on RamNode. I use NGINX +PHP-FPM + MariaDB backend configuration to power the WordPress site(s).

I highly recommend RamNode + VestaCP if you can self-manage a VPS. I pay 7 USD per month for my CentOS 7 64-bit server based in LA. Look for the OpenVZ SSD VPS (SVZS) – LA – 2GB SVZS plan after signing up with RamNode.  Contact me if you need professional guidance and support.

Gutenberg-ready & Plugins Support

Most WordPress themes out there are “Gutenberg ready,” but Tom and his team at GP had taken steps to integrate GeneratePress with the new editor on a deeper level.

Which means you can update your WordPress site to 5.0.x without worrying. Popular plugins like Yoast SEO, WooCommerce, Autoptimize, bbPress, WPML, etc. works great with GeneratePress.

Modules in Action

You’ve to install GP plugin to use the modules. Once you activate the plugin, you’d be able to edit the premium modules, fonts, colors, layout options and more.

Let me show you how the modules work on GeneratePress WordPress Theme. I use Blog, Copyright, Colors, Elements, Menu Plus, Spacing & Typography Modules.

The Blog Module

You can locate the blog module inside: Appearance -> Customize -> Layout -> Blog

Within this module, you have complete control over your blog (archives and single) section’s display. The blog module is categorized into three sections; Content, Featured Images and Columns.

Blog Module on GeneratePress

  • The Content section is divided into Archives and Single; here you can set the display rules for Archives and Single.
  • The Featured Images section is applicable to Archives, Posts, and Pages.; here you can set the Location, Alignment and Width/Height.
  • Finally, the Columns section lets you display posts in columns (or in masonry grid).

The Elements Module

GeneratePress introduced Elements module from version 1.7 onwards. This module replaces the classic Page Header and GP Hooks modules.

Elements are comprised of Header Element, Hook Element, Layout Element, and Display Rules. Visit this thread to learn more about GeneratePress Elements.

Using Yoast Breadcrumbs with GeneratePress Hook:

Using Breadcrumbs with GeneratePress Hook

The Colors Module

There are over 60 Color options available. I won’t be able to include all those options as screenshots in my GeneratePress WordPress Theme review. Here’s how it looks like in real-time:

View post on imgur.com

The Typography Module

This module comes with 70 typography options. From Header to Footer, you have 100% control over your text’s size and customization.

You can choose your favorite Google Font or stick with the System Fonts for better performance.

GeneratePress Typography Module

Visit (external link) this thread if you plan to add Adobe Typekit fonts to your GeneratePress Website.

Customizing Layouts

From the Container to the Footer section, GeneratePress lets you customize your WordPress website in numerous ways. You’d be able to customize the following layouts with GP Premium plugin:

  • Appearance -> Customize -> Layout -> Container
  • Appearance -> Customize -> Layout -> Header + Top Bar (personal favorite)
  • Appearance -> Customize -> Layout -> Primary Navigation
  • Appearance -> Customize -> Layout -> Sticky Navigation
  • Appearance -> Customize -> Layout -> Slide-out Navigation
  • Appearance -> Customize -> Layout -> Sidebars (personal favorite) minimal now.
  • Appearance -> Customize -> Layout -> Blog
  • Appearance -> Customize -> Layout -> Footer + Top Bar

Within the footer layout, you can set the number of Footer Widgets and fill in the Copyright info. Here’s my Footer and Sidebar layout settings.

GeneratePress Footer LayoutGeneratePress Sidebar Layout

Conclusion

GeneratePress Free version is ideal for casual bloggers, and GP Premium is bang for the buck. Get this WordPress theme:

  • If you’re serious about blogging.
  • If you want to set up a landing page for a business.
  • If you plan to run a community website.
  • If you’re a developer looking for the best WordPress framework/boilerplate to start with.
  • If you plan to set up a WordPress blog in China.

I highly recommend GeneratePress to both WP beginners and experts.

Starting A New Blog?

Get The Best WP Theme For Experts & Beginners

Download GeneratePress

Guide To Speed Up Site in China

Yes, you’d come across a whole bunch websites that discuss tips to optimize the loading speed of your website in China. Unfortunately, few of them are brutally outdated. Some of these websites represent web hosting agencies that upsell services. And the rest may sound complicated to bloggers and entrepreneurs with little to no experience. Skip introduction.

Update: Planning to start a new blog in China? I’ve prepared the definitive guide to start a blog. Purchase ExpressVPN or SocketPro subscription (if you’re in China) and build your blog based on Namecheap, DigitalOcean, GeneratePress, and Cloudflare.

Get Your China Web Perf Audit

I’ve prepared this guide for newbie bloggers and small to medium-sized businesses that run a website or blog, intended to cater to both international and Chinese users.

If you are planning to set up a brand new WordPress site, go ahead read my blog post on “How to Start A WordPress Blog in China.”

Bonus: I’d bust some common myths via this article. E.g., “host your site in China for the best speed,” “WordPress won’t work well in China” etc.

Now buckle up and start optimizing your website for China.

8 Steps to optimize the speed of your website in China

Step 1: Monitor The Website Performance

The first thing to do is to understand your website’s loading speed in the greater China region. Services like tools.pingdom.com and PageSpeed Insights (Google) are great.

The only problem is Pingdom free version doesn’t allow you to test from Asia – China region and Google usually pings your site from US IPs.

Need an alternative? Here’s a list of free tools to test website load time from China

  • https://www.webpagetest.org
  • https://www.site24x7.com/web-page-analyzer.html
  • https://www.dotcom-tools.com/website-speed-test.aspx
  • https://ce.baidu.com/index/performance (You need to sign-up)

Usually, after a first test run, these sites will give you tips on how to improve the loading time. These tips are great, but you need to go further to optimize the site for China.

Fun Fact: mighil.com loads faster than a digital marketing agency based in Shanghai that wrote an article on the same topic (real bummer, innit?).

Now here are some workarounds to make your optimize your website and the server so that the site content will render fast!

Step 2: Reduce TTFB

Google defines TTFB as a period of “waiting”:

Time spent waiting for the initial response, also known as the Time To First Byte.

This time captures the latency of a round trip to the server in addition to the time spent waiting for the server to deliver the response.

Read More About TTFB on Wikipedia

webpagetest.org indicates your site’s TTFB in the “First Byte” section of the results page.

There are “n” number of methods to reduce First Byte Time. But, I’d suggest finding the root of the problem before changing the host or purchasing a CDN service.

You could initiate a chat with your webmaster or hosting provider first, get insights from them, then decide what to do next.

Here are some recommended best practices to reduce First Byte Time.

1. Improve the server configuration: These methods will vary according to what web server you are using. A lot of readers aren’t tech-savvy, so it is wise to leave this duty to your webmaster. Ask your webmaster to optimize Apache or NGINX for better TTFB. Head over to https://stackoverflow.com to view recommendations and insights that may sound optimal for you.

2. Use a CDN: Using a good quality CDN can help deliver your static content, like images and scripts, faster to users via a network of servers worldwide. Aliyun (from Alibaba), Tencent Cloud CDN and Akamai are some of the best CDN service providers for China.

Pro Tip: Do not have the budget to buy a premium CDN service? The cheapest workaround is to move your server to Hong Kong or Singapore region. Digital Ocean‘s Singapore node servers work flawlessly in China.

Warning: Cloudflare CDN (free package) is known for its high TTFB. Do no use Cloudflare CDN’s free service to improve TTFB; it’ll work the other way around.

Step 3: Reduce The Website Page Size

Yeah, it’s the modern age. Everyone has better internet at home or at work. But that doesn’t mean you’ve to create a 10MB index page. The site load time will go up if you don’t reduce your web page’s size. It’ll affect your ranking also.

Ideally, your website should load within 4 seconds at least (if it’s not hosted in China). You should compress whenever it’s necessary. Do not use a site builder like WPBakery if you are using WordPress. WPBakery’s CSS is quite bloated in my opinion.

Step 4: Use lightweight WordPress Themes

Waterfall chart of mighil.com (archived.)

WordPress, Joomla, and Magento are great content management systems and e-commerce platforms to manage blogs and e-commerce stores.

For example, if you are maintaining a blog based on WordPress that caters Chinese audience, you should stick with optimal settings when it comes to the themes. There’s a ton of “heavy” WordPress themes that may potentially decrease the performance of your site.

But, WordPress is Blocked in China, right?

No. WordPress sub-domain loads blazing fast in China.

Or use Baidu; you can find mirror links to download WP package anyway.

WordPress is famous here, and I know few people who run a WordPress blog in China by throwing Cloudflare on top of it. However, a lot of Chinese web devs or companies don’t prefer WordPress in general as a CMS platform. They tend to build their own CMS based on PHP or Node.js etc.

And local bloggers in general, they prefer Chinese CMSs or blogging platforms over WP. I moderate Chengdu Living, an expat community-focused website based on WP. And it works well without a VPN. Same with this site, mighil.com. Feel free to check out my WP beginners guide for bloggers in China for more detailed info.

I’d suggest GeneratePress framework (developed by Tom Usborne) if you’re building a new site intended to the users in China.

GeneratePress is insanely lightweight, and it loads very fast. Read my GeneratePress WordPress theme review if you’re interested.

Look at mighil.com for example. My site is built on GeneratePress framework and powered by a San Francisco based server. Still, it promises a decent load time (2 to 4 seconds) in China.

Download The Fastest WordPress Theme

Step 5: Usage Of Web Fonts or Fonts in General

Web font usage is another important factor when it comes to slowing down your websites in China.

Don’t even think about using Google fonts or Adobe Typekit fonts. Both works if you’ve got an optimized CDN. But it is still not recommended to fetch fonts from GFW blocked resources.

Here are a few alternatives:

Google Font Alternative for China

google-webfonts-helper” lets you download your favorite Google fonts for offline use.

Visit https://google-webfonts-helper.herokuapp.com/fonts/

Which means, you can download Google fonts to your PC in .otf formats, upload to your server and fetch them directly using @font-face in the stylesheet.

Adobe Typekit Alternative for China

Quite tricky. You should completely avoid Adobe Typekit and purchase the license for the fonts from the designers. Then you could upload eot, ttf, svg, woff and woff2 files and use them within your CSS snippet.

Use System Font Stacks

Recommended approach if you want the site to load even faster. A “system font stack” is a way of telling the web browser to use the font your operating system is already using.

So, what’s your call? A website with custom fonts (that adds at least 100kb page-size + respective loading time) or the one that loads blazing fast?

Here’s an example code snippet you could use in the CSS:

body * {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Step 6: Inspecting Links To External Resources

Make sure your site(s)’ CSS, images, video files or JavaSCript does not load from external resources blocked by Chinese internet a.k.a the GFW.

The best approach is to host everything locally (recommended) or use a CDN optimized for China.

Step 7: WordPress Caching

Running a blog based on WordPress (CMS)? Make use of a caching plugin called Autoptimize developed by Frank Goossens (futtta). Autoptimize makes optimizing your site easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default (but can also defer), moves and defers scripts to the footer and minifies HTML.

The “Extra” options allow you to optimize Google Fonts and images, async non-aggregated JavaScript, remove WordPress core emoji cruft and more.

Step 8: Hire Someone

Last resort. Hire a web performance expert if you aren’t able to optimize everything by yourself. I’d also recommend this to people with little to no working knowledge of HTML, servers or CMS in general.

Hire Me to Optimize Your Website

I do offer such services for a price of flat 1000USD. I provide custom speed up services for your site on any hosting platform: shared, VPS or dedicated (ranging from DigitalOcean to Aliyun).

My Pricing

  • 1000 USD for complete optimization. I charge the same for setting up a new server from scratch.
  • 800 USD for a full audit (delivered in 7 days) and 1 hour consulting.
  • 2500 USD for a brand new WordPress website and server set-up.

Cover Photo by PAUL SMITH on Unsplash.

Koji: Gutenberg-Ready Theme

Looking for the best minimal WordPress theme compatible with Gutenberg? Here’s Koji. Developed by Anders Norén, Koji is a stunning light-weight theme that focuses on content. The Koji theme promises a pleasant browsing/scrolling experience also.

Note: This is not a promotion. Koji is simply great, and I’d recommend this minimal Gutenberg theme anytime.

Update: I’m using GeneratePress WordPress theme right now. Visit https://go.mighil.com/koji kaijudigital.org to view the demo of Koji. Kaiju Digital (WIP) will be based on this Gutenberg-friendly minimal WordPress theme.

Koji WordPress Theme Preview

Koji

Koji is ideal for freelancers and bloggers who embrace minimalism. The theme emphasizes your content and loads blazing fast on modern browsers and all devices.

Why I use Koji

I was in search of a Gutenberg compatible theme that’s minimal. I love GeneratePress (which is minimal and compatible with Gutenberg as well), but I wanted something even light-weight and easy to use. I didn’t need a lot of options and customizations GeneratePress offered. Koji looked ideal for me.

I do recommend GeneratePress if you prefer to make money from blogging. It’s a great framework. Check my GeneratePress review for more details.

Koji is ideal for small personal websites like mine with lots of images and text-based content.

Clean Design, Speed & Typography

As you can see, Koji renders your system font stack which makes the website load faster on all devices. The smooth animations also promise a better experience for your readers. This feature makes Koji the best fit for photography based blogs and portfolio websites.

Gutenberg Support

It’s clear that the developer has built Koji with the new WordPress Gutenberg editor in mind. The theme has full support for blocks and editor styles. It also supports the classic editor.

What I’ve Done With Koji

I’ve edited Koji’s stylesheet a bit to fit my needs. I’ve also replaced some png files with Base64 strings. My site’s sidebar area and headings are styled to render Sofia Pro font. I’m not using the social icons that came with Koji theme. I use Lightweight Social Icons developed by Thomas Usborne.

PageSpeed Insights & Pingdom Website Speed Test Result

Keep in mind that kaijudigital.org is based on CentOS, NGINX,MariaDB, & PHP-FPM, and the server is optimized for better load time. I use Autoptimize plugin developed by Frank Goossens (futtta) to reduce the file requests and compress other stuff.

These were the results of mighil.com + Koji WordPress theme. Go ahead and check kaijudigital.org’s performance score if you’re still worried about the page loading speed.

The speed score on Desktop

Mobile

The speed score on Mobile.

Here’s the Pingdom Website Speed Test Result:

Take a look at the Pingdom Page Performance Grades:

No, I don’t use a CDN service. I’m using CloudFlare free service at the moment.

So, if you are looking to install a best minimal Gutenberg compatible WordPress theme, go ahead and get Koji for free from the WordPress theme directory, or install it through your WordPress administration panel at Appearance → Themes → Add New.


Need a hand?

Need help optimizing your WordPress website to achieve better load-time and search performance? Connect with me now.


Bash Script to Install WordPress on Vesta CP

The Vesta control panel (VestaCP) is an open-source hosting control panel, which can be used to manage multiple websites, create and manage email accounts, FTP accounts, and MySQL databases, manage DNS records and more.

There are a lot of tutorials on how to install WordPress on VestaCP. The Vesta Control Panel comes with Softaculous, but you’ve to pay for the license to auto-install WordPress on your server using Softaculous.

If you’re looking for a free option, an auto-install bash script would be the right choice to install WordPress on your server.

Note:

  1. You’ve to add a domain first (using the Vesta CP web interface).
  2. The script is only applicable to the admin group. i.e. username:admin.

Major features of the WordPress auto install bash script

I edited the bash script posted by @jetonr on GitHub Gist. I modified a little bit for VestaCP admin group. The main features of the script include:

  1. Downloads the latest.tar.gz to the public_html of the user and domain you enter.
  2. Removes unnecessary files (wp-config-sample.php, readme.html, license.txt and latest.tar.gz)
  3. Creates a secure .htaccess file & set correct permissions for the file.
  4. Generates a robots.txt file with right ownership.
  5. Creates a database with user and password you enter. Which will go to the wp-config file.
  6. Creates a wp-config.php file with generated configuration and SALT included.

How to use the WordPress auto install bash script for VestaCP

How to Automate WordPress Installs

Choose from the two methods below:

Method 1: Add this line your Bashrc file.

Stick with this method if you plan to set up a lot of WordPress sites. This method will make things easier the next time when you want to install WordPress.

What is Bashrc?

bashrc is a shell script that Bash runs whenever it is started interactively. It initializes an interactive shell session. You can put any command in that file that you could type at the command prompt.

On CentOS, you’ll find the bashrc file inside the /etc directory. Visit this thread if you can’t locate the file.

Edit the file bashrc file and add this line:

alias wpinstall="curl -L -o 'vesta-wp.sh' https://gist.githubusercontent.com/migftw/7205442783534792a606df39629e22d3/raw/a02564e5eb9931da31e3f4988717b6119a82ea6e/vesta-wp.sh && bash vesta-wp.sh"

Save the file and run:

source ~/.bashrc

That’s about it. Just type

wpinstall

anywhere to begin the installation process.

Method 2: Download the script and run it

This is pretty straight-forward also.

curl -O https://gist.githubusercontent.com/migftw/7205442783534792a606df39629e22d3/raw/a02564e5eb9931da31e3f4988717b6119a82ea6e/vesta-wp.sh

and

bash vesta-wp.sh

The script will do the rest. Good luck!

Hire me to optimize your WordPress site

Cloudways: An Honest Review

Update: Exclusive Cloudways Coupon Code 2018 – FLAT 20% off!!

Image result for good news everyone

One more reason to start or migrate your WordPress site to Cloudways. I’ve teamed up with Cloudways to bring you an excellent and exclusive deal.


Use the coupon code “MIGHIL” to get a FLAT 20% discount on the first invoice. Offer applies to all plans.


This one’s a killer Cloudways promo code if you’re selecting a small or medium-sized server to host your WordPress site.

Click here to sign-up & use the promo code MIGHIL.

This Cloudways promo powered by Mighil.com is a limited time offer valid for three months starting from September 19, 2018. Hurry up and take advantage of the best Cloudways coupon for 2019.

How to use the Cloudways Coupon Code

Mighil.com’s exclusive Cloudways coupon code gives you FLAT 20% off on your first invoice independent of the servers you choose. Follow the instructions below to redeem the coupon code and get a fair discount while signing up with Cloudways.

Visit this link to land on the Cloudways sign-up page.

Cloudways Discount 2018

Click on Get Started Free and it’ll lead you to the sign-up form.

Now click on “Got a Promo Code” and fill in MIGHIL

Cloudways Promo Code 2018 Exclusive

Cloudways: An Honest Review by Mighil

New to Cloudways managed cloud web hosting platform? Not sure if it’s the best choice for managing your WordPress site(s)? Read this blog post before investing your time and money on Cloudways.

TLDR; Yes, it is one of the best WordPress hosting platforms. Read the backstory, will you? Then we’ll jump to the review.

Backstory

I’m very picky but straightforward when it comes to recommending stuff to friends and peers. I’ve tested a handful of dedicated Cloud hosting (VPS) services to date. I’ve been a DigitalOcean user for years before switching to BandWagonHOST and NameCheap hosting.

In love with BandWagonHOST

BandWagonHOST is quite cheap, and they provide OpenVZ & KiwiVM based plans. The downside? You need to have intermediate skills in managing virtual private servers. It’s not for the faint-hearted. I loved every bit of managing own server and setting up multiple WordPress sites on BandWagonHOST. It was fun while it lasted.

Leaving BandWagonHOST for NameCheap

I left BandWagonHOST just because the servers were getting slow for the mainland Chinese audience. I hosted a few projects for Chinese clients on BHW, but the performance got worse (even with a Cloudflare CDN). Things were going south, and I needed a quick solution. NameCheap came to the rescue, temporarily. Quite frankly, cPanel isn’t my thing, so I left NameCheap in a few days and got a 100% refund.

Leaving NameCheap for CloudWays

I visited my hometown in India last June for work related reason. Anvar at Mozilor suggested Cloudways and said they’re using Cloudways for years. I never thought of giving it a try since I was quite happy with my highly flexible BandWagonHOST server during that time.

His suggestion came on my mind while researching for a new host. Signed up and tested their service, really liked it, and now I’m with Cloudways.

Cloudways Platform, A Brief Introduction

What is CloudWays?

Unlike the widely used consumer-friendly options like Bluehost, HostGator or Siteground, Cloudways adds the DIY touch to the WordPress hosting scene by bringing together an innovative, scalable, budget-friendly managed hosting platform with rich features and 24x7x365 support. Their newly redesigned website looks sleek and comes with a neat UI.

CloudWays Features

With Cloudways, you can spin up “pay as you go” servers based on DigitalOcean, Vultr, Linode, Amazon AWS or Google Cloud Platform. Apart from that, Cloudways platform comes with handy performance-boosting technologies, including PHP7, Nginx, Redis, Memcached, Varnish, HTTP/2 and add-ons like DNS Made Easy, Rackspace Email, Elastic Email, CloudwaysCDN and more.

Cloudways Pricing

CloudWays Pricing

As you can see, Cloudways is a “Pay As You Go” platform; meaning, you will pay only for the resources you consume. You can either bind a credit card to automate the billing or use PayPal to add funds.

Base Packages

  • DigitalOcean – Starting at $10/month.
  • Linode – Starting at $12/month.
  • Vultr – Starting at $11/month.
  • Google Compute Engine – Starting at $34.17/month.
  • Amazon Web Service – Starting at $36.04/month.

Build A WP Site With Cloudways

3-Day Free Trial

You can Get Started for FREE using a valid email ID or with LinkedIn, GitHub or Google+ accounts. Keep in mind that they’ll ask for a working phone number (not a VoIP or Google Voice number) during registration. Also, note that you have to initiate a chat with customer support to start your 3-day free trial without a credit card.

Cloudways Activation

It took about 15 minutes for Cloudways to review my account. Here’s the screenshot of the conversation I had with Zeeshan at Cloudways.

Cloudways Chat

The customer support team will ask you to provide the email ID and website URL (not mandatory) for initial review. Later, they will send you a confirmation email to activate the account.

CloudWays Activation Email

The whole process was smooth, and you can create a new WordPress application right away for testing. “Need a Hand” button on the right side will open Help Center, which will be a goldmine for beginners to managed hosting.

CloudWays Start New Server

Click LAUNCH NOW after choosing the application and server details.

Why Choose Cloudways for WordPress

The Cloudways platform assures high-speed performance, managed security and expert support.

Above mentioned are the essential factors to look for when you’re purchasing a managed hosting service. Let’s look at the key features.

Server Speed & Performance

I have experience managing servers at a root level. Even though Cloudways doesn’t provide root access, they offer a wide array of performance boosters essential for WordPress applications.

Cloudways High-Speed Performance WordPress

Built-in Advanced Caches

Cloudways provide an optimized stack with ready to use caches including Memcached, Varnish, Nginx, and Redis to deliver expedited responses.

PHP 7 Ready Servers

All Cloudways server are PHP 7.x ready, which is known to be significantly faster than its predecessor.

Cloudways also give you the option to Control Core Services that allow your application(s) to run. You can optimize it now and then if you know what you’re doing.

CloudwaysCDN (New)

Cloudways Add-ons

Cloudways platform now comes with CloudwaysCDN, a new powerful and straightforward service that delivers superior performance and excellent global response times.

It can be integrated quickly and will significantly improve the speed of your WordPress website.

Auto-Healing Managed Cloud Servers

Auto-healing lessens your worries about website crashing or downtime. Cloudways is equipped with auto-healing and comes to site’s rescue.

Free WordPress Cache Plugin

Breeze by Cloudflare

Breeze; the WordPress plugin engineered by Cloudways team offers better WordPress performance boosting comparing to other cache and performance plugins.

Breeze WordPress plugin comes pre-installed on Cloudways.

Redis Support

Enabling Redis improves the performance of databases. Combined with Apache, Nginx, and Varnish; you’re looking at unbeatable performance.

Pre-configured PHP-FPM

PHP-FPM speeds up your website and improves the loading times of your PHP environment.

HTTP/2 Supported Servers (New)

Cloudways servers are HTTP/2 enabled which significantly increases the speed of communication between the web servers and clients.

Managed Security

Security is essential even if you are running a personal website or a professional blog that attracts a fair amount of traffic.

Cloudways platform is equipped with security practices to keep your servers safe.

Dedicated Firewalls

According to the Cloudways, all servers hosted by Cloudways are protected by OS-level firewalls that filter out malicious traffic and keep out the intruders.

1-Click Free SSL Installation

Cloudways platform comes with built-in Let’s Encrypt SSL. It also lets you add your SSL certificates easily with few clicks.

Get A 3-Days Trial for Cloudways

IP Whitelisting

The Cloudways platform lets you create a whitelist of IPs, making it easy to collaborate with networks or regions with unrestricted access to SSH and SFTP.

Regular Security Patching

Cloudflare claims they perform regular OS patches and firmware upgrades on servers. Security patches ensure a robust managed cloud server experience by avoiding vulnerabilities.

Two-Factor Authentication

Two-Factor Authentication (TFA)  adds an extra layer of safety to your Cloudways account.

Adding A WordPress Application

Adding a WordPress application is pretty straightforward on Cloudways.

Visit https://platform.cloudways.com/apps and click on + Add Application button to add a new app to the server.

Cloudways Console

You can set a primary domain, install Let’s Encrypt SSL certificate (including wildcard SSL) and optimize the site afterward. This console is pretty intuitive.

Migrate a Cloudflare-enabled site to Cloudways

Backup, Clone/Staging and Migration

Backup

Cloudways Backup

You can perform an on-demand backup of your server via the console. Cloudways console also has an option to enable Local Backups; this will additionally create a downloadable copy of all the applications present on your server.

Clone App/Create Staging

Cloudways Staging Feature

Cloning/staging is a great beta feature Cloudways providing for its community. Cloudways lets you create staging apps and move data between staging and live applications.

Migration

Cloudways provides a decent migration tool to move the site from your old host to Cloudways platform. I’ve already written an article on this topic. You can read it here if you’re planning to migrate a website with SSL enabled.

Cloudways WordPress Migrator

Download CloudWays WordPress Migrator

Server and App Monitoring

Cloudways Server Monitoring

Cloudways provides performance graphs on various aspects of your server. They have partnered with Newrelic to offer built-in App Monitoring as well.

You can enable New Relic agent in the Services section of the console.

Customer Support

Yes, support should be a priority while choosing a cloud platform for WordPress. You don’t want to end up in the hands of a service provider that doesn’t respond to your queries and concerns promptly.

Cloudways customer support team are the best, period. You can talk to the Customer Success Team via live chat, or submit a ticket through the ticketing system. They’ve recently launched a community website as well.

You can access it here: https://community.cloudways.com/

Their Knowlege Base is well-documented also. Most articles are beginner friendly and reminded me that of NameCheap’s KB articles.

Frequently Asked Questions

How good is Cloudways support?

Their Live Chat Support Team is available 24/7/365 for everyone. You can also create a Support Ticket. If you are an enterprise customer, you may contact [email protected]

Do I need a credit card to sign up for a free trial?

No. A credit card is not required. However, you’d only have three days to test the platform.

Can I have servers on separate pricing plans and different cloud providers?

Yes, you can launch multiple servers of the same or different cloud hosting plans and providers. It is entirely up to you.

How many applications can I launch on a single server

There is no restriction on the number of apps you can start on a single server.  However, plan well according to your server specifications.

What if I exceed my bandwidth?

Bandwidth is calculated based on the provider you select.

  • On Amazon and Google servers, bandwidth billing is on demand at all times.
  • Vultr charges $0.02 to $0.05 per GB for additional bandwidth usage (varies with data center region).
  • DigitalOcean charges $0.02 per GB for additional bandwidth usage.

How to cancel Cloudways account?

Cloudways is a “Pay as you go” platform. You can cancel the account by deleting your servers anytime, and you only need to pay for what you’ve used.

Verdict

I am familiar with DigitalOcean, and I love using Cloudways as a platform because it’s flexible and transparent. I can add my clients for billing and even add team members for collaboration.

The platform is quite intuitive so that I can teach my clients’ very basic stuff without taking 100% responsibility for the project.

Cloudways is ideal for professional bloggers and small to medium-sized companies as well. If you are skeptical, go ahead and test the platform for three days.

Goodluck!

Get Started With Cloudways for FREE!

Best PayPal Plugins for WordPress & WooCommerce

Affordable Cloud Platform – Run Multiple WP Sites – Get Started for FREE!

PayPal is undoubtedly one of the faster, safer ways to send money and make online payments. Most of the e-commerce websites and online merchants accept PayPal payments.

This blog post is for website owners, merchants and professional bloggers who prefer to receive online payments via PayPal. Without further ado, let’s look at the best PayPal plugins for WordPress sites and WooCommerce store.

Note: I strictly avoided reviewing old WordPress PayPal plugins, and those are not compatible with the latest version of WordPress.

PayPal Express Checkout Payment Gateway for WooCommerce

Are you running a WooCommerce store? Do you plan to integrate express checkout in the product pages? Then this is the plugin you need.  Developed by WebToffe, PayPal Express Checkout Payment Gateway for WooCommerce is a handy plugin that expands the standard PayPal payment option within WooCommerce.

With this PayPal plugin, your potential customer can use their credit card or PayPal balance to make order from cart page itself. This guarantees smoother experience for the users as they never have to leave your website for making payments.

Furthermore, the plugin is well-documented and costs $59.00 if you need the premium version. I highly recommend you to try the live demo before making the purchase.

PayPal for WooCommerce

Another plugin ideal for WooCommerce store owners. PayPal for WooCommerce makes it quick and easy for its users to integrate PayPal Express Checkout and Payments Pro into a WordPress / WooCommerce shopping cart system. This plugin fully supports WooCommerce Subscriptions and WooCommerce Payment Tokens as well.

Note: Payments Pro is PayPal’s complete online payment processing solution. By using their plugin, they can get you hooked up with PayPal Payments Pro with no monthly fee (U.S. and Canada merchants only.)

This free plugin has proper documentation, and they’re quite active on the support forum. It is recommended to read the reviews before installing.

Quick Paypal Payments

Quick PayPal Payments

Just as the name suggests, this free plugin is quite straightforward that lets you accept payments using a shortcode. The plugin now comes with features like Instant Payment Notifications, In-Context Checkout and GDPR compliancy options.

I searched a lot for WordPress PayPal plugins. Most were bulky and not meeting all my needs. I was building a website for a non-profit and needed to accept donations online with PayPal, with pre-defined or a custom amount. Sounds a simple need but a lot of PayPal plugins did not have this feature. I landed on this plugin and just fell in love with it!

Very easy to set up. Great customization of the form and its styles. Fantastic support from Graham who wrote this plugin! And a very affordable and deserving price. What else do you want in a plugin?

Thanks to Graham for building this awesome plugin!

pushkard

The plugin is known for its straightforwardness, simplicity, and support. Therefore, give it a try if you’re looking a minimal solution.

PayPal Donations

Are you running a non-profit organization? Do you need funding for your blog? This plugin comes in handy if you plan to accept donations via PayPal. This Free plugin adds a PayPal donation shortcode and sidebar Widget to WordPress. The options menu lets you set up your PayPal ID and a few other optional settings.

PayPal Donations

The plugin is well documented and has options available for currency, localization of the button (16 languages), custom payment page style, and the return page. Furthermore, there are optional advanced settings available to fine tune the setup in specific scenarios.

Contact Form 7 – PayPal & Stripe Add-on

This is another great PayPal plugin that seamlessly integrates PayPal (and Stripe) with Contact Form 7. Each contact form on your website can have its own PayPal & Stripe settings. When a contact form is enabled with PayPal, and the user submits the form it will send the email (as usual) and auto redirects to PayPal.

PayPal & Stripe plugin works with both the old and new Contact Form 7 interface. It has got built-in support for 18 languages and 25 currencies. This plugin also allows PayPal testing through SandBox.

The Contact Form 7 – PayPal & Stripe Add-on plugin is intuitive, and the developer is quite active on the support forum to answer the queries.

The pro version of this PayPal plugin comes with handy features including:

  • Send Contact Form 7 email only if the PayPal payment is successful.
  • Link a form item to quantity – A form item can be a textbox, dropdown, radio button, etc. anything that is a number.
  • Link a form item to price – The price field can be linked to any form item. Pipes are supported to allow for drop-down text options for each price.
  • Link form items to option text fields – The text field can be linked to any form item.
  • Charge Fixed Tax
  • Charge Tax Rate
  • Charge Shipping & Handling per item
  • Hide Customer’s Custom Note Field
  • Choose a cancel payment URL per contact form
  • Choose a successful payment URL per contact form

Get the pro version of Contact Form 7 – PayPal & Stripe Add-on

I hope this article helped you find the best PayPal WordPress plugin that fit your needs. Do let me know if you’ve some other plugin recommendations. I’ll review and update here.


Need help?

Need a custom solution to integrate multiple payment gateways on your website? I can help you with the same and improve the growth strategy of your site. Contact me right away!

Migrate a Cloudflare-Enabled WordPress Site to CloudWays

I’ve been using CloudWays for a while; it turns out to be a great platform to spin-up servers and manage applications efficiently. Quite frankly, they are one of the best hosting providers out there that promise quality managed-hosting solutions for affordable pricing.


This guide is only applicable to Cloudflare free SSL certificate users.


Previously, I wrote a quick guide on how to set up CloudWays Let’s Encrypt SSL and Cloudflare SSL together without throwing an infinite redirection loop or 5xx errors. Today, I’ll show you how to migrate a Cloudflare-enabled WordPress site to Cloudways seamlessly without hurting the SEO and HSTS settings.

Backstory

Click here to skip the backstory and jump to the main steps.

Well, I decided to pen this guide because I’ve gone through the same situation. I had more than 10 WordPress instances on my BandwagonHOST server. They are fantastic, but I wanted dedicated Singapore servers, and DigitalOcean was the only reasonable option left.

However, there are limitations when you directly use DigitalOcean. It doesn’t come up with impressive end-user-friendly features like CloudWays. On top of that, I prefer to give dedicated access to my clients and add them as the team members. DigitalOcean can be too much for the client-side. CloudWays seems more flexible for clients with inter-mediate WordPress skills.

Hence I chose CloudWays and decided to move all the WordPress sites. I had to go through a few uninvited hiccups during the transition (damn infinite redirection loop).

Finally, I figured out a quick solution to fix these issues and make my website migrations an easy-peasy process.

Select Cloudflare in the WAF Module

Quite important. Do it before migrating your WordPress sites to CloudWays.

Log into the Cloudways Platform with your credentials. Then click on the Advanced tab in the Server Settings & Packages section under the Server Management area.

CloudWays Advanced Tab

Under the Advanced tab. Select CloudFlare under WAF Module and save the settings by clicking on Save Changes.

Install the Cloudflare Flexible SSL, Really Simple SSL Plugins on the Old Host

Doing this will promise 100% successful migration. I’m sure you’ve already installed these plugins on your WordPress site to avoid Cloudflare redirection loop. Do it if you haven’t.

Flexible SSL

This plugin is essential for enabling Flexible SSL on WordPress and will prevent infinite redirect loops when loading your Cloudways WordPress sites under CloudFlare’s Flexible SSL system.

Install the Cloudflare Flexible SSL Plugin

Download Cloudflare Flexible SSL Plugin.

Really simple SSL

This plugin makes sure your site is loading over https://all the time. It is essential to install this one as well.

Install really simple SSL Cloudflare

Download Really Simple SSL Plugin.

Turn off Cloudflare CDN, Point Your Domain & Generate Let’s Encrypt SSL

Next tip to make sure the site works well after migration. We can temporarily point the domain to the new CloudWays host (server) for a few minutes just to generate Let’s Encrypt SSL. We’re doing this to make sure the host won’t throw any hiccups after migration.

Why Should I Point My Domain to CloudWays?

It is not possible to create Let’s Encrypt SSL certificates in Cloudways platform while the CloudFlare CDN is active, so turn it off by clicking the Orange Cloud as shown in the image. The Grey Cloud means CloudFlare CDN is off.

Turning off Cloudflare CDN & Pointing The Domain

Turn off DNS as shown in the image below. Replace 127.0.0.1 with your server’s IP.

Turn off Cloudflare CDN to generate CloudWays Let's Encrypt SSL Certificates

Now visit the CloudWays platform and fill in your PRIMARY DOMAIN in the Domain Management section. Save Changes afterward.

How to point your Domain to CloudWays

Generate Let’s Encrypt SSL Certificate

Now generate the Let’s Encrypt SSL certificate by accessing the SSL Certificate section. Be sure to create a Wildcard SSL Certificate and set a new CNAME record as suggested by CloudWays.

Generate SSL Cloudways

Save Changes and wait for CloudWays to generate Let’s Encrypt SSL certificate.

You can confirm the Let’s Encrypt SSL status by visiting the newly propagated WordPress site over https. Click on the padlock from the URL bar, and check detailed SSL certificate info.

Switch Back to The Old Host, Turn on Cloudflare CDN & Migrate

This process is dead simple. Just edit the A record and fill your old host’s IP address. Then turn on Cloudflare CDN.

Migration

Visit the old website, download and Install CloudWays WordPress Migrator. The plugin is quite intuitive, and it will do the rest.


Pro tip: Disable security plugins and add-ons before migrating. Doing so will make sure that the new host doesn’t get confused by your security settings. i.e. disable backend URL modifications just to be on the safe side. You can activate these plugins after migration.


Cloudways WordPress Migrator

Download CloudWays WordPress Migrator

Enable SSH Access & Generate Credentials

Enable SSH access within the Application Settings.

Enable SSH access CloudWays

Generate App Credentials also.

Enable SFTP CloudWays

Now enter the following details in the plugin interface to migrate:

  1. Enter any email address.
  2. Your Destination Site URL (fill in your domainname.tld with https enabled since we’ve already set the primary domain and generated SSL certificate in the CloudWays Application Settings interface).
  3. Enter your Database name.
  4. Enter your Server Public IP address.
  5. SFTP Username (for the particular app).
  6. SFTP Password.
  7. Agree to TOS and click on Migrate button to start migrating your website.

Here’s how it may look like:

Migrate Your Site to Cloudways

That’s about it. Good luck!

FAQ

Here are my answers to the questions someone posted on Cloudflare community website.

Q. The actual migration itself is as simple as pointing the A record to the new domain, right?

A. No, refer to the guide.

Q. Will WordPress sort out the URL issues, images and such when the staging site’s URL gets changed? What steps do I need to take to not end up with problems and broken images?

A. No need to worry, just use the migrator plugin as suggested in the guide.

Q. How do I ensure that the SSL certificate works when the migration is done – shall I install the SSL already on the staging site?

A. Please refer to this section in the guide.

Q. I have the option to use Let’sEncrypt SSL’s automatically from Cloudways – shall I opt for this rather than the Cloudflare certificate? If so, how and when do I make this switch?

A. You should opt for both. Read my previous guide on how to set up CloudWays Let’s Encrypt SSL and Cloudflare SSL together.

Q. Do I create a new Cloudflare account for the staging site with a new SSL certificate?

A. You wouldn’t need a staging site at all. You can create a subdomain and point it to CloudWays if you’re too worried.

Q. Do I migrate the site without SSL certificate first and then only apply it once the domain migration is completed?

A. No need, just follow my instructions in this guide.

Q. How do I ensure that the HSTS settings don’t leave my site hanging, or people unable to reach the site?

A. It will work after the migration.

Q. SEO-wise, is there anything to consider during a migration?

A. None and no need to worry about SEO.


Need help?

Does this guide sound too much of a tech jargon? I can help you migrate your Cloudflare-enabled site to CloudWays host for the price of a cup of coffee. Contact me right away!

How to Add Typekit Fonts to A WordPress Website

Let’s assume you’re not happy with the “wide range” of Google fonts.  This blog post will teach you how to add Typekit fonts to your WordPress site manually without using a plugin. Skip introduction.

Typography Matters

Typography is all about adjusting the text within the design while creating compelling content. It provides an attractive appearance and preserves the aesthetic value of your content. It plays a vital role in setting the overall tone of your website and ensures a great user experience.

Typography expresses personality and is a part of your identity

Read: 5 Reasons Why Typography Matters (External Link)

Why Adobe Typekit

Adobe Typekit is a subscription service for fonts which you can sync to your computer or use on a website. Instead of licensing individual fonts, you can sign up for the plan that best suits your needs and get a library of fonts from which to choose.

Why Use Typekit?

This blog post will teach you how to add Typekit fonts to your WordPress site manually.

  • You don’t need a third-party plugin to embed Typekit fonts on a WordPress website.
  • Intended Audience: Intermediate WP users.

Add Typekit Fonts to A WordPress Website

Follow these steps precisely.

    1. Visit Typekit.com & create a Kit ID.

      Select a plan and create a font kit for your website. Ignore this step if you have got the Typekit CSS or JS code in handy.

      Create a Kit ID
      Credit: Adobe Help Center

      Copy the specific Kit ID for the web project; We’ll use this Kit ID in the next step.

    2. Open the Theme Editor.

      Visit Appearance → Theme Editor and edit the Theme Header (header.php) file.

      Copy and paste the following code anywhere between <head> and </head>.

      Replace fnw3sdq with your Adobe Typekit Kit ID.

      <!-- BEGIN Typekit Fonts for WordPress --> 
      <link rel="stylesheet" href="https://use.typekit.net/fnw3sdq.css"> 
      <!-- END Typekit Fonts for WordPress -->
    3. Set Custom CSS Rules.

      Style rule varies according to the WordPress theme you’re using. Visit Appearance → Customizer and look for the Additional CSS section.

      Here’s an example, just for reference:

      h1, h2, h3, h4, h5, h6 {
      text-transform: none;
      font-family: "sofia-pro",sans-serif;
      font-weight: 600;
      }
      
      body, button, input, select, textarea {
      font-family: proxima-nova;
      font-weight: 400;
      text-transform: none;
      }

      The set of CSS rules should be customized according to your current theme and its preferences.

      Happy styling! Feel free to comment if you need any guidance. Contact me by email if you prefer dedicated support.

Need help?

Please tip me. I’ll help you set any Typekit font on your WordPress website.

How to Use Cloudflare And CloudWays SSL Together

Cloudways is undoubtedly a great managed web hosting service provider. Their one-click features are impeccable if you’re new to the whole hosting scene. They’re also good at providing documentation for all topics related to their platform and its features.

But, to be honest, there is no detailed or specific documentation on the “Cloudflare flexible/full/strict SSL + CloudWays SSL” subject. Things can go south if you enable Cloudflare flexible SSL and CloudWays’ free Let’sEncrypt certificates together without tweaking a few settings.

Learn How to Install Cloudflare and CloudWays SSL Together on a WordPress Site

Let’s see how we can successfully set up Cloudflare and CloudWays SSL together on a WordPress site without generating infinite redirection loops or 5xx errors.

Disclaimer: Backup or create a clone of your website before proceeding. Try this AT YOUR OWN RISK. I’ve tested this one on three sites (during migration), and it worked flawlessly.

Select Cloudflare in the WAF Module

Assuming that you’ve already added your site to Cloudflare and Cloudflare has issued a free SSL certificate (it takes up to 24 hours for the same), here’s what you should do next.

Log into the Cloudways Platform with your credentials. Then click on the Advanced tab in the Server Settings & Packages section under the Server Management area.

CloudWays Advanced Tab

Under the Advanced tab. Select CloudFlare under WAF Module and save the settings by clicking on Save Changes.

Turn off Cloudflare CDN to generate CloudWays Let’s Encrypt SSL Certificates

It is not possible to create Let’s Encrypt SSL certificates in Cloudways platform while the CloudFlare CDN is active, so turn it off by clicking the Orange Cloud as shown in the image. The Grey Cloud means CloudFlare CDN is off.

Turn off Cloudflare CDN to generate CloudWays Let's Encrypt SSL Certificates

Setup Primary Domain & Generate the Let’s Encrypt SSL

You know the drill, visit Cloudways platform, create an app, and set the primary domain in Domain Management.

Now generate the Let’s Encrypt SSL certificate by accessing the SSL Certificate section. Be sure to create a Wildcard SSL Certificate and set a new CNAME record as suggested by CloudWays.

Generate SSL Cloudways

Install the Cloudflare Flexible SSL, Really Simple SSL Plugins & Turn on Cloudflare SSL

Flexible SSL

This plugin is essential for enabling Flexible SSL on WordPress and will prevent infinite redirect loops when loading your Cloudways WordPress sites under CloudFlare’s Flexible SSL system.

Install the Cloudflare Flexible SSL Plugin

Download Cloudflare Flexible SSL Plugin.

Really simple SSL

This plugin makes sure your site is loading over https:// all the time. It is essential to install this one as well.

Install really simple SSL Cloudflare

Download Really Simple SSL Plugin.

Turn on Cloudflare CDN

Go ahead and turn on Cloudflare CDN after enabling the plugins listed above.

Enable Cloudflare CDN Cloudways

After the CloudFlare SSL is active, you can change it to Full Strict. It’s up to you.


Need help?

Does this guide sound too much of a tech jargon? I can help you fix the SSL certificate issue of your website for the price of a cup of coffee. Contact me right away!

Start a WordPress Blog in China

A lot of expats prefer to share the adventure in China with their friends back home. Legends say starting a WordPress blog in China can be painstaking. That’s bullshit. All you need is a VPN service to get started.

Update 2: Published a new guide on how to start a blog.

Update 1: I highly recommend RamNode servers also. Their servers are dirt cheap compared to managed hosting solutions. Contact me on WeChat @mighil if you need help setting up a website based on RamNode servers.

Why A Self-hosted WordPress Blog in China?

Dedicated hosting can be pricey since they come with one-click tools. A lot of blogging platforms doesn’t work well in China as well.

So, it’s wise to host your own WordPress blog. I’ve prepared this ultimate guide to teach you how to make a self-hosted personal WordPress website in China.

Note: This post contains 2 affiliate links and a referral link. Which means I will earn a small commission when you purchase using my links. No extra cost to you.

If this guide sounds too much of a tech jargon:

You may hire me to set up a WordPress blog in China.

Prerequisites:

a. VPN

A VPN is essential. A lot of websites I’m going to mention below doesn’t work well in China. Feel free to use my affiliate link in the sidebar to sign-up with Express VPN. Their service is pretty good in China.

b. Domain name

A domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet. You know the drill; go ahead and buy a domain name that reflects your brand name.

I prefer NameCheap over Gandi.net since it has got a faster interface. Go ahead and use my affiliate link (starts from 0.88USD/year) if you prefer to register a domain using namecheap.com.

c. A Virtual Private Server (VPS) to host your website.

A Virtual Private Server (VPS) is a virtual machine sold as a service by an Internet hosting service. Many companies including Aliyun in China offer virtual private server hosting or virtual dedicated server hosting as an extension for web hosting services.

There are several challenges to consider when licensing proprietary software in multi-tenant virtual environments. With unmanaged or self-managed hosting, the customer is left to administer their server instance. However, shared/dedicated hosting + cPanel in China can be pricey.

Services like Hostgator comes with one-click options, but you’ve got to pay the price for the same. So, we’ll be self-managing a DigitalOcean droplet (VPS) based on Ubuntu or CentOS.

Why DigitalOcean?

Even though, DigitalOcean is not for everybody. As a beginner, it’s something I’d recommend. You can learn a lot more about VPS in general when you start from scratch without anyone’s help. Feel free to join DigitalOcean using my referral link.

d. Putty or Terminal and WinSCP or Cyberduck

Putty or Terminal

You’d need an SSH client to login to your VPS.

PuTTY is an SSH and telnet client, developed originally by Simon Tatham for the Windows platform. Use Terminal if you’re using a Mac.

WinSCP or Cyberduck

Not everyone is a Linux savvy. As a beginner, you won’t be flexible with using Linux commands to move/copy and edit files. Hence you’d need an SFTP/FTP client to view, edit and manage the data on your server.

WinSCP is a free and open-source SFTP, FTP, WebDAV, Amazon S3 and SCP client for Microsoft Windows.

I suggest Cyberduck for Mac users since I use it often. You have other options like FileZilla for Windows and Transmit for Mac. Use any SFTP software you’re comfortable with.

e. Others

  1. You’ll be using VestaCP (free and open-source control panel) as the default VPS control panel to host the WordPress website on your server.
  2. For the managed DNS part and to speed up your website in China, I’d suggest Cloudflare since their interface is sleek. They also provide a free SSL. Having a Cloudflare generated SSL certificate is crucial since Google will be counting HTTPS as a ranking factor. Go ahead, visit cloudflare.com and create an account right away.

I hope you’ve got a basic idea now. Fire up ExpressVPN, let’s start a WordPress blog in China.

A. Buy A Domain

Purchasing a domain on NameCheap is pretty much straight-forward. Sign-up, search for a domain name of your choice, add it to the cart and make payment. After the purchase, visit this URL and click “manage”.

Note:

  • You can purchase a .cn domain and host it outside of China with the help of Chinese friend.
  • You don’t need a China ICP license for hosting the .cn domain outside of China.

Buy and Manage Domain NameCheap

Once you click “manage”, you’ll see something like this.

Manage NameCheap domain

Keep the browser window idle and proceed to the next step.

B. Add Site to Cloudflare

Visit cloudflare.com and log in to your account. Visit this URL or click “+ Add Site” located in the upper right corner.

Cloudflare Add Site

Now fill in your domain name and click “Add Site.”

Cloudflare Add Domain

Click “Next”, select the free plan and click “Confirm Plan.”

Cloudflare Free Plan

Now, wait for Cloudflare to finish querying your DNS records.

Cloudflare DNS Query

Usually, Cloudflare will return your current DNS settings (aka NameCheap default settings). But sometimes it may display an error like “we are unable to find your DNS settings.” Just click “Next”.

As you can see below, Cloudflare will ask you to change your nameservers.

Cloudflare Nameservers

Visit the idle window I mentioned at the end of step 1. Select the “Custom DNS” in the NAMESERVERS section and fill the nameservers as suggested by Cloudflare and Click save.

Cloudflare Custom DNS

Switch the active window to the Cloudflare setup and click “Continue.” Give it a few minutes for the DNS propagation. The Cloudflare status will be “Active” after DNS propagation.

C. Create A DigitalOcean Droplet

DigitalOcean calls its cloud servers Droplets; each Droplet you create is a new server for your personal use.

If you are a new user, DigitalOcean will ask you either top up 5$ credit or add a preferred payment method.

I’d top up 5$ via PayPal since it’s the wise choice than adding a credit/debit card. Now sign in to your DigitalOcean account and visit the dashboard.

Click “Create Droplet” and refer to the screenshot below:

Create Droplet DigitalOcean

DigitalOcean VPS pricing starts from 5USD per month. Choose an ideal server for your personal website.

Since we are in China, I’d recommend Singapore location for hosting the WordPress site.  

CloudFlare has got data centers in China, and it will make sure your website delivers content without any lag.

Go ahead and select the 5USD server if you are setting up a personal website aiming less than 10k users per month.

Note:

  1. You can upgrade and optimize droplets whenever you like.
  2. I’ve selected Ubuntu 16.04.4. You can choose CentOS 7.5 x64 as well. Keep in mind that Ubuntu uses apt with DEB packages, while CentOS uses the YUM package manager with RPM packages. In this tutorial, I will be using “yum” often. CentOS is believed to be more stable because it has less frequent updates to their packages.
  3. I highly recommend readers to learn more about SSH keys and generate/set-up SSH keys while creating a droplet. SSH keys provide a more secure way of logging into a virtual private server with SSH than using a password alone.

Click “create” if everything looks ok for you. DigitalOcean will generate Public IP, one-time root password and send it over to your registered email address.

D. Install VestaCP On CentOS

Step 1: Login to your server as root

Use the credentials DigitalOcean sent you over email to log in.

Open up Putty on Windows. Things are pretty much intuitive on Windows. If you find it confusing, read this article.

In case you are using a Mac, open Terminal, type the following and hit enter:

$ ssh [email protected]

Replace 67.218.xxx.xx with your server’s IP address. 

After logging in for the first time, DigitalOcean’s Linux distro will force you to change the password. Just do it.

Step2:  Install Vesta CP

Download installation script

$ curl -O http://vestacp.com/pub/vst-install.sh

Run it to start the installation

$ bash vst-install.sh

Ubuntu may ask you to force the installation sometimes. Run this command to do it:

$ bash vst-install.sh -f

It will ask you type in the host name and email address. It’s wise to not use your domainname.tld as the hostname.

Use something like cp.domainname.tld. 

VestaCP roughly needs 5 to 10 minutes to finish the installation.  It will display the login URL and admin credentials upon completing the installation.

E. Configure DNS

Visit the DNS section of your website in Cloudflare.com.

Set CNAME and A records as follows.

  • A Record – Name: @, ipv4 address: 67.218.xxx.xx
  • A Record – Name: cp, ipv4 address: 67.218.xxx.xx
  • CNAME record – Name: www, Domain Name: @

Don’t forget to replace 67.218.150.74 with your server’s IP.

Make sure it looks like this after editing.

Cloudflare DNS

F. Add New Website on VestaCP

Step 1: Visit the VestaCP login URL.

It may look like https://67.218.xxx.xx:8083

Log in using the credentials you saved before. Change the admin password after logging in.

Feel free to tweak other settings according to your preference.

Step 2: Add a website

Visit the WEB section in the VestaCP and click the “ADD WEB DOMAIN” button.

VestaCP Add New Domain

Fill in the domainname.tld (eg: mynewsite.com) and select the default IP address. Click the ADVANCED OPTIONS and edit the Alias to www.domainname.tld. Click “Add” when you’re ready.

VestaCP New Domain

Wait for few seconds and visit domainname.tld. You’d see a dummy home page generated by VestaCP.

Step 3: Create a Database for WordPress

VestaCP has installed default software stacks required for WordPress.

You have to create MySQL database right now so we can use the same during WordPress installation.

To do this, visit the DB section of your VestaCP. Click “Add DB and fill in the details.

VestaCP Database

Note: Prefix admin_ will be automatically added to database name and database user. It’s a VestaCP setting by default.

Click “Add” when you’re ready. Save the database details somewhere safe.

G. Download And Install WordPress

Oh boy! we’re almost there. Let’s install WordPress already!

Login to your VPS using Putty/Terminal as root user. Use cd to navigate to the domainname.tld folder located inside the home folder.

$ cd /home/admin/web/domainname.tld/public_html/

Go ahead and download WordPress to the public_html folder using the following command:

$ wget http://wordpress.org/latest.zip

Now unzip the wordpress.zip folder by:

$ unzip latest.zip

Wait patiently and let it finish the thing.

Move it from wordpress folder to the public_html folder afterwards:

$ cd wordpress
$ shopt -s dotglob; mv -- * ..

Now go back to the public_folder.

$ cd /home/admin/web/domainname.tld/public_html/

Delete the default index.html file and the WordPress folder generated while unzipping.

$ rm index.html
$ rmdir wordpress

Now move the wp-config-sample.php to wp-config.php using the following command:

$ mv wp-config-sample.php wp-config.php

Now you have to edit the wp-config.php file. You may use WinSCP/Cyberduck to do the same.

Connect to your server using the root credentials. Open the wp-config.php file located in /home/admin/web/domainname.tld/public_html/

how to edit wp-config.php

Replace database_name_here with the database name you’ve generated on VestaCP. Fill in the username, password as well and click save.

Open Putty/Terminal again and log in to your VPS as the root user.

Run this command to set chown rules for VestaCP admin user:

$ chown -R admin:admin /home/admin/web/domainname.tld/public_html

It will come handy when you’re about to install a new theme/plugin on WordPress.

Now visit your website and finish the WordPress installation.

Read this guide to setup CloudFlare flexible SSL for your WordPress website.

That’s it, happy WordPress powered blogging in China!

Chat With China Web Consultant

If you have set-up a new blog about your life in China feel free to share the link via email. I’ll add you to the “great success” list.

Direct all technical questions to WeChat: mighil.