Add NGINX as NodeBB Proxy Server

Since you already have a domain name and server (droplet) ip point domain or subdomain to the IP address with A record. It will take a few minutes to a few hour to work. In the meantime we will configure Nginx.

In the previous page of the tutorial we have already NGINX and running. It should be running on port 80. Simply visit:

http://your-droplet-ip/

to see NGINX welcome page.

We also have running our forum on IP Address + Port 4567. Here we will only configure Nginx to serve as proxy server.

NGINX Configuration for NodeBB

To configure Nginx, first we will copy the default configuration file to a file name forums.example.com (or as per your domain). Simply replace all forums.example.com with your real sub/domain where you want to your NodeBB forum.

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/forums.example.com

now edit the forums.example.com file. Run

sudo nano /etc/nginx/sites-available/forums.example.com

the default server block in the configuration file will be like this:

server {
        listen 80 default_server;
        listen [::]:80 default_server ipv6only=on;

        root /usr/share/nginx/html;
        index index.html index.htm;

        # Make site accessible from http://localhost/
        server_name localhost;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
                # Uncomment to enable naxsi on this location
                # include /etc/nginx/naxsi.rules
        }

Modify it to something like this:

server {
        listen 80;
        #listen [::]:80 ipv6only=on;

        root /var/www/nodebb/forums;
        index index.html index.htm;

        # Make site accessible from http://localhost/
        server_name forums.example.com;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # try_files $uri $uri/ =404;
                # Uncomment to enable naxsi on this location
                # include /etc/nginx/naxsi.rules

		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header Host $http_host;
		proxy_set_header X-NginX-Proxy true;

		proxy_pass http://127.0.0.1:4567/;
		proxy_redirect off;

		# Socket.IO Support
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";

        }

Change you might notice:

  • removed listen default_server
  • commented out next line, it was for IPv6
  • root changed to /var/www/nodebb/forums
  • server_name changed to forums.example.com
  • commented out try_files declaratives
  • And added many lines in the location

Now we will create a symlink using following commands:

sudo ln -s /etc/nginx/sites-available/forums.example.com /etc/nginx/sites-enabled/forums.example.com

Now reload Nginx Config file with the help of following commands:

sudo service nginx reload

Configure NodeBB for Nginx

Once the Nginx is configured properly we have to make a few changes in NodeBB configuration file. To do so run

nano /var/www/nodebb/forums/config.json

and make a few changes:

{
    "url": "http://162.243.194.62:4567",
    "secret": "285530bc-ddc0-45d6-ae31-ea7cec4b9eb7",
    "database": "redis",
    "redis": {
        "host": "127.0.0.1",
        "port": "6379",
        "password": "",
        "database": "0"
    }
}

To

{
    "url": "http://forums.example.com",
    "secret": "2cdaec-x0xx-45d6-ae31-eaasccxxeb7",
    "bindaddress": "localhost",
    "port": "4567",
    "use_port":false,
    "database": "redis",
    "redis": {
        "host": "127.0.0.1",
        "port": "6379",
        "password": "",
        "database": "0"
    }
}

Notice the following lines:

  • "url": "http://forums.example.com",
  • "bindaddress": "localhost",
  • "port": "4567",
  • <"use_port":false,

Now restart NodeBB with following commands:

cd /var/www/nodebb/forums
./nodebb restart

By now your domain should have propagated. Try to visit your forum by typing forum address.

http://forums.example.com

in my case. What is yours? Join our forums and share yours.

Install NodeBB on DigitalOcean Cloud In 5 minutes

In today’s tutorial we will install NodeBB on DigitalOcean cloud in just 5 minutes. Yeah, It’s different but these days serverside Javascript software are trending. The reason behind is their ability to handle real-time communication with minimal effort and resources. JavaScript is, however, not my expertise but hey we do not need to learn about JavaScript. We will simply install  NodeBB on DigitalOcean with little effort.

install-nodebb
How to Install NodeBB on DigitalOcean

There is already some good article written about installing NodeBB on different environments. One of the easiest was from Andrew Rodrigues, co-founder of NodeBB, itself. But that seems to be old and there are many points which should be updated now. I will extend that article more or less. Feel free to inform me if anything needs attention.

*Disclaimer: That’s a referral link. But if you sign up DigitalOcean using my link then you will also get $10 credit. This credit will be enough for 2 months hosting.

Let’s install NodeBB in 5 Minutes

NodeBB, a forum software for instant interaction and real-time notifications, runs on server-side JavaScript program called NodeJS. The beauty of NodeJS is to handle thousands of concurrent users with a single process. It is incredibly fast but might be totally new for WordPress users.

Let’s install NodeBB on tiniest DigitalOcean server with 512Mb RAM. Even this droplet (the server) will be good to start. You can scale it anytime or as required.

Create Server and Initial Server Setup

Sign up DigitalOcean and create your first server. Here they call it a droplet. The droplet creation is pretty easy and the creation window look similar to the image below. Select

  1. Operating System – Ubuntu 14.04 (or later)
  2. Droplet Size – 512 MB (or more if you like. they will highlight 1GB droplet by default)
  3. Host Name – Something easy. Let’s consider alpha

You may leave all other options intact OR change as per your need.

DigitalOcean-Create-Droplet

DigitalOcean will send you an email with login credentials upon successful droplet creation. We will need these credentials to login to the droplet via SSH.

Log into Server

To log into your server we need a tiny software called PuTTY. It’s free and can be downloaded from here. (Simply download PuTTY for For Windows on Intel x86. It will work fine on any Windows OS. Linux and Apple users do not need PuTTY.

putty-login

PuTTY window looks like the screenshot above. Simply enter IP Address (as provided in DigitalOcean email), port 22 and select connection type SSH.

Once you hit open you will be connected and asked for login as. Enter root as your username and then password (the one you received in email).

login as: root
[email protected]'s password:

Once you successfully logged in you will be asked to change password for root. Enter current password and then new password twice. Even if the terminal do not ask to change the password, you may change it by entering following command for logged in user:

passwd

Create a user with sudo privilege:

Now, run the following commands to add a user of your choice. I have used bill for this tutorial. (Do not copy the # or $ sign from any of the following commands. Also do not change directory unless your are told to do so or you are sure about it.

adduser bill

You will be asked to enter a few details about username bill. Except password leave other options blank and hit enter. Once the user is created run the following command to give it superuser privilege.

adduser bill sudo

Now, logout with the command logout.

Install Dependencies and Prerequisites for NodeBB

Open a fresh PuTTY terminal and login with the user id bill (or yours, if you have created something else) and run the following command:

sudo apt-get update

It will update the packages but take a few seconds to complete. After completion run the following command various software and dependencies including git, nodejs, npm, redis-server and nginx.

sudo apt-get install git nodejs npm redis-server nginx build-essential imagemagick

It will take about a minute to install. Since Ubuntu has another package called node, we have to create symbolic link for nodejs. run the following command:

sudo ln -s `which nodejs` /usr/local/bin/node

Notice the backticks in the above command. It’s not single colon.

Install NodeBB on DigitalOcean

Now we have completed installing all the dependencies for NodeBB. So it’s time to install NodeBB but first create a directory for it. In the tutorial we will install our forum in a dedicated directory called forums. You may change it to what so ever to identify easily.

sudo mkdir -p /var/www/nodebb/forums

And Then

cd /var/www

Now, the prompt will be like this: [email protected]:/var/www$. It’s time to change the ownership of the directory to bill.

sudo chown -R bill:bill nodebb

If you have some other user name created change it accordingly. Now run

cd nodebb

It’s time clone NodeBB to the forums directory with following command

git clone git://github.com/NodeBB/NodeBB.git forums

Now move to the directory forums and install NodeBB. To do so run the following commands one by one:

cd forums
npm install

In the following command you will be asked for NodeBB configuration. Here we will only have to configure ip address and rest should be left blank. The IP address is same as your server ip, configure accordingly. The setup is like this. Later you will be asked for a Admin account, enter your desired login id and password to log into forum. Run

node app --setup

Once the setup is complete, run the following command to start the forum:

node app

At this level you might encounter similar error:

 15/12 01:50 [12503] - error: Your Redis version is not new enough to support NodeBB, please upgrade Redis to v2.8.9 or higher.
 [cluster] Child Process (12503) has exited (code: 0, signal: null)

To fix the above issue we have to upgrade redis to a later version. Add chris-lea/redis-server repository with following command. The repository is recommended by NodeBB itself.

sudo apt-add-repository ppa:chris-lea/redis-server

Now update repositories:

sudo apt-get update

and then install updated version of redis with the help of following command:

sudo apt-get install redis-server

Again run

node app

This time everything should be fine and we have successfully installed NodeBB on DigitalOcean. Your forum will be available on http://<droplet-ip=address>:4567

As you have seen it it really easy to install NodeBB on DigitalOcean droplet we will configure Nginx to act as NodeBB Proxy in the next post. If you face any issue leave a comment below or want to take a preview of a NodeBB forum on 512MB DigitalOcean droplet head to our forums. It’s pretty new and I would appreciate to leave a comment or join our forums.

In the Series:

  • How to Install NodeBB on DigitalOcean Cloud In 5 minutes ← You are here
  • Add NGINX Proxy to add your domain name. (Required)
  • Disable root login (Highly Recommended)
  • Change SSH Port (Highly Recommended)
  • Add firewall (Highly Recommended)

 

The right way to customize WordPress Themes!

You are not the only person who wants to customize your WordPress Theme. And there is no single way to tweak your site. There might be multiple ways to do the same thing. In this post we will discuss the right way to modify or customize WordPress theme.

What’s in the post?

Almost all Most commercial theme available outside the WordPress.org repository have inbuilt plugins and panel. They seem to be easiest way to customize your WP themes. But wait, there is a catch! They might not be the best option available. Or more precisely, they might be a theme lock. Let’s first take a look on the options we have.

You might hire a developer to do things with your site. But it might not be feasible with everyone or just not that complex to ping a developer. So if you are going to customize your theme then it’s better to understand the basics and the right way to do that.

Let’s first talk about the sexiest feature of your theme, the panel. In most premium commercial theme you will get one.

Theme Panel

This is an inbuilt feature of most premium theme. But sometimes you might get a panel as add-on plugin. These panels offer you a verity of customizations.

Significance of using inbuilt panel

  1. Easiest way to customize.
  2. No need to be a professional or even intermediate user. Everybody can work with it.
  3. Use plenty of options to tweak your theme and give it a new look.

Limitations:

  1. Possible Theme lock
  2. Limited functionality

Using a plugin

You might use a plugin, more precisely custom plugin, to customize your theme. You may literally do many things with your plugin.

Benefits of using a plugin to customize WordPress Themes:

  1. A plugin will definitely be helpful and give you more flexibility to customize your site
  2. It can work across your sites under multi-site WordPress install.
  3. No theme lock. Your customizations will be safe even after switching your theme.

Limitations:

  1. You should be aware of PHP/HTML/CSS or sometimes MySQL.
  2. Potentially break your site if you follow some random tutorials or hit and try with your live site.
  3. You will be responsible for what you are doing and sometimes it will be costlier if you damage your site and do not know how to recover it.

Indeed this is sometimes riskier to use a plugin or child theme but it is most recommended way to try these methods.

You may ask for help any time on WordPress Forums, Stack overflow, your theme support. If everything fails try some paid options like Theme Hybrid Club or even here in our forums. These will not be a guaranteed option but they provide pretty good support and put you in right direction.

Using a child theme for customizations:

This is the most precise option and literally all theme developers recommend this option for advance customization. Here are a few benefits and limitations of Child Themes:

Benefits of a child theme:

  1. Everybody recommends this.
  2. Good for advance theme customization
  3. Will keep your design intact even after parent theme updating.

Child Theme limitations:

  1. Basic knowledge of PHP/HTML/CSS will be required
  2. You might break your site if editing on live site.
  3. Support will be limited in many cases.

Deciding between Child Theme and Custom Plugin

Now you have seen all these options have their own good and bad. You might be confused now. Isn’t it? It’s time to crystal clear the ideas when should one use a plugin and when should a child theme.

  1. Decide whether your customization is a feature or design! If it is a feature go for custom plugin else a child theme. You could easily distinguish between a theme feature and plugin feature; just think about changing the theme in future if you don’t want to keep those elements with your next theme it would be better to add such customizations to a child theme. [This idea is for layman or absolute beginners. If you know WordPress a little bit you might like to check this link.]
  2. Features like Custom Post types, gallery, and portfolio belong to plugin territory. You should not use such feature unless you can port them out. Your theme developer who built the theme will tell you how to do that.
  3. According to Official WordPress theme makers’ documents favicons, advertising widgets, analytics are also a plugin feature and should belong to plugin.

When to use your Theme Panel?

Theme panels are very useful if you use it properly. Unfortunately, Theme developers occasionally violate certain rules and add plugin features to the theme panel. This is a theme lock (or trap). If you use these features you probably want to use their theme for your life. Never use such inbuilt feature unless there is an option port your data out.

The most common example of such feature is product rating.

It will be initially costlier to setup multiple plugin in terms of time and money. But it might be best option. Most popular plugins are well supported in (and outside) WordPress repository. Choose them.

I know many people would not support this idea but in long run it will be useful. If you have different opinions please do share.

Statutory Warning: Editing WordPress Theme may break your site!

How many smokers know “Cigarette smoking is injurious to health”? And, how many of them quit smoking after reading the quote. There might be a few but not in significant number. There is a similar situation here. People start editing themes and plugins on a live site and sometimes they mess things up and blame WordPress or luck. It is highly recommended to edit/test themes or plugins on test server or site. Do not edit a live theme. It may potentially break your WordPress installation. For the sake of goodness, please follow the following rules.

  1. Always edit themes or plugin on a test server or site.
  2. Do not hack WordPress core.
  3. Always debug edited theme or plugin before uploading to live website.
  4. Test compatibility with other plugins you already have installed on your site.
  5. Always backup your site before activating your plugin or theme.

If you follow these rules you probably enjoy your blogging life.

Getting started with WordPress Theme customizations

Once you understand be theme territory and plugin territory you will easily get started with customizing your site. You should also aware about theme panel features and theme trap.

Customize WordPress Theme using a plugin

A custom plugin will give you enormous power to hack many things you may download this sample plugin and get started with adding codes to it. Forking the plugin on Github will be better if you have some spare time and want to track every change made. I will discuss how to do that someday.

Here are a few lines of code every plugin should have. As you see these lines give you, and WordPress, an idea about theme name, author name and URL, version and some other information.

You may edit/test and then upload the plugin to your site for safe customizations. Depending upon your theme there might be limitations to modify your theme. But hey, we may use child theme for editing and adding templates.

Customize WordPress theme using a child theme

Child theme is the best possible way to customize your theme. As the name suggest child theme needs a parent theme to work. Yes, the relation is also called parent-child theme. You may also have a grandchild theme. But it will be discussed later.

Like plugins a child theme also need some essential files and some codes to get started. I have created a sample child theme for Twenty Twelve, which you could use to understand the mechanism of the child theme.

Apart from the general information notice the 7th line template: twentytwelve. This line is required to define the parent theme. The word twentytwelveshould be your real theme slug. This is case sensitive.

Read official doc more about creating a child theme.

How to make WordPress Print Friendly

Offering print friendly version of blog posts not only gives an extra feature but also helps your user to keep their loved article. By default, no WordPress theme offers such feature. This is due to conflicts with plugin and customizations. There is some 3rd party service which offers good features but that could not be solution for many.

Print Friendly WordPress with small plugin we build will do some simple magic. When user will hit Ctrl+P or any other way to take print the browser will automatically hide all unnecessary elements from prints and print previews e.g. header, sidebars, widgets and footers.

In this post we will add this cool feature to a Genesis Framework based site and a Standard WordPress theme i.e. Twenty Fourteen. Once you understand the approach you will able to customize it for any WordPress site. This will be fun for beginners and I am already here to help you.

Prerequisite: Basic knowledge of html and CSS is required.

What will we need?

We will need three things and I am pretty sure you already have first two.

  1. Google Chrome or Mozilla Firefox. Firebug extension could also be used if you are familiar with it.
  2. File compressor software like WinZip, WinRAR or anything which compress our files to zip.
  3. The starter plugin we have made. Download the zip file or fork it on GitHub.

Note: The plugin is not available on WordPress.org.

Let’s begin with some coding

Hey, I know you might not a web developer. But it will be easy and fun.

Uncompressed the starter plugin you just downloaded and un-compress it. The all we need to edit print.css. By default I have added some basic codes which work with Genesis Theme, Twenty Fourteen and many other untested themes.

While editing the file our goal will be to remove all elements which we don’t want to print. That should be sidebars, footer widgets, footer and sometimes header. Post Meta like author info, comment counts, category and tags also have no meaning for prints.

How to find html elements?

Use Ctrl+Shift+I on Chrome or Firefox to activate Developer Tools pane. After that find the element by hovering the code will highlight the element you have to find.

If you are not familiar with Chrome or Firefox extension tools read this articles:

How to edit print stylesheet?

To hide some element use display: none;

Suppose we want to hide header and footer div. If the div id is #header and for footer #footer the code will be something like:

#header,
#footer {
    display: none;
 }

If the header id is #site-header then you should use #site-header instead of #header.

Further, we might like adjust width and margin for paragraphs, quotes, list styles, tables. I have already added some codes for that which should work fine.

The important thing you should consider editing is line 168. You should change the URL to your site and any disclaimer or notice you want to add.

Important: The print.css file will highly depend upon your site structure and theme/plugins. This will be your home work to identify all the unwanted elements, divs and spans.

Tips: You should also use !important with your CSS.

Compress and upload

Once you are sure that you have made all necessary changes to the CSS file then you should save the file and zip the folder using any compressor. Here you should keep the file structure same as you have downloaded.

Now upload the plugin to your WordPress site and activate it.

Tip: You may also upload the sample plugin I made and then customize the css file using WordPress built-in plugin editor page. The choice is yours.

If you have any problem please consider leaving a comment below or tweet to @BlogSynthesis.

How to install WordPress on Localhost

I am sure at some point of WordPress Blogging you would like to install WordPress on localhost or your PC. This is perfectly good to make your small improvements or changes without looking for some wordpress developers. Installing WordPress locally (or localhost) is the foolproof way to make and test changes. Today we will discuss how to install WordPress on your Windows based PC or Laptop.

What we gonna need to install WordPress on our localhost?

If you see the requirements for WordPress. I am sure you have seen that we need basically a web-server (like Apache or Nginx) with a database (like MySQL) and of course PHP5.

So here is the list:

  • A Windows OS PC (Preferred, Windows 7 or later)
  • A Webserver like Apache
  • A Database Server like MySQL
  • PHP 5.3 or later
  • A text editor like Notepad or Notepad++ (Don’t use document editors like WordPad or MS Word)

The tricky thing:

The trick here is to install the whole bunch of software at once. XAMPP will do all the magic we want. This will easily install and configure Apache, MySQL and PHP at once. There are a few more things in XAMPP installation file. But, we do not need them here.

TIP: Download XAMPP having highest version number. e.g. if XAMPP 1.8.2 and 1.8.3 both available, then download 1.8.3.

XAMPP is a cross-platform software and also available for Linux and OS X. But right now I will demonstrate on on Win7 PC.

Step 1: Prepare your server

a) Download and Install XAMPP: Download XAMPP from ApacheFriends (the official site) and install to your system. I would recommend you to install the latest available version. The process will be simple.

b) Turn on your local server: Turn on Apache Webserver and MySQL Database server from XAMPP.

XAMPP Control Panel

  • To start servers go to Start >> XAMPP Control Panel >> Hit “Start” button in front of “Apache” and “MySQL”. Once the servers start you a green background with PIDs and Port Info will appear (like the screenshot below)You may check your server status by visiting http://localhost/ or http://127.0.0.1/.

c) Create Database: Now we will have to create a MySQL database for WordPress. You may use the PHPMyAdmin to do it graphically. Simply visit http://localhost/phpmyadmin/ from your browser.

Your login credentials will be :
Username: root
Password: password

Creating Database adding users to it is pretty easy. Pretty easy and you may create one your WordPress installation. (If you stuck somewhere read this post)

Create DB

  • Give your Database a name. E.g. my_demo_site1
  • Change Collation to utf8_general_ci

phpmyadmin-add-user

  • Find the database on left panel and click it, Now click “Privilege” on the top navigation.
  • You will find a “add user” link. Create your user by giving it a username, password (here the Host should be localhost). Don’t make any thing else on the following section. Just scroll down to right-bottom and click “Go”

phpMyAdmin user creds

Step 2: WordPress Installation

a) Download and move wordpress files to correct directory: Download the latest version of WordPress and place the unzipped/uncompressed files to the directory htdocs (you will find htdocs in XAMPP installation directory.

If you put the wordpress files in a directory called wordpress in htdocs then your wordpress site url will be http://localhost/wordpress/ (by default).

WordPress Installation: I am pretty sure that you already knew about WordPress installation. If you are familiar with famous 5 minutes installation of WordPress then you may go ahead and start doing yourself.

If you don’t remember then you may install wordpress by simply visiting your wordpress site. (Since WordPress is not configured you will land on default Configuration/Installation page.)

In this case http://localhost/wordpress/

  • Click “Create the configuration file” button
  • Click “Lets Go” button on the next page.
  • On this page you will be asked for the following information:
    • Database Name
    • Username
    • Password
    • Database host
    • Table Prefix
  • Fill the above information according your database and username you created earlier. For me (as I shown in the demo) the information will be like this:
    • Database Name: my_example_db
    • Username: my_username
    • Password: 4aqaQtc9s2pR8yyB
    • Database host: localhost <– This will not change in your case too.
    • Table Prefix: random1390_ <– All anything alphanumeric with ending underscore sign
  • If everything gone right (actually, wordpress verifies database credential and preinstall checks) then on the next page you will be asked for the following information:
    • Site Title
    • Username (use anything other than admin just for good habit)
    • Password (twice)
    • Your Email
  • Now hit “Install WordPress”. If everything gone right (and I am pretty sure it will) you will get “Success” message.
  • Congratulations, Your WordPress is now installed on localhost and you may now login.

Check this video if anything unclear in installing WordPress. You may also leave a comment below for any help.

3 Steps To Get Yandex Mail For Your Domain With 1000 Users

Sometimes 10, 20 or 50 email accounts might not be enough for your company or organisation. But even then you might not want to invest on email hosting and increase your budget on IT. In this condition Yandex Mails for domains could be a solution.

Definitely many people do not want to rely Russian or Chinese services for some reasons. I will not in the situation to comment on that. So, This post will not be interesting for such people. If your organization is small or need not more than 25 email accounts, I will recommend Zoho Mail service. Using your own web hosting service could be an option but it will have some risk (which i will discuss some other time).

Yandex is 4th largest search engine of the world. It is most popular email and search engine provider in Russia. Its email service is reliable. If you want a complete free solution for more than hundreds or thousands accounts then this could, possibly, be the best solution.

However, the signup process is actually in Russian but using Google Translate you can easily do all the steps in your preferred language. Try Google Chrome for best experience. [After completing all of the following steps you will be able to change your language to English or other 10 languages.]

Step 1:

Visit https://pdd.yandex.ru/domains_add/ and add your domain name.step1Yandex will ask you to login (or signup) for a free @yandex.ru email id. At this level you will need to verify your mobile number (otherwise, you will have to solve captcha in Russian).

Verify your mobile number and proceed the signup process. It will be simply filling your first and last name, desired (available) username, password (twice), security qa. like this. [You may also use Facebook, Twitter, Google or VK single sign-in for this purpose. But prefered not to use it.]

Step 2:

Verify domain name: You may verify domain ownership either by uploading an html file OR by adding a CNAME record. Here is a screenshot.

  1. Add CNAME record:
    I prefer this method. Simply add a cname record and wait until it propagates. It will take a few minutes to few hours.
  2. OR, Upload HTML file:
    It will be instant if you opt to upload a file to your root domain.

Here, you should not change your DNS as they suggested to change. Simply add the CNAME or Upload the file for domain verification.

Step 3:

Add MX record and create your first email account.

Name Type of record Priority Host
@ MX 10 mx.yandex.ru.

Note: if @ is invalid then try your naked domain. e.g. example.com (not www.example.com).

Optional (but recommended)

Add SPF record:

Name Type of record Host
@ TXT v = spf1 redirect = _spf.yandex.ru

Step 4:

Once you will verify your domain and setup MX records they will ask you to create a new email account with a password. step3a

 

On first sign in users will have to accept T&C and fill some simple information. Once you logged in to your account, you may change your preferred language from Russian to English. You will find a flag icon on the bottom-right of the mailbox you just signed in.

Benefits over other providers:

  • Yandex is most popular site in Russia and holds 10 millions email accounts. Otherwise some personal preference the service is reliable and secure.
  • You will instantly get 1000 free accounts for your business.
  • You may also offer open registration for anyone from the public or your visitors, like Microsoft once did.

What might be not interesting:

  • Since this site is a Russian LLC, so you will be bounded by the law of the Russian Federation.

FYI, Yandex is listed on Nasdaq and you may track all news about this company on techcrunch also.

For such users I will recommend you to use your existing web hosting (it will be free for most of us) or paid email hosting like Google Apps or Microsoft Office 365.

If you have any problem in configuring your server or domain setup, leave a comment below. You may also refer to your domain host or registrar guide for help.

How to Setup Zoho Free Email Hosting (Google Apps & Outlook Custom Domain alternative)

After shuttering Microsoft Outlook for Custom Domain there only a few options remaining for free email hosting. One of the most reliable option is Zoho Mail. This service is provided by Zoho and already been featured on various top blogs and news sites. However, Zoho do not provide as much as features as Outlook and Google Apps provided but it has some unique features also which can’t be expected in a free email hosting solution for personal and small business. One of the key feature is Ad free interface. The storage for free accounts are just 5GB/user but they do provide POP3/IMAP support. So if the space is not enough for you then you may send and receive emails from other services like GMail, Outlook or Yahoo mail. Initially, free signups comes with 5 free accounts (if you have a domain). Which can be further increased to 20 by inviting 3 business signups. With each successful invites 5 accounts will be added for lifetime.

Previously, Microsoft Outlook for custom domain was top in providing free email hosting since November 2005. But Microsoft shutter the service to promote Office365, which is a paid service. I had wrote about setting up Outlook Custom Domain but since the free option is no longer available people started asking me about hidden tricks to get it for free. Frankly, this is not possible to signup for free email hosting at Outlook for new domains. Not only this but if you already have active service then soon you will not be able to add more users to those domains.

Since the two biggest players, including Google Apps for free and Microsoft custom domain, ended the free email hosting for domains. So, what are the options? I have discussed this in my previous post. The only most reliable service, as available now, is Zoho Mail. And in this post I will share how to setup Zoho mail for free email hosting.

Setup Zoho Mail for free email hosting

It’s really easy to setup up for free Zoho mail for your domain. You can do this by yourself. For any clarification or help ping me in forums or on social media.

1. Choose Plan:
Visit ZohoMail Pricing page and choose “Free” option. You may also choose your preferred currency. [At Zoho Free plan is also called “Lite Plan”.] Hit the “Signup” button to get started.

Zoho Mail Pricing Chart
Zoho Mail Pricing Table

2. Add Your Domain
Now, You have to provide your domain name. Unlike Google Apps you must have a domain name. Fill your domain name and hit “Add domain”. If you opt any paid plan you may buy a domain from Zoho also, right below the following form:

 

Note: You would not be able to add more domains to your free account.

3. Signup an Account
On the next page you will have to create your first account and verify your existing contact email address. This contact email is required to activate your account and reset your admin password, in case you forget in future. Check the image below.

Create admin account
Now, add information about the admin or webmaster of the businnes

This will be another simple form asking for name, email, username for your custom domain, and password for that. Once you satisfy click on signup.

On the next page you will be asked verify your domain. Also an email will reach to your email address. Verify the email id by clicking the unique link. Meantime, do not close the signup previous “congratulation” page.

4. Verify your E-Mail Id
Go to your email account and verify your email account.

verify email
Zoho email id verification mail

5. Verify your domain

zoho-mail-verify-domain
Now click the “Proceed to verify domain ownership” link. If you can’t to see this page, go to mail.zoho.com and hit “Access Mail” a red button on the top-right of the page. on the next page there will be a link.

Choose CNAME method to verify your domain ownership.

On this page, you will also have DNS provider specific guide. You may select the option using dropdown. At the time of writing this tutorial Godaddy, 1 and 1, Enom, Euro DNS, WordPress, cPanel, Bluehost, Open SRS – Squarespace, Network Solutions, Name.com and Register.com were in the list.

 

Domain Verification Options
Here comes the tough part (not really :P). If you have done this before then you will easily configure it. Else, proceed with caution. There are three ways to verify your domain.

  1. Add CNAME record
  2. Add a TXT record
  3. Upload an html file.

The first two options will take time. It may takes a few hours ( but sometimes take up to 48hrs or sometimes more). The third option will be instant. But you will probably need a web hosting and know how to upload the file to the root directory of the domain.

Depending on your condition choose an option. Don’t forget there is a small dropdown for help. If your DNS provider is listed there then you may check the help article, in case you need.

If you stuck at any point or unable to configure Zoho mail. Join our forum and start a fresh topic. I will help you to configure. If you are out of time or these things complex then you may hire me to do all these things.

However, I will choose the first method to show you how to do that.

7. Verify domain using CNAME (under cPanel)

Domain Setup

The domain I added is hosted on HostGator and the DNS (hostgator provides) is also managed from the cPanel.

I have simply signed in to HostGator cPanel and hit the “Advanced DNS Zone Editor”. You will find this option under “Domains” section. Select the domain from drop-down menu and fill the details as zoho asked you to do so. [Check the image below and above one. See how I added]

cPanel add cname
Create CNAME under cPanel DNS manager

Now add the CNAME. Now we will have to wait for a few hours.

After sometime, go to the same page (zoho domain verification) and hit “Verify” button. Once, the account is verified you will see a message saying “You have successfully verified ownership of gplthemes.org. Enter a username below to create your administrator email account:” Your first account will be prefilled. Simply check for any typo and proceed to setup MX records.

Set MX record to send and receive Emails from custom domain

Now hit “Next” > “Next” a page saying “Change MX record”. Read the page carefully. You will be asked to setup MX record. If I am not wrong then the MX record should be same (or at least similar) as below:

MX Records
Zoho mail MX records. You will need to add these records to your domain.

Again if you are using cPanel then find and click “MX Entry” under “Mail” section as shown below.

HostGator.com Control Panel
Mail setup options under cPanel

1. Now add the 2 MX records one by one.
2. Change the “Email Routing” to “Remote Mail Exchanger”
3. Make sure to delete any default entry if there is any.

cPanel X4
MX Records setup under cPanel

Now you have completed the setup for Email Hosting.

Remember, like CNAME we added earlier, it will take up to 48 hrs. (or sometimes more) to work.

If you want to receive emails in your Outlook, Gmail, Yahoo or Mobile devices then the following details you will need. For any Configuration related problem visit forums.

POP and SMTP settings for Zoho mail
Incoming Server Settings:

Incoming Server Name: pop.zoho.com
Port: 995
Require SSL: Yes

Outgoing Server Settings:

Outgoing Server Name: smtp.zoho.com
Port: 465
Require SSL: Yes
Require Authentication: Yes

How to Track WordPress Login, Register and Dashboard Activity with Google Analytics

If you have a multi-author blog or a forum or some membership site based on WordPress. Then, you might like to add Google Analytics to WordPress Login, Register or even dashboard. It will help you to understand better about your users’ requirement and help you to how they are using your site.

Google Analytics on WordPress

Another good thing about this article is there is no need of any plugin. And we can easily add Google Analytics to WordPress Login and Register pages or even WordPress Dashboard. Now proceed to next.

If you are using a site specific plugin then add the following code to the plugin else add these codes to your active theme (or child theme) functions file. If you are absolute beginner then you may locate these files here.

Go to WordPress Dashboard –> Appearance –> Editor –> Theme Functions (functions.php)

Add Google Analytics code to WordPress login and register page

This is really easy, simply copy the following code and replace the line <!-- Your Analytics Code Here --> with your actual Google analytics tracking code.

add_action( 'login_head', 'synt_ga_login_page');
function synt_ga_login_page() { ?>
    <!-- Your Analytics Code Here -->
<?php }

This will add your analytics code to WordPress login, register and forget password page.

Track WordPress Dashboard with Google Analytics

Also, If you want to track WordPress Dashboard activities then add the following code.

add_action( 'admin_head', 'synth_admin_head_script' );
function synth_admin_head_script() {
  if ( !is_super_admin() || !is_admin() ) { ?>
    <!-- Your Analytics Code Here -->
 <?php } }

As you see, there is a if condition in the code snippet. If will filter super admins and admin of your WordPress. You may also customize users based on their roles and capabilities.

If you are going to make any change in the above code (other than adding google analytics code) then test your code on a test server. Otherwise, it may potentially break your site.

If you have any problem or have any suggestion leave a comment below. If you liked this article, please share with your friends.

How to add Google Analytics to WordPress sites

GoogleAnalytics

Google Analytics is a fabulous analytics tool enabled on more than 10 million websites across the globe. Here we will add Google Analytics to WordPress site. Obviously, we will need a Google Account first. Here I will skip this because most of us already have a GMail or Adsense Account or even an account associated to Android Phone. So going to straight to Google Analytics Sign up page.

Important: If you do not have Google account and Google is forcing you to create an email id. Then you may directly go to google.com/analytics and start signup process for Google Analytics with your existing email address. You may also use your Google Apps account to sign up Analytics.

Sign Up Google Analytics Account:

Once you have logged in to Google Account you may sign up Google Analytics account. The Analytics signup page will be something like this. Add account name, site name, website url, industry category and time-zone for your reporting. Don’t worry about any discrepancy, you may change all these information later.

GA-setup

After filling the information required proceed to accept terms of the services and sign up. If everything goes right you will get your tracking code and Google Analytics account instantly. Your Analytics account id will be something like “UA-47713692-1” and some JavaScript code something like below. Some WordPress themes including thesis theme framework have built-in functionality where we have to enter the tracking id only. For rest of the themes we will need the entire script.

ga-tracking-code

Adding Google Analytics code to WordPress site:

Once we have Google Analytics code we will now add this tracking code to the WordPress site. There are a few approaches to do that.

  1. Add the code using wp_head or wp_footer hook.
  2. Directly add the code to theme file (by modifying header.php or footer.php)
  3. Using a plugin or theme feature

Add the code using wp_head or wp_footer hook.

You may add a few lines of code to theme’s functions.php  file.

/**
* How to add Google Analytics to WordPress by @_Anand_Kumar
* Tutorial link http://blogsynthesis.com/?p=1435
**/
add_action( 'wp_head', 'synth_google_analytics');
function synth_google_analytics() { ?>
<!-- REPLACE THIS LINE WITH GOOGLE ANALYTICS CODE -->
<?php }

Do not forget to replace <!-- REPLACE THIS LINE WITH GOOGLE ANALYTICS CODE --> with your actual Google analytics code.

That’s all. Your WordPress site will, now, be tracked by Google Analytics.

Directly add the code to theme file (by modifying header.php or footer.php)

You may copy and place the obtained code to header.php file. Here, we will have to find the closing head tag ie </head>. Once you find the code place the Analytics code just above it.

This method is do not works will all themes because many themes do not have header.php or the theme developer do not suggest to modify the code directly to theme file.

Add Google Analytics to WordPress using theme feature / option.

A lot of themes (including Genesis, Thesis) have options to hook some code to header and/or footer. You may use this feature. This is one of the easy (and safe) way to add scripts to your sites.

  • Genesis user may add the code to “Header and Footer script” under Genesis Setting menu.
  • Thesis 2 user may navigate to Thesis >> Site >> Google Analytics (just place the id, which will be like UA-123456-1. See the highlighted image 2) OR add the whole tracking code under Thesis >> Site >> Tracking Script.
  • There are a few plugin who offers some features add the code at ease.

Now if you might ask which method I prefer! Frankly I will prefer either method one or three (if my theme has such feature.)

Here are a few reasons behind it.

  • Using a plugin for everything sucks. It will slow down the speed of your site and ultimately provide bad user experience.
  • If the theme has such functionality then we may add a number of scripts using just one hook.
  • Modifying Theme file will be hard to maintain at some point in future.
  • An intermediate (or even you) may opt for a site specific plugin. This will be best option to add cross theme functionally. Here you may find more information about site specific plugin. Note: Any of the above three method will be enough for this purpose.
  • I like adding the Google Analytics code to WordPress Head because it provides more accurate analytics. While some blogger add the code at the end of the body tag. Read this article for details.

I this article helped you don’t forget to share with your friends. Your every tweet, fb like or +1 will help this site grow. So, help us if you liked. If you have any problem or suggestion leave a comment below.

How to Create Google Chrome App in Less Than 5 Minutes

With Google Chrome, a lot of things are very easy to do. One of them is creating your own app. Yes, we can create an app in less than 5 minutes. (Considering an image icon of 128×128 px is ready to use).

Prerequisites:

  • A credit card for $5 setup fee (Google will charge it for first time).
  • Google Chrome.
  • Your site or blog is added and verified to Google Webmaster Tools
  • App icon with 128x128px in dimension.
  • Screenshot of your site in 1280x800px or 640x400px
  • App image of 440x280px
  • Google Analytics ID (UA-XXXXXX-YY) (Optional)

Google Chrome App Creation:

Create a manifest.json file

Open a text editor (like Windows Notepad) and write the following code and make necessary changes:

{
	 "name": "NetRival - Technology Blog",
	 "short_name": "NetRival",
	 "description": "NetRival is a Blog Focused on Personal Technology, How-to Tutorials, Gadgets and Telecom",
	 "version": "0.1",
	 "manifest_version": 2,
	 "icons": {
		 "128": "icon_128.png"
		 },
		 "app": {
		 "urls": [
			 "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app"
			 ],
		 "launch": {
			 "web_url": "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app"
			 }
		 }
 }

Change name, short_name (upto 12 characters), add some description and the urls. Now rename your image as icon_128.png. Create a new directory and place both manifest.json and the icon in it. Now using any compression tool zip the directory.  (We will need this zipped this file later)

Load the created app in Google Chrome:

Open chrome browser and visit chrome://extensions/ then make sure the checkbox named “Developer mode” is checked. You will find it on the top-right of the page (as shown in the image below).

Now “Load unpacked extension” by browsing the directory. Note: Here we don’t have to load a file. Just browsing the directory where the icon and the manifest.json file stored. Google Chrome will automatically load the manifest.json file from that directory. as shown below. In my case the directory was E:\NetRival_Chrome_App (See the highlighted area of the screenshot)

temp-chrome-app

Verify the newly created Chrome Extension:

The plugin should now work. To verify it visit chrome://apps/ (See the screenshot below. If you will click on it. It will open your site or blog.)

verify-check-app

Submit Google Chrome Extension to Official directory.

We will now submit the app to Google Chrome Store so anybody in the world can download it. We have to upload the manifest.json and png in a zipped file (as we have compressed earlier). But first of all we have to pay $5 registration charge to access Google Chrome Developer console. (This $5 charge will allow you submit up to 20 chrome apps and extensions, excluding themes)

Visit https://chrome.google.com/webstore/developer/dashboard and pay the $5 fee. After successful payment hit “Add New Item” and upload the zipped file.

After uploading we have fill some details and add screenshots. You may take the following image as example. Here the screenshots and other images must be in the size mentioned.

chrome-dev-dashboard

 

You may use Google Analytics to track traffic to the Chrome App in the store. Just fill the id and its done for preview. Here, It is recommended to use different GA id than your blog. Now hit “Preview” button at the bottom-right and test-drive how your app looks in Google Chrome Store. Once you are satisfied hit publish button, and you are done.

These demo link and readymade zipped file link will help you. Go ahead and create a Google Chrome app in just minutes. Good Luck!

Demo: https://bitly.com/NetRivalChromeApp
Demo Files: Download Here