The Ultimate Nginx Configuration For WordPress Website

So recently I decided to move my server from HostGator to DigitalOcean droplets. In comparison, DigitalOcean has so many benefits over HostGator, especially for developer. The most notable are:

  1. Full root access
  2. You can install anything you want on DigitalOcean
  3. Free SSL (Let’s encrypt)
  4. Cheaper
  5. More powerful server (2GB of RAM, 50GB SSD, 2TB transfer for just $10/month)

My website was running on Apache server at HostGator. As I’ve heard so many good things about Nginx, I decided to make the change. Installing Nginx was easy. However, as I’m not familiar with Nginx, I spent more than a day to solve these two issues:

  1. Website is not accessible. I got 502 Bad Gateway error every time I try to access my site.
  2. When I was able to access my site. All pages/posts are 404 except the home page.

So, to save you time, I’m going to share my configurations so you can follow and get your site up and running fast on Nginx.

Configure PHP FPM

First, let’s edit you php-fpm www.conf file. I’m running php7.2 so the file is located here:

/etc/php/7.2/fpm/pool.d/www.conf

However, if you are running a different php version, you may have different path. The trick is to cd from /etc the ls to see the list of folders. For example, if you have php 7.3, the path would be:

/etc/php/7.3/fpm/pool.d/www.conf

Edit the file using your favorite editor. I’m using vim so I type:

vim /etc/php/7.2/fpm/pool.d/www.conf

Let’s navigate to the line says:

listen = /run/php/php7.2-fpm.sock

Comment that line by placing a ; at line start and type the following line below:

listen = 127.0.0.1:9000

Now it will look like this:

 

configure php-fpm www.conf

Save your file and restart php fpm. I’m on ubuntu 18.04 so my command to restart php fpm is this:

systemctl restart php7.2-fpm

However, if you are on a different server, the command could be different. You can google for the exact command for your system.

Configure your site’s server block

Let’s go to:

/etc/nginx/sites-available/

And create a file match your domain name. For example, my site is excelautocomplete.com, I’ll create file called excelautocomplete.com

vim excelautocomplete.com

then enter the following content to the file:

# WordPress single site rules.
# Designed to be included in any server {} block.
# Upstream to abstract backend connection(s) for php
upstream php {
        server unix:/tmp/php-cgi.socket;
        server 127.0.0.1:9000;
}

server {
        ## Your website name goes here.
        server_name domain.tld;
        ## Your only path reference.
        root /var/www/wordpress;
        ## This should be in your http block and if it is, it's not needed here.
        index index.php;

        location = /favicon.ico {
                log_not_found off;
                access_log off;
                expires max;
        }

        location = /robots.txt {
                allow all;
                log_not_found off;
                access_log off;
        }

        location / {
                # This is cool because no php is touched for static content.
                # include the "$is_args$args" so non-default permalinks doesn't break when using query string
                try_files $uri $uri/ /index.php$is_args$args;
        }

        location ~ \.php$ {
                #NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
                include fastcgi.conf;
                fastcgi_intercept_errors on;
                fastcgi_pass php;
                fastcgi_buffers 16 16k;
                fastcgi_buffer_size 32k;
        }

        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                expires max;
                access_log off;
                log_not_found off;
        }
}

You need to pay close attention to two fields:

  • server_name
  • root

in server_name, type in your website address (without http or https). In the root field, enter the location of your site’s file (the folder that contains wp-content, wp-admin…)

Save the file and reload nginx.

systemctl reload nginx

Now, your site should be up and running without an error.

Conclusion

Moving my website from Apache to Nginx was a challenging but exciting experience for me. I lost a sales due to my customer cannot get to the download page of the product. However, I’ve learned a lot from this experience and next time when I need to move other sites, the whole process would be much faster and easier.

Hopefully, the post has been helpful to you. If you have questions, don’t hesitate to ask.

Picture Guide To Create Child Themes In WordPress Step By Step

If you are reading this post, you may have heard of the good things that a child theme bring. Most of the time, you like the look and feel of the parent theme, however, you still need to modify a bit to your liking. This is the perfect case to create child themes in WordPress. Another example is when you want to alter some functionalities of the parent theme such as change the WooCommerce shop page design. Once you know how to create a child theme, there are many great things you can do. Without further ado, let’s learn how to create child themes in WordPress.

There are two ways you can create a child theme in WordPress. If you are comfortable with creating folders and files, then take a look at the second method below. However, if you want an easy way, maybe using a plugin to create your child theme is the right way.

Create child themes inĀ  WordPress using plugin

We are going to use a plugin called Child theme wizard. Let’s go to Plugins->Add new and type Child theme wizard in the search box:

plugin to create child theme

Let’s click on Install now and wait until the text on the button change to Activate. Click on Activate.

Now, go to Tools->Child theme wizard:

creating child theme with child them wizard

If you are creating a child theme, chances are you want to add styles or function to the current active theme. Thus, you should leave the parent theme as the currently active one (however, you can create a child theme for any theme available in your themes folder).

Next, let’s enter some details. You can enter anything you like in these boxes. When you are done, click on Create Child Theme.

After a few seconds, you should see this notice:

wordpress child theme created sucessfully

The child theme was created successfully.

Now, let’s go to Appearance, you should see the child theme listed there:

child theme created

Now you can activate the child theme and write additional styles and functions to your site.

 

Create WordPress child theme by manually creating the theme files

If you want to create the folder structure for the child theme yourself, let’s follow the instructions below:

Here are the steps we are going to do to create a child theme

  1. Locate the parent theme that you want to create a child theme for
  2. Create a folder to host the child theme’s content
  3. Create the style.css file inside child theme folder to declare its information
  4. Activate the child theme in WordPress dashboard

Let’s go through the steps above. In this post, I’m going to use my local development server (which runs Windows). However, you can apply the same concept to create child themes on cPanel or even through linux command line. If you need help, please let me know.

Locate the parent theme that you want to create a child theme for

The first thing you need to do is to find out which theme you want to create a child theme for. Let’s go to your wp-content/themes folder. Here I have some themes available:

list of themes in wordpress themes folder

I’m going to create a child theme for the theme storefront, which is the default theme of WooCommerce. It’s totally depend on you to pick the parent theme.

Create a folder to host the child theme’s content

Our next step is to create a folder to host the child theme’s files. I’m going to create a folder called storefront-child-theme. You can give the folder any name you want. However, the name should (not must) make it obvious to see the parent-child relationship. Some other good examples for child theme’ names are:

  • storefront-child
  • storefront-extend-theme

Now, in our wp-content/themes folder, we have these folders:

create child theme folder

Create the style.css file inside child theme folder to declare its information

Our next step is to go to the child theme’s folder and create a file named style.css. This is the must-have file of any WordPress theme. Let’s enter the following details in style.css:

/*!
Theme Name:   Storefront Child Theme
Theme URI:    https://binarycarpenter.com/?p=1158&preview=true
Author:       Dat
Author URI:   https://binarycarpenter.com/
Template: storefront
Description:  This is the storefront child theme
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront-child-theme
Tags:         e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, editor-style
*/

There are quite some fields here (each field stays on one line). However, there are two fields you need to pay attention to. Those are Theme NameĀ and Template.

These two fields are required and they have some strict rules you must follow:

  1. For the “Theme Name” field, you can put anything you like in here but it must be unique across all your themes (on your site).
  2. For the Template field, the value of this field must match the FOLDER NAME of this theme’s parent theme. In this example, the parent theme’s folder is storefront so I put storefront in the Template field. You should put this value according to your parent theme.

Let’s save the file and go to the next step.

Activate the child theme in WordPress dashboard

Now we have successfully created the child theme for storefront. Let’s go to Appearance->Themes inside WordPress dashboard to activate it:

child theme in wordpress dashboard

As you can see, we now have a new theme called Storefront Child theme. Let’s hover on it and click on activate. The site is now running our new child theme. Now you can start working on writing custom CSS styles, additional functions in the functions.php files…

Conclusion

Child themes bring a lot of flexibility to your WordPress site. Knowing how to create and work with child theme is important, even when you are not a developer. Child themes let you customize the styles and also add new functions to the parent theme. Hopefully the post has been helpful to you. If you have any questions, please let me know in the comment below.