wordpress

All about wordpress related tips and tricks, codes, snippets etc.

  • Add a Search Box in Primary Navigation

    ·

    How to add a search box in primary menu of a genesis theme which is located at the site header. This is applicable for secondary menu also.

    First of all, add the following code inside the functions.php file:

    // Add a Search Bar to PRIMARY Navigation Menu
    add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
    function theme_menu_extras( $menu, $args ) {
    if ( 'primary' !== $args->theme_location )
    return $menu;
    $menu  .= '<li class="search-bar">' . get_search_form( false ) . '</li>';
    return $menu;
    }

    If you want to add a search box in secondary menu, you need to change the word, “primary” to “secondary”.

    After adding the code the the site header will look like:-

    desktop view
    mobile view

    Now add the following code inside media only screen section of style.css:-

    .genesis-nav-menu > .search-bar {
    float: right;
    }
    desktop view

    Now, we should either remove the search button or place the button inline with the search box. To achieve this we need to make some modification in our style.css file.

    .search-form input[type="search"] {
    width: 60%;
    float: left;
    }

    Now the site header will look good as follows:-

    desktop view
    mobile view

    Finally, if you would like to hide the search button, you need to add the following codes inside style.css:-

    .genesis-nav-menu .search-form input[type="submit"] {
    display: none;
    }
    .search-form input[type="search"] {
    width: 100%;
    float: left;
    }

    The new looks will be cleaner.

    final result

    For further fine tuning, you need to add the following code into style.css

    /* Search Form
    --------------------------------------------- */
    .genesis-nav-menu .search-form input[type="submit"] {
    display: none;
    }
    .search-form input[type="search"] {
    width: 160px;
    float: left;
    font-size: 14px;
    padding: 10px 15px;
    background-color: #ddd;
    }
  • Customized Genesis Sample Theme V 2.8.0

    ·

    I recently customized genesis sample theme version 2.8.0 for use at wbxpress. I like to share it here, so that you can use it too.

    Requirements: Genesis Framework

    Here are few features of this theme:-

    1. Gutenberg Ready
    2. Based on the latest Genesis Sample version 2.8.0
    3. Single Column, No Sidebar.
    4. 2-widgets Footer
    5. Featured Images Ready (Recommended size 1280×720)
    screenshot

    If you are a minimalist design lover, you should try this theme from the download link below.

    Download: WBXP10.ZIP

  • Install a Porkbun SSL on NGINX for WordPress

    ·

    Let’s Encrypt is a free SSL provider. Porkbun is very good domain registrar. We can download free SSL from porkbun dashboard. All we need is to upload it into our VPS server and need to add the path of the certificates into virtual host file.

    Download SSL from porkbun.
    You shall get a ZIP file containing the following 4 files:-

    1. domain.cert.pem
    2. intermediate.cert.pem
    3. private.key.pem
    4. public.key.pem

    Now Upload file no. 1 and 3 only (i.e. domain.cert.pem and private.key.pem) into your VPS home folder (i.e. /home/admin/).

    Create a Virtual Host for your domain (for example: wbxpress.net) as shown below:

    sudo nano /etc/nginx/sites-available/wbxpress.net.conf
    server {
    	server_name    wbxpress.com www.wbxpress.net;
    	root           /var/www/wbxpress;
    	index          index.html index.php;
    
    	location / {
    	  try_files $uri $uri/ /index.php?$args;
    	}
    
    	location ~* \.php$ {
    	  fastcgi_pass unix:/run/php/php7.2-fpm.sock;
    	  include         fastcgi_params;
    	  fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
    	  fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
    	}
    
    	listen 443 ssl http2;
    	listen [::]:443 ssl http2;
    	
    	ssl_certificate /home/admin/domain.cert.pem;
    	ssl_certificate_key /home/admin/private.key.pem;	
    }
    server {
    	if ($host = www.wbxpress.net) {
    	return 301 https://wbxpress.net$request_uri;
    	}
    	if ($host = wbxpress.net) {
    	return 301 https://wbxpress.net$request_uri;
    	}
    	listen 80;
    	listen [::]:80;
    	server_name wbxpress.net www.wbxpress.net;
    	return 404;
    }
    

    Also, we need to replace SSL settings as found from SSL Config File Generator at nginx.conf file.

    sudo nano /etc/nginx/nginx.conf
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS';
    ssl_prefer_server_ciphers on;
    

    The above configuration works perfectly well in our case.

  • Installing WordPress MU in LEMP stack

    ·

    WordPress MU is a feature in which we can run multiple wordpress sites using only a single wordpress installation. That means, the users, themes, plugins will be common, but the contents will be different for different sites. Lets consider, we install a wordpress which is accessible from this link:-

    http://example.com

    Now, if we enable WordPress MU feature then we can create the following different sites:-

    Option 1: Sites under Sub-Domain

    http://site1.example.com
    http://site2.example.com
    http://site3.example.com

    Option 2: Sites under Sub-Directory

    http://example.com/site1
    http://example.com/site2
    http://example.com/site3

    and so on.

    We can redirect all of the above links to different domain also using WordPress MU Domain Mapping plugin.

    How to activate WordPress MU feature?

    Step 1: To activate this feature in a regular wordpress site, add the following line into wp-config.php at the end.

    define( 'WP_ALLOW_MULTISITE', true );

    It will add additional entry into “Settings” tab of WordPress dashboard. Click “Network Setup“.

    Step 2: From “Network Setup” we will get a piece of code which is to be inserted into wp-config.php

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

    Step 3: In case you are using Apache server, then add the following into .htaccess

    RewriteEngine On
    RewriteBase /wordpress/
    RewriteRule ^index\.php$ - [L]
    
    # add a trailing slash to /wp-admin
    RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
    
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
    RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
    RewriteRule . index.php [L]
    

    If you are NginX, then edit /etc/nginx/sites-available/example.com.conf and add the following code into the configuration file:

    # Add trailing slash to */wp-admin requests.
    rewrite /wp-admin$ $scheme://$host$uri/ permanent;
    if (!-e $request_filename) {
    rewrite /wp-admin$ $scheme://$host$uri/ permanent;
    rewrite ^/[_0-9a-zA-Z-]+(/wp-.*) $1 last;
    rewrite ^/[_0-9a-zA-Z-]+(/.*\.php)$ $1 last;
    }
    

    Step 4: Now restart Nginx service and access your wordpress site. You can create as many sites you want from “My sites” -> “Network Admin” -> “Sites” -> “Add New”.

    Hope the above configuration is useful for installing WordPress MU successfully.

  • Proper File and Folder Permission for WordPress

    ·

    Check whether your wordpress installation have correct file and folder permission for proper functioning. Improper file permission may lead to file upload error, site update error etc. and it may also lead to security threats also. Let’s assume you have installed WordPress in /var/www/wbxpress, then you need to execute the following commands. Don’t worry these commands are applicable for both the web servers apache or nginx.

    Set Proper Ownership of the WordPress directory

    sudo chown -R www-data:www-data /var/www/wbxpress

    Set Proper File Permission

    sudo find /var/www/wbxpress -type d -exec chmod 755 {} \;

    Set Proper Folder Permission

    sudo find /var/www/wbxpress -type f -exec chmod 644 {} \;

    You can set file and folder permission from FTP also.

  • Host Multiple Sites with SSL in Ubuntu 18.04

    ·

    In this tutorial we shall share all the commands necessary to host multiple websites in a VPS server. We used VPS servers from Linode and Digital Ocean. Both are excellent and best value for money.

    This is a comprehensive guideline to host following domains:

    1. http://domain1.com
    2. http://www.domain2.com
    3. https://www.domain3.com
    4. https://domain4.com
    5. https://subdomain1.domain4.com
    6. https://www.subdomain2.domain4.com

    In the above examples 3, 4, 5 and 6 will use SSL provided by Let’s Encrypt for free.

    Proper redirection rules will also be applied. E.g.:

    1. http://www.domain1.com will be redirected to http://domain1.com
    2. http://domain2.com will be redirected to http://www.domain2.com
    3. https://domain3.com will be redirected to https://www.domain3.com
    4. https://www.domain4.com will be redirected to https://domain4.com
    5. https://www.subdomain1.domain4.com will be redirected to https://subdomain1.domain4.com
    6. https://subdomain2.domain4.com will be redirected to https://www.subdomain2.domain4.com

    All the above sites will be hosted in high performance secured web server named Nginx.

    We will also share WordPress specific configuration and optimization of the performance to achieve a very good score in GTMetrix. In addition to the fresh installation guide, we will also discuss how to transfer your websites from existing host to the newly created host of high performance.

    1. Initial Server Setup

    From the dash board of VPS the first thing is to install an operating system. We prefer Ubuntu 18.04LTS because it’s simple and easy to use. Copy the IP address of your VPS. Run Putty to login as root user to the IP address.

    1.1 Set Hostname

    Set a hostname for your VPS e.g. “supercomputer”. Execute the following commands:

    echo "supercomputer" > /etc/hostname
    hostname -F /etc/hostname
    nano /etc/hosts

    Add: IP address <space> supercomputer

    hostname

    will give output “supercomputer”.

    1.2 Set Timezone

    Execute:

    dpkg-reconfigure tzdata

    Check with:

    date

    It will show you current date and time.

    1.3 Create a Non-Root User

    Execute:

    adduser admin
    usermod -aG sudo admin

    1.4 Logout from Root

    Now logout from root account. Run putty again and login as admin.

    1.5 System Update

    Execute:

    sudo apt update
    sudo apt upgrade

    2. Secure Server

    2.1 Secure with SSH Key Pair

    Open puTTYgen from your own Windows PC.

    Generate a Public/Private key pair.

    Save Private key in your PC.

    Copy Public key.

    Login to the VPS using Putty as admin.

    Execute:

    mkdir .ssh
    sudo nano .ssh/authorized_keys

    Paste the copied public key into this file.
    Save and Exit.

    sudo chown -R admin:admin .ssh
    sudo chmod 700 .ssh
    sudo chmod 600 .ssh/authorized_keys
    sudo nano /etc/ssh/sshd_config

    Now disable root login by changing the following value:

    PasswordAuthentication no
    PermitRootLogin no

    Restart SSH

    sudo service ssh restart

    Now you can not login with root account or using password. You only need to the private key to login.

    2.2 Firewall Setup

    sudo ufw app list

    Output:
    Available applications:
    OpenSSH

    sudo ufw allow OpenSSH
    sudo ufw enable
    sudo ufw status

    Output:
    Status: active

    3. Install LEMP Stack

    3.1 Install Nginx

    sudo apt install nginx
    sudo nano /etc/nginx/nginx.conf

    Add: server_names_hash_bucket_size 128;

    3.2 Add Exception to Firewall

    sudo ufw app list
    sudo ufw allow 'Nginx Full'
    sudo ufw enable
    sudo ufw status

    3.3 Install MySQL

    Execute:

    sudo apt install mariadb-server php-mysql
    sudo mysql_secure_installation
    sudo mysql -u root -p
    CREATE DATABASE testdb;
    CREATE USER 'testuser' IDENTIFIED BY 'password';
    GRANT ALL PRIVILEGES ON testdb.* TO 'testuser';
    quit;

    3.4 Install PHP

    sudo apt install php-fpm php-mysql php-curl php-gd php-intl php-mbstring php-soap php-xml php-xmlrpc php-zip
    sudo systemctl restart php7.2-fpm

    3.5 Increase File Upload Limit

    sudo nano /etc/php/7.2/fpm/php.ini

    Change: post_max_size = 200M
    upload_max_filesize = 200M

    sudo nano /etc/nginx/nginx.conf

    Add: client_max_body_size 200m;

    sudo service php7.2-fpm restart
    sudo service nginx restart

    4. Host Multiple Websites

    4.1 Create directory and sub-directory for all the Domains and Sub-Domains

    Execute:

    sudo mkdir -p /var/www/html/domain1
    sudo mkdir -p /var/www/html/domain2
    sudo mkdir -p /var/www/html/domain3
    sudo mkdir -p /var/www/html/domain4
    sudo mkdir -p /var/www/html/domain4/subdomain1
    sudo mkdir -p /var/www/html/domain4/subdomain2

    4.2 Create Virtual Hosts

    Execute:

    sudo nano /etc/nginx/sites-available/domain1.com.conf

    Add:

    server {
        server_name    domain1.com www.domain1.com;
        root           /var/www/html/domain1;
        index          index.html index.php;
    
        location / {
          try_files $uri $uri/ /index.php?$args;
        }
    
        location ~* \.php$ {
          fastcgi_pass unix:/run/php/php7.2-fpm.sock;
          include         fastcgi_params;
          fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
          fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
        }
    }

    Execute:

    sudo nano /etc/nginx/sites-available/domain2.com.conf

    Add:

    server {
        server_name    www.domain2.com domain2.com;
        root           /var/www/html/domain2;
        index          index.html index.php;
    
        location / {
          try_files $uri $uri/ /index.php?$args;
        }
    
        location ~* \.php$ {
          fastcgi_pass unix:/run/php/php7.2-fpm.sock;
          include         fastcgi_params;
          fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
          fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
        }
    }

    Execute:

    sudo nano /etc/nginx/sites-available/domain3.com.conf

    Add:

    server {
        server_name    www.domain3.com domain3.com;
        root           /var/www/html/domain3;
        index          index.html index.php;
    
        location / {
          try_files $uri $uri/ /index.php?$args;
        }
    
        location ~* \.php$ {
          fastcgi_pass unix:/run/php/php7.2-fpm.sock;
          include         fastcgi_params;
          fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
          fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
        }
    }

    Execute:

    sudo nano /etc/nginx/sites-available/domain4.com.conf

    Add:

    server {
        server_name    domain4.com www.domain4.com;
        root           /var/www/html/domain4;
        index          index.html index.php;
    
        location / {
          try_files $uri $uri/ /index.php?$args;
        }
    
        location ~* \.php$ {
          fastcgi_pass unix:/run/php/php7.2-fpm.sock;
          include         fastcgi_params;
          fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
          fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
        }
    }

    Execute:

    sudo nano /etc/nginx/sites-available/subdomain1.domain4.com.conf

    Add:

    server {
        server_name    subdomain1.domain4.com www.subdomain1.domain4.com;
        root           /var/www/html/domain4/subdomain1;
        index          index.html index.php;
    
        location / {
          try_files $uri $uri/ /index.php?$args;
        }
    
        location ~* \.php$ {
          fastcgi_pass unix:/run/php/php7.2-fpm.sock;
          include         fastcgi_params;
          fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
          fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
        }
    	
        if ($host ~* ^www\.(.*)) {
          set $host_without_www $1;
          rewrite ^(.*) http://$host_without_www$1 permanent;
        }
    }

    Execute:

    sudo nano /etc/nginx/sites-available/subdomain2.domain4.com.conf

    Add:

    server {
        server_name    www.subdomain2.domain4.com subdomain2.domain4.com;
        root           /var/www/html/domain4/subdomain2;
        index          index.html index.php;
    
        location / {
          try_files $uri $uri/ /index.php?$args;
        }
    
        location ~* \.php$ {
          fastcgi_pass unix:/run/php/php7.2-fpm.sock;
          include         fastcgi_params;
          fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
          fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
        }
    }

    4.3 Enable Virtual Hosts

    Execute:

    sudo ln -s /etc/nginx/sites-available/domain1.com.conf /etc/nginx/sites-enabled
    sudo ln -s /etc/nginx/sites-available/domain2.com.conf /etc/nginx/sites-enabled
    sudo ln -s /etc/nginx/sites-available/domain3.com.conf /etc/nginx/sites-enabled
    sudo ln -s /etc/nginx/sites-available/domain4.com.conf /etc/nginx/sites-enabled
    sudo ln -s /etc/nginx/sites-available/subdomain1.domain4.com.conf /etc/nginx/sites-enabled
    sudo ln -s /etc/nginx/sites-available/subdomain2.domain4.com.conf /etc/nginx/sites-enabled
    sudo service nginx restart

    4.4 Check LEMP Working Status

    Our LEMP system (Linux, Nginx, MySQL, PHP) is now ready to rock. However, we should to cross check whether everything so far is good.
    Execute:

    sudo nano /var/www/html/domain1/test.php

    Add:


    You should get, “You have connected successfully.”

    Execute:

    sudo rm /var/www/html/domain1/test.php
    sudo mysql -u root -p
    show databases;
    use mysql;
    select user, host from mysql.user;
    delete from mysql.user where user='testuser';
    drop database testdb;
    exit;

    4.5 Delete Virtual Hosts

    Execute:

    sudo ls /etc/nginx/sites-enabled

    Check which vhost to delete and execute:

    sudo rm -f /etc/nginx/sites-enabled/default
    sudo rm -f /etc/nginx/sites-available/default
    sudo service nginx restart

    5. Install Let’s Encrypt SSL

    5.1 Create SSL Certificates

    sudo apt update && sudo apt upgrade
    sudo add-apt-repository ppa:certbot/certbot
    sudo apt update
    sudo apt install certbot python-certbot-nginx
    sudo ufw allow 80
    sudo certbot --nginx -d www.domain3.com -d domain3.com
    sudo certbot --nginx -d domain4.com -d www.domain4.com
    sudo certbot --nginx -d subdomain1.domain4.com -d www.subdomain1.domain4.com
    sudo certbot --nginx -d www.subdomain2.domain4.com -d subdomain2.domain4.com

    Check all existing SSL certificates.

    sudo ls /etc/letsencrypt/live

    To delete any of the above, Execute:

    sudo certbot delete

    5.2 Automatic Renewal of SSL Certificates

    Execute:

    sudo crontab -e

    Add At the end:

    15 3 * * * /usr/bin/certbot renew --quiet

    6. Few Additional Steps

    6.1 Leverage Browser Caching

    Execute:

    sudo nano /etc/nginx/sites-available/domain1.com.conf

    Inside the Server block, Add:

    location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        expires 7d;
    }

    6.2 Set Proper file and folder Permission

    Execute:

    sudo chown -R www-data:www-data /var/www/html
    sudo find /var/www/html -type d -exec chmod 775 {} \;
    sudo find /var/www/html -type f -exec chmod 664 {} \;

    6.3 Create Database for the Websites

    Execute:

    sudo mysql -u root -p
    show databases;
    CREATE DATABASE domain1 DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
    GRANT ALL ON domain1.* TO 'd1username'@'localhost' IDENTIFIED BY 'd1password';
    CREATE DATABASE domain2 DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
    GRANT ALL ON domain2.* TO 'd2username'@'localhost' IDENTIFIED BY 'd2password';
    CREATE DATABASE domain3 DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
    GRANT ALL ON domain3.* TO 'd3username'@'localhost' IDENTIFIED BY 'd3password';
    FLUSH PRIVILEGES;
    EXIT;

    6.4 Transfer Existing Sites from Old Host

    To Export database from Old host, Execute:

    mysqldump -u root -p databasename > dbname.sql

    To Export selected tables, Execute:

    mysqldump -u root -p databasename tablename1 tablename2 tablename3 > dbname.sql

    Copy files from Old host to New host:

    sudo scp -v -r admin@123.456.78.90:/home/admin/dbname.sql /home/admin/

    To Import database in New host, Execute:

    sudo mysql -u root -p newdbname < dbname.sql

    You may also need to copy old files from old host to new host. Execute:

    sudo scp -v -r admin@123.456.78.90:/var/www/domain1/* /var/www/html/domain1/

    If old host is secured with SSH key pair, then Execute:

    sudo nano /etc/ssh/sshd_config

    Change:

    PasswordAuthentication yes

    Execute:

    sudo service ssh restart

    6.5 WordPress Installation

    Execute:

    sudo wget https://wordpress.org/latest.zip
    sudo apt install unzip
    sudo unzip latest.zip
    sudo cp -R wordpress/* /var/www/html/domain1/
    sudo rm latest.zip
    sudo rm -rf wordpress
    cd /var/www/html
    chown -R www-data:www-data domain1

    6.6 MyBB Installation

    Execute:

    sudo wget https://resources.mybb.com/downloads/mybb_1817.zip
    sudo apt install unzip
    sudo unzip mybb_1817.zip
    sudo cp -R Upload/* /var/www/html/domain2/
    sudo rm mybb_1817.zip
    sudo rm -rf Upload
    sudo rm -rf Documentation

    6.7 Update DNS Settings

    Set DNS of all the domains point to the correct IP address. You need to add A/AAAA records pointing to the IP address of the VPS.

    That’s it. Hope you have successfully host websites in your own VPS. If you still have any query, you are free to ask. We surely get back to reply.