Satish Satyarthi

Tag: WordPress

Free Cloudflare CDN – Latest Setup for WordPress (2021)

Two most important requirements of a good website are – Speed and Security. A fast loading website not only pleases the users but also Google Search. Reducing the page loading time of your site is one of the first steps to boost the SEO. A layer of security to protect your site from spam traffic bots and attacks reduces the load to your server thus increasing the speed and also keeps your site safe.

There are a number of good CDN services that provide these features but most of them are very expensive. If you are earning a good amount of money from your site, you may consider investing in a premium CDN but until that Cloudflare is the best solution that you can have. Cloudflare is one the most popular CDN (Content Delivery Network) services used by websites to boost their performance and security.

Why use Cloudflare and how come it is free?

Cloudflare works like a buffer space between your site and users. It has a number of web servers at strategic locations around the globe and your site is cached on these servers. The users are served the site content directly from the closest Cloudflare servers instead of your web host. Cloudflare not only boosts your site speed and provide security from spam traffic and brute attacks but also gives you free SSL and a lot more other useful features. And all this is FREE. It sounds too good to be true, right? Cloudflare also provides paid services, which give you some extra premium features. These services are used by big enterprises and corporates and that’s how Cloudflare makes money. And the hundreds of thousands of its free users give it free publicity. So, it’s a win-win situation for both Cloudflare and its users.

How to Setup Free Cloudflare for your WordPress Website

Some of the web hosts like Hostgator and Bluehost provide Cloudflare installation right inside their cPanel. You just have to click the Cloudflare button, select the domain and the traffic to your site will be routed through Coudflare. But if your host doesn’t offer Cloudflare installation inside cPanel, you can easily do it manually. In fact I prefer doing it manually as it gives me more control over things. Also if I decide to change my host in future, it won’t affect my Cloudflare setup.

Step 1 – Create a New Account on Cloudflare

First, you need to visit https://www.cloudflare.comand sign up for a new account.

Step 2 – Adding Your Website Domain to Cloudflare

You will have to enter your domain name and click on Begin Scan button. Then, Cloudflare will scan the DNS records of your website.

This can take a few minutes.

Step 3 – Verifying DNS Records

After the scanning is complete, Cloudflare will show you all the DNS records it retrieved from your domain registrar or web host. In most of the cases, you do not to change anything hereas Cloudflare selects the optimum setting by default. But make sure that DNS records of your domain root and its www version have orange clouds in front of them. Orange cloud means that the traffic to those DNS records (or subdomains) will be rerouted through Cloudflare servers. Grey clouds mean that those DNS records will bypass Cloudflare and will connect to your host directly.

Step 4 – Selecting a Cloudflare Plan

After verifying the DNS records of your WordPress website, you will have to chose a Cloudflare membership plan. We will obviously choose the Free plan.

Step 5 – Pointing Domain Nameservers to Coudflare

Now almost everything is setup on Cloudflare end and it’s ready to be connected to your domain. But your domain nameservers are still pointing to your host servers. You need to go to the settings of your domain registrar and change the nameservers to the ones given by Cloudflare.

Step 6 – Wait for the Nameserver Change to Complete

Now you just have to wait for the nameserver change to be completed. They say that it may take upto 24 hours for the DNS to be propagated but in most of the cases it’s completed in less than 1-2 hours. Until then Cloudflare will show your website as pending. But it doesn’t mean your site will be down. Your site will continue to be served from your host. After the new nameservers are propagated your site domain will show as Active.

You are done now! It’s almost a set and forget kind of setup. But if you want to achieve a little more with Cloudflare there are few more things that you may like to know.

The Cloudflare Dashboard

This is the dashboard that you will see after you login to your Cloudflare account. I would let you know some more useful features that are hidden inside these tabbed icons.

Overview

There are two major functions hidden in the Overview section. When you click the ‘Advanced’ button – Pause and Delete. Use the Delete button when you want to simply remove Cloudflare from your site (in fact your site from Cloudflare). If you do so, remember to point your nameservers back to your host.

Pause button can be used to temporarily bypass Cloudflare servers and route the traffic directly to your host server. It is useful in cased when you are changing some settings in Cloudflare or messed up with some setting and working to rectify it.

Analytics

Analytics tab shows you stats of your site visiters, page views, threats, saved bandwidth etc.

DNS

Here you can see all the DNS records. In case you want to use Cloudflare on a subdomain of your site, this is here you will need to make some changes.

Crypto

One of the most useful and popular features of Cloudflare is Free SSL. SSL gives you that Green lock and Https:// in the URL tab when your site is loaded. SSL not only gives a sense of security to your site users but also boosts your SEO as Google has clearly said it will favour sites with SSL. By default this feature is off. I will show how to setup Free Cloudflare SSL on your WordPress site in a separate post. Until then leave everything as default.

Firewall

In this tab you can change the security settings of Cloudflare. By default the security level is Medium which is optimum for most sites. If change it to high it may show irritating captcha (ever saw those ‘select image pieces with trees or cars or store fronts to prove you are not a robot’ on sites?) to even some genuine users.

Recommended settings:

Rate Limiting– I haven’t enabled it.

Security Level– Medium

Challenge Passage– Leave as default

Access Rules– You block an IP (or even all IPs from a country) from accessing your site or you can whitelist an IP (like your home or office IP) so that it doesn’t go through the security firewall.

Speed

Here you can make some changes to boost the speed and performance of your website by minifying different code elements of your site. make sure that Auto Minify is turned on for Javascript, CSS and HTML here.

Recommended settings:

Enable Accelerated Mobile Links– I have kept it OFF as it’s still in Beta and I am not sure about it.

Rocket Loader™ – Automatic (Turn it off if you use Adsense on your site as it may interfere with it)

Mobile Redirect – I have it OFF

Caching

It manages the Cloudflare cache settings for your WordPress site. Use Purge all after you make any major change to your site (like changing a theme or layout) to removed all cached pages from Cloudflare.

Recommended settings:

Caching Level– Standard

Browser Cache Expiration– 4 Hours

Always Online™– On

(This is a really useful feature. Even if your site is down for some time for any reason Cloudflare will show a cached version of the site to the users)

Development Mode– Off

Page Rules

Here you can set page rules for specific URLs of your site. These are useful when you have set up SSL and you want to show all or some of your pages as HTTPS. For example, you may want to show HTTPS on your ecommerce store page or checkout page but not on blog pages. Cloudflare gives you 3 page rules for free which is good enough for a typical blogger. I will show you how to create the page rules in Cloudflare Free SSL setup tutorial.

Network

Leave all settings as default unless you know what you are doing.

Traffic

Nothing to do here for free users.

Congratulations! You have setup Cloudflare on your WordPress site.

** Cloudflare also offers a free WordPress plugin but if you have setup everything as described above, you don’t need it. I am in the favour of keeping the number of WordPress plugins on your site to minimum anyway.

January 28, 2021
Increase the Maximum File Upload Size in WordPress

Generally, the file upload size limit in WordPress is 20MB and it’s not sufficient if you want to upload big audio or video files into your WordPress pages or posts. Recently I needed to upload a 64MB mp3 file on one of my WordPress pages so I started looking for solutions. The solutions available on most of other sites either don’t work anymore or need coding skills. Here in this post I will let you know a very simple way to increase the file upload size in WordPress. You just need to know how to use Notepad and how to upload a file to the WordPress installation directory on your host through FTP or cPanel.

Open Notepad and Copy-paste the following code into it:

memory_limit = 256M
upload_max_filesize = 256M
post_max_size = 256M
file_uploads = On

Change the Size (256MB here) according to your requirement. Then save the file as PHP.INI and upload it to the wp-admin folder of your WordPress installation directory on your host through FTP or cPanel. If you don’t know how to upload the php.ini file to your site directory, talk to your web host. They will do it for you. That’s it. Your WordPress file upload size is increased.

March 13, 2020
WordPress and Adsense Asynchronous Code – 2 Minute Guide

Google Adsense Asynchronous Ad code is just better than the old Synchronous code. There are two major benefits of implementing the new Google Adsense Asynchronous Ad code into your WordPress site. 1. Asynchronous code doesn’t affect the loading of other elements of you page. Other parts of your site will open even if the Google ad is taking time to load. It means your site will load faster. and 2. Asynchronous Ads are responsive which means they automatically adjust according to the screen sizes of the device of site user. These are great features and there is no reason you should not benefit from them.

but sometimes the new Asynchronous Ad code and WordPress don’t go well. People often experience problems like – ads are not either displaying at all or not appearing on certain pages. Here are 3 steps that you have to follow to make the New Google Adsense Code work on your WordPress site.

1. Remove all the Adsense Synchronous Ad codes from your WordPress site. Two types of codes on same page can create problems.
2. Go to your Google Adsense Dashboard and get the Asynchronous code of the ad. It will look like this:-

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– your ad unit name –>
<ins class=”adsbygoogle”
style=”display:inline-block;width:300px;height:250px”
data-ad-client=”ca-pub-000000000000000000″
data-ad-slot=”000000000000″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3. Paste the first line of this ad code above the </head> tag in the header.php file of your WordPress site. You will find Header.php file in – WordPress site Installation folder – WP-Content- Themes- Your Theme. You can use an FTP software or the control panel of your web host to access this file.
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

4. Now go to your WordPress site and Copy-paste the Google Adsense Asynchronous Ad code in the whatever posts and pages of your WordPress site you want.

That’s it. Good Luck!

April 9, 2019
Comment Out HTML Code in WordPress
Commenting out is making an HTML code inactive. When you comment out some lines of code on your page, those lines will be still there and you will be able to see them in the WordPress HTML editor but they will not appear in the browser. There may be several situations when you wight want to comment lines of HTML code in WordPress.

For example:
- You want to put some additional information about a part of the HTML for future reference
- You want to put a comment before a part of the HTML code so that you can search the comment and go to that part directly if you need to
- You are testing some elements on the WordPress page or post and you don’t want to delete the code in case you need to revert back to it
In these situations commenting out option can come really handy.

The normal HTML comment out code is like this –
```

```
But sometimes it doesn’t work in WordPress. If that’s is the case try the following commenting out method:-
```

```
This will work in most of the situations.

Good Luck!
April 9, 2019