10 WordPress Themes Made Exclusively For Page Builders

Best WordPress Themes Made For Page Builders

If you are planning to use Page Builders to create your WordPress websites, here are some themes that are made specifically for that. You can use any of these themes with Page Builder plugins to create beautiful websites.

Best WordPress Themes Made For Page Builders

Everyone looks for an easy option to create beautiful looking landing pages or websites. Page builders are one of the tools which give​ ease of working to users by allowing them to easily build websites by adding pre-defined components on a page.

Page builder plugins like Elementor, Visual Composer, Beaver Builder, etc. have changed the entire process of creating a website and have made it very easy. The majority of premium themes these days come with layouts built using page builders.

Best WordPress Themes For Page Builders

So, do we only need page builders to create beautiful websites?

No, page builders are just plugins and they need a theme or framework to work with. A theme must be designed according to the page builder in order to work with them. Not all the themes are compatible with all major page builders, so it is important for you to choose a theme that works brilliantly with all the page builder plugins for WordPress.

In this article, we will be telling you about 10 themes that are extremely compatible with all major page builder plugins. You can buy these themes without worrying about their compatibility with page builder plugins.

Please note that by Page Builders, we are referring to some highly used page builders like Elementor, Thrive Architect, Visual Composer, and Beaver Builder. All the themes we have picked are multi-purpose and flexible in working. It doesn’t matter whether you are using Visual Composer or Elementor or Beaver Builder, these themes will work perfectly with them.

Without taking more of your time, let’s start with these 10 WordPress themes which are exclusively made for page builders.

Astra

WordPress Astra Theme For Page Builders

Astra is no doubt the best selling and most downloaded theme for WordPress. It is available in both Free and Premium version for users.

Being completely compatible with all the page builder plugins for WordPress, it comes with pre-made templates for Beaver Builder and Elementor. The Free version has a limited set of pre-made templates but you can access a wider range of templates with the premium versions.

Astra is a multi-purpose theme that is capable of fulfilling all the needs of users. Along with being page builder compatible, this theme also among the fastest loading themes, easy to install and configure, and comes with a lot of add-ons available for it.

Pro version adds more options for each element like multiple headers & Footer design, Blog & Site Layout, etc. and you can configure them easily in your dashboard. It also comes WooCommerce ready so that you can easily build your store with the help of Astra and Page Builders. You can read this Astra theme review to know more about it.

Check Astra Theme


Suggested Read: [Review] Designrr Ebook Creator For Professionally Designed Ebooks

GeneratePress

GeneratePress WordPress Themes With Support of Page Builders

If you go look at the reviews of GeneratePress, you will find that a lot of people are calling it the best theme they ever worked on. Well, they are right. Like the Astra theme, it is also among one of the most downloaded themes for WordPress.

GeneratePress is also available in both Free and premium versions. Unlike the Astra theme, GeneratePress is very affordable. $49 is all you need for a year with updates and unlimited sites license. If you don’t want updates then you don’t have to pay any more.

Coming to the point, GeneratePress is compatible with all major page builder plugins for WordPress like Elementor, Visual Composer, and Beaver Builder. The loading speed of GeneratePress is extremely good and it counts among the fastest loading WordPress themes too. Yes, you will be getting pre-made layouts for website creation in GeneratePress too.

With the Premium version, you get many additional elements like Site Layouts, Copyright Messages, Menu, Blog Layout, Sections Visibility, and Background. You can plug and play those elements to create any layouts of your choice and create beautiful sites.

Check GeneratePress Theme


OceanWP

OceanWP Themes For WordPress

OceanWP is a competitor of both Astra and GeneratePress. It is a feature-rich free as well as a premium theme available for WordPress. With over 12,00,000 downloads on the WordPress directory, it is among one of the most downloaded themes.

Both the free and premium version of the theme work really well with all major page builder plugins for WordPress. Again it is a multi-purpose theme that is built to work with page builders.

The performance and functionality of OceanWP are extremely impressive. This theme is highly extendable with plugins and page builders. It comes with import extension which allows you to install any of the demo content for your site with a single click. You can use this theme for free or you can go for a paid version at just $129.

Check OceanWP Theme


Suggested Read: SEO Myths Which You Should Throw Out Of Your Toolbox

Hestia Pro

Hestia Pro WordPress Theme With Page Builder Support

Themeisle is a well-known WordPress development brand in the industry. Hestia is a product of Themeisle which comes included in their membership plans.

If you a fan of the ​​material design, you are going to love this theme. This theme was suitably designed for startups, businesses, e-commerce, portfolio, etc. purposes. Some elegant sections and parallax scrolling effects combined with material design makes it one of the best-looking themes for WordPress so far.

Hestia Pro is built for page builders along with providing speed and performance to the visitors. Along with being page builder-friendly, Hestia Pro also comes with its own real-time editor which makes editing easier. Customer support is also one of their strongest points with less than the hour of response time for customer queries.

You can get Hestia Pro starting at $105 along with other 33+ themes and plugins. The pricing is a bit high when you look to get it for unlimited domains, in that case, you can check GeneratePress or Astra.

Check Hestia Pro Theme


Genesis Framework

Genesis Framework For WordPress

The main purpose of creating the Genesis framework was to offer high performance, multi-purpose and easy to customize the WordPress theme. Genesis makes it easy for you to customize and create your website without hassle. Just to keep in mind that Genesis Framework will need a child theme to properly set up your site.

A huge number of websites are running over the Genesis Framework. This framework is completely compatible with all the major page builder plugins and also optimized for performance. People always prefer Genesis when it comes to SEO optimization of a website.

Developers of genesis have really taken care of all aspects of customization by providing extensive hooks and filters. If you are comfortable with PHP and CSS, you can almost code your changes with the help of these hooks and filters. Otherwise, you can go ahead and install any page builder plugin to create beautiful looking websites.

It also comes with a one-click theme install functionality that allows you to load the demo content with a single click. Genesis framework will cost you only $59.95. Customer support is extremely responsive so you don’t have to worry about getting your queries solved.

For more details, you can check our detail review of the Genesis Framework.

Check Genesis Framework


Suggested Read: Tips Which Can Help In Case You Are Not Sure What To Blog About?

Page Builder Framework

Page Builder Framework For WordPress

As it is clear by the name, this theme framework is specifically designed to work with page builders. I must say that this is a perfect theme for you if you are using a page builder along with it.

Page builder framework is available for free on their website but to have advanced functioning you will have to purchase their premium add-ons which will cost $58 per year. If you are going to build a basic website then you can also do that with the free version of this theme framework.

Along with being page builders friendly it is also fast loading, SEO optimized, multi-purpose, and easy to customize the theme. If you are a developer then there is good news for you. This theme is 100% open source and hosted on Github.

Developers of Page Builder Framework have made it especially for Elementor, Beaver Builder, Brizy, Divi, Visual Composer, and Site Origin. With all these features, it is really flexible and easy to work with the theme.

Check Page Builder Framework


Divi

Divi Theme For WordPress By Elegant Themes

We all know that Divi by Elegant Themes is an extremely successful product in the industry of WordPress. Divi has changed the way people used to create a website using WordPress. By-the-way Divi stands for two different things, One is Divi theme and the second is Divi Page Builder. So, here we are talking Divi theme.

It comes with its own Divi builder which is an extremely creative page builder. But, you can also use this theme with any other page builder plugin like Elementor, Beaver Builder, Visual Composer, etc. It wasn’t made taking care of other page builders but Divi theme works really well when used with other page builder plugins.

You can get Divi in the membership of the Elegant theme which will give you access to 87+ themes and 7 plugins in just $89 a year. This is an extremely attractive deal because their membership is a complete package of WordPress website solutions. You can check the detail Elegant Theme Review to get more understanding of the plan and features.

Check Divi Theme


Suggested Read: KeyCDN Review – A Cost-Effective CDN Service For Your Blog

Monstroid 2

Monstroid 2 WordPress Theme With Page Builders Support

Monstroid 2 is a multi-purpose theme for WordPress. This theme can be used to create a website for any purpose and business. The best thing about Monstroid 2 is that it comes with loads of pre-made website layouts that can be imported to the website with just a click.

Basically made to work with Elementor, Monstroid 2 works really well with all major WordPress page builder plugins. Along with website layouts, you are also getting attractive layouts for creating blogs for your clients or yourself.

All the layouts given in Monstroid 2 are based on Elementor, so if you are using those layouts then you can work with Elementor’s free version only. It is available for just $79 with a single-site license on the Template Monster store. This price includes theme updates and premium customer support.

Check Monstroid 2 Theme


Zelle Pro

Zelle Pro WordPress Theme From Themeisle

Pretty much similar to Hestia which was mentioned earlier on this page, Zelle Pro is again a page builder compatible theme. This theme was previously known as Zerif Pro and now it is renamed to Zelle Pro. It is being used by thousands of people on their website.

Zeller Pro is completely compatible with Elementor and the other page builders. Just for information, Elementor is leading page builder plugin for WordPress and this is the reason every theme is being built based on Elementor.

Zelle Pro will work seamlessly with other page builders too like Visual Composer, Beaver Builder, Thrive Architect, etc. The pricing is the same as Hestia, you can get it for a membership plan for $105 in which you will also get 30+ premium themes including Hestia and 3 Pro plugins for your WordPress website.

Check Zelle Pro Theme


Suggested Read: Best Travel Blogs Which You Should Follow To Get Inspired

Customify

Customify WordPress Themes With Page Builders Support

Like Page Builder Framework theme, Customify is also a theme that is made to work with page builder plugins. Loaded with pre-made website layouts which can be imported to build a website quickly without any hassle.

It is a highly customizable and expendable WordPress theme that performs fast, optimized for SEO and packed with responsive customer support.

Customify also comes with header and footer builder integrated with WordPress customizer which is really a creative feature and helps you in creating header and footers as per your choice. Customify is successfully been tested with Elementor, Thrive Architect, King Composer, Site Origin, Beaver Builder, Visual Composer, Brizy, and Divi Builder.

It is available in both free and paid versions. You can get Customify starting just at $59 per year along with a 20$ renewal discount.

Check Customify Theme

So, these were 10 WordPress themes which are exclusively made to work with page builders. If you have any question then please feel free to ask us in the comment section below. We’ll surely get back to you as soon as possible.

KeyCDN Review – A Cost Effective CDN For Your Blog

KeyCDN Content Delivery Network Review

There are so many different CDN’s which are available in the market that selecting the best one has become a difficult task. If you are looking to get KeyCDN, here is a review of their services which can help you decide.

KeyCDN Content Delivery Network Review

CDN has become one of the important aspect of Blogging infrastructure. Google has started to give more and more emphasis on fast loading sites which has increased the importance of CDN’s.

Your main server is usually located on one part of the world and would work fine if your users are from the same region. If people from other regions try to reach your site, your files need to travel more distance depending on your user’s location.

Because of this additional added travel, your files can take some time to reach to your users. It can give a feeling of slow loading site and might frustrate your users. It also depends on the amount of data which needs to be transferred. If your images are bigger, they will take more time to load.

CDN’s are supposed to solve this problem by having server all across the world which can cache your files. On the run time they will decide which server is closer to the user and serve the files from that server. This will reduce the distance which your files need to travel and reduce the loading time for your page across the world.

KeyCDN Review

KeyCDN is contant delivery network which has over 35 data center and 75k zones deployed across the world. They have many edge servers which are located in each region to distribute the files easily across the globe.

You will get reliable, fast and vastly distributed platform to distribute your files. It also comes with a close integration for most of the CMS’s including WordPress. You can easily enable it with the help of a plugin and start distributing your files.

Check KeyCDN


Type Of CDN Zone

Before we go further into the feature and pricing for KeyCDN, lets discuss the type of CDN zone which you can use. There are two type of CDN zones based on type of caching needs.

Pull Caching

In this type of zone, your file will not be automatically cached at the edge server. When someone from a region visit your site first time, your file will be fetched from the origin (Your Web Server) and will be served.

So the first customer will still a lag while loading your site as the files still need to travel from your Web Server to the customer location. But once that is a server, the files will be cached in the servers available in the region. So any other requests coming from that region will be served with the files available closeby.

It is called Pull zones as it only fetches the files based on the request received. This is little easy for CDN’s to manage as they don’t need to waste storage for the file which nobody is requesting. They only work with active files and their distributions are automatically managed. So usually these zones cost less than the Push Zones.


Suggested Read: [Review] Designrr Ebook Creator For Professionally Designed Ebooks

Push Caching

Push caching is when you even don’t want your first user also to wait or files are big enough that it will take a long time to download. You can preload them on the caching zone so that it will deliver from that location.

Because you are asking CDN’s to preload your files, it means it needs to be pushed to the zones before anyone specifically asked for it. In this case, CDN’s has to work before any actual request and keep caching the files in the zone. So, usually, you have to pay extra money to use Push caching mechanism.

The only place it will be worth if you are having good traffic from any region and you are allowing large file downloads. In this case, you can preload these large files in that region for faster access.

Creating Distribution Zone

Once you understand about the Pull and Push Caching, you need to decide which caching mechanism you want for your distribution. You need to create a Zone based on the caching type which will distribute your files.

To Create a Zone, click on the Zones tab on the left menu and then select Add Zone option from there. If you have not created any zone, you will automatically be taken to create zone screen.

KeyCDN Review - Add a dustribution zone

You have to enter a Zone name, Zone Status, Zone Type and Origin URL to create a pull zone. If you are creating a Push Zone, you don’t need Origin URL as you need to push the files for the distribution.

There are some advanced settings which allow you to take fine-grain control of your distributions. Only try to change them if you clearly understand those. By default, basic things are set and already optimized according to general needs. They should be good enough for most of the distributions.

Once your distribution zone is created and deployed, you can enable it in your WordPress install.

You will get first 3 zones as free which means you can serve up to three sites and they will only cost as per the usage. After that each zone will cost $1 a month extra than the usage.


Enable KeyCDN CDN in WordPress

KeyCDN comes with easy to use WordPress plugin which allows you to enable the CDN for your WordPress site. CDN Enabler is available in the WordPress repository for free of cost.

CDN Enabler WordPress Plugin For KeyCDN

The plugin is very easy to set up, just enter the CDN URL and directories which you want to serve from your CDN zone. You can also set some exclusions for which you do not want to use CDN service. Once done those files will be served with the CDN URL.

Get CDN Enabler

CDN Enabler Plugin provides an easy integration to KeyCDN services with the help of API’s. You can also purge the CDN right from the WordPress Dashboard.

Though the CDN Enabler plugin is an easy choice, you might not want to add another plugin on your site. So most of the Caching plugins like W3 Total Cache also provide the KeyCDN integration. You can set it up as a Generic Mirror but there will be less control on the purging from WordPress dashboard. Please check this guide for detail setup instruction for W3 Total Cache and KeyCDN.

Zone Aliases Setup

Zone Aliases allows you to use a subdomain for your own domain for CDN vs the URL provided by KeyCDN. You can set it up in the Zone Aliases section in your KeyCDN dashboard.

KeyCDN - Create Zone Aliases

Once you set it up in the KeyCDN dashboard, you need to create a CNAME record in the DNS Name server. The CNAME should point the Alias to your KeyCDN distribution URL.

After this setup, you can use your zone alias as the CDN URL. This will help in ranking the images on your domain as they all will be referenced from your subdomain. Zone Alias also help in case you have already set up SSL certificate for your site. You can now include your subdomain or wild-card domain in the existing security certificate to deliver the files over HTTPS.


Suggested Read: How To Enable Lets Encrypt SSL Certificate On Your AWS LightSail WordPress Install

LetsEncrypt SSL Certificate

One of the good thing about KeyCDN is easy integration with LetsEncrypt. You can just give the Zone Alias name and it can enable the SSL automatically for your CDN service. You just need to make sure that the DNS has been propagated successfully before enabling it.

To enable the SSL certificate, go into the Zones and click on Manage. Advanced Features contains a section about SSL/ Select Lets Encrypt from the drop down and save the zone.

Enable LetsEncrypt SSL Certificate For KeyCDN

You need to save the Zone Alias again after this so it will create an SSL certificate for you. Make sure DNS names are setup correctly before saving the zone alias. Even if you have already created the zone alias, just go to that screen and save it again to enable the SSL certificate.

The only restriction is that you can only generate the SSL certificate for one zone Alias. So if you have more than one Zone Alias defined, you need to look for other methods.


Purging

KeyCDN comes with instant purging and provides flexible way to purge your content from the edge servers. This is one of the major problem with other CDN’s like CloudFront as they charge for Purge requests.

CloudFront costs can increase a lot faster based on how many URL’s you need to invalidate and how you are doing it. KeyCDN does not charge for this feature and it’s available to all of their users.

They also provide an API access to Purge feature so you can purge the cache from the WordPress dashboard itself. You can purge the single URL or the entire zone.

If you are using CDN Enabler plugin in the WordPress, you get a CDN Purge button at your WordPress Dashboard. Just click on that and your CDN will be purged.


Suggested Read: How To Enable CDN Support For Your WordPress Blog

CORS and Cache Headers

KeyCDN makes it very easy to set and customize HTTP headers from the dashboard itself. If you are setting the HTTP headers correctly on your web server and want CDN to honor those, you can just set it up in the dashboard.

If you are not sure and want to define the expire header on the CDN level than set the values in Expire and Max-Expire fields in Advanced Features. This will ignore all the headers coming from your site and start adding Cache headers in the response. You can set the values accordingly.

You can also set to send the canonical URL in the response along with CORS header for cross-domain requests. All these customization’s are very easy and can be done directly from the KeyCDN dashboard.

It also allows you to create a custom Robots.txt file and serve it from the dashboard. This means you can still control what will be scan or list by Google right from the dashboard.


Performance

KeyCDN is not the top ranked performance leader in terms of response time but they have a good balance in terms of features and performances.

Their performance is around average but most of the CDN’s performance vary by only few milliseconds. So in terms of real time impact their is very little difference.

CloudFront is little faster than KeyCDN but only by 2-3 milliseconds. Like I mentioned above CloudFront charges for cache invalidation where KeyCDN does not. So its about creating a balance between features and performance. Other CDN’s have issue in setting up Lets Encrypt SSL certificate where KeyCDN has one click integration.

All of the KeyCDN features are included in the pricing and available to all customers. At this point of time there is very minimal difference in terms of response times of all the CDN networks and KeyCDN is no different.


Pricing

KeyCDN comes with one of the competitive pricing structure with respect to other CDN providers. Currently they charge around $0.04 / GB in North America and Europe which is almost half the price of Amazon CloudFront.

You will only pay for your usage, so there is no monthly cost attached to the KeyCDN. You can connect your sites and based on the usage of bandwidth or Data Out, you pay the amount.

KeyCDN Pricing Structure

The only problem is that they work on pre-credit basis which means you need to purchase the credit in your account to use their services. These credits will be redeemed against the services you are using. The minimum purchase amount for the credits is $49 with a validity of one year.

This will not be a problem for the sites where the yearly expense is more than $49 but if your expense is lower than that, you might risk loosing some of the credit at the end of the year. Though KeyCDN allows the credit rollover if you make another payment before the end of the year but that means spending another $49.

If you are in the category where you don’t want to spend that much amount upfront or just starting your blog, Amazon CloudFront will be a good option. It can easily serve the static files and does not need any upfront commitments. My suggestion is to look for KeyCDN services if your monthly expense is already touching $5 per month.

For the MetaBlogue readers, here is a gift of $10 or extra 250GB in Bandwidth on making the first payment – $10 KeyCDN Free Credit. You can use this to take some extra benefits for your CDN service requirements.

The pricing is little higher for the push zone or Asia and South America zones. So check the official pricing page to project your monthly expenses.

Check KeyCDN

KeyCDN is one of the good CDN networks which can help you scale according to your need. If you are already spending around $49 per year on your CDN, you can use its pay-per-use pricing structure.

If your yearly spend is less than than use the above link for getting a $10 as a gift which should cover the initial expense for starter blogs. Enable KeyCDN services and speed up your blog.

How To Enable CDN Support For Your WordPress Blog

Best Way To Speed Up Site With CloudFront CDN

Here is a tutorial that will help you set up and serve your content from a CDN service. So check this, if you are planning to enable the CDN services for your blog.

Best Way To Speed Up Site With CloudFront CDN

CDN services have become one of the essential parts of the blog setup these days. As blog loading speed has become one of the crucial factors for search engine rankings, people want to make sure they utilize the resources properly.

What Is A CDN?

Content Delivery Networks (CDN) are independent server networks which do not do any processing, just server the content to the readers. They can have multiple servers at a ​different location and serve the content from the server closer to the user location.

CDN can help you serve the files from the closest location of your readers. They cache these files around the world in different locations and serve them from the server which is close to the readers. This way it does not impact the page loading time and increase the bandwidth availability of your server.

Should You Use CDN Service With WordPress?

WordPress is only a content management system, so it will serve the content from the server on which it is installed. In case you have a server in North America and your users are in Europe, the content will be served from the North America server. It can add delays which can be reduced by the use of a CDN service.

So, the answer is Yes. You should use CDN services with WordPress.

When You Should Enable CDN

One of the questions which I get very frequently is when you should enable CDN support for your blogs?

Many people want to know if they need to wait for the traffic before enabling CDN or should they need to go ahead and invest without any income?

This is a catch 22 situation, you won’t start generating enough income in a short time without CDN support and most of the CDN services usually start with a fixed basic cost.

I have started this blog keeping the cost in mind and I am tracking each and every penny spends on this. So I myself have gone through this situation and looked at the costs very closely, this is what I suggest.

You should enable the CDN on your blog from Day One.

Yes, there is no excuse for not providing faster experience to your users and that is particularly true if you are targeting multiple geo-locations. You should enable it on day 1 and make sure your blog has a reduced loading time for your readers.

Suggested Read: Designrr Ebook Creator For Professionally Designed Ebooks

How To Manage Cost?

Now the next thing to talk about is cost, how should we manage it? So let’s check what I have done with this blog to manage my cost effectively.

Usually, when you start your blog, you would not want higher fixed costs as you would be looking to build your income. So at this time, I prefer solutions which are charged pay per use basis. Once you generate enough traffic that the pay per use cost starts increasing, you can look to move.

There are few CDN providers which runs with a free plan but most of them have some restrictions. I was looking for an option which can provide complete flexibility and faster turnaround. Amazon Web Services is one such provider.

I have already talked about how I have finalized and installed this blog on Amazon LightSail. So it makes sense to integrate another service of AWS with this blog.

Now even if you are running on any other WordPress Shared Hosting, you should still be able to use AWS CloudFront CDN without any issue.


Why AWS CloudFront CDN For WordPress

There are many reasons why I have chosen AWS CloudFront as my CDN provider. If you are new to AWS you get limited usage free for the first full year. 

In the free tier, you will get 50GB free data out and up to 2,000,000 http / https request. This should be good enough for most of the starter blogs.

Once you cross the limit, you will be charged for what you use. So there is no fixed monthly cost and you can still provide a better experience to your readers.

What Will You Get?

AWS currently has 19 region and 57 availability zones for its users. What are region and zones?

Region– It is like a geo-location with a collection of multiple zones mapped with a physical data center. Every Region is physically isolated and independent from every other Region in terms of location, power, water supply, etc.

Zones– It’s a logical data center in a Region available for use by any AWS customer. They have all the contingency build so two zones will not fail together.

AWS Regions and Zones Understanding
Regions and Zones

Rackspace blog has a good article to describe region and zones of AWS. For the people from technical background – each region is completely independent. Each Availability Zone is isolated, but the Availability Zones in a region are connected through low-latency links.

These 19 Regions cover geo-locations all over the world and 5 more are planned by the end of this year. So your content will always have a closer location to your users and will be served fast.

Suggested Read: How To Set Up Load Balancer To Automatically Scale Your WordPress Site on AWS LightSail

Other CDN Options

If you are not so inclined to use Amazon CloudFront, here are some other choices which you can use.

Keycdn

This is another CDN service which charge based on usage only. There is no fixed monthly commitment upfront. You will also get 25GB free for the first month as a new customer.

Keycdn prices are one of the most competitive. They charge almost half the price of AWS CloudFront. The more you use their CDN service, the cheaper it becomes.

The only drawback for their service is minimum payment to buy Keycdn credits. Currently, the minimum payment is set to $49 which will give you Keycdn credit of the same account. These credits will expire in one year or you have to make a $49 payment again to carry them forward.

For a new blog $49 may be little expensive, so let me make it easy for you. You can use the below link and signup for Keycdn, this will give you $10 credit which will help you go for some months without any issue. You can reload the amount once these credit are expired.

Check Keycdn

StackPath

I also like StackPath (Formally MaxCDN) plans as they provide a good balance between cost and usage. The only issue is their basic plan starts at $10 per month.

StackPath gives 1 TB global bandwidth in its starter plan, if you compare it with AWS CloudFront, they will charge you around $60 – $80 for that kind of bandwidth. So price wise its much different but on AWS, you will only pay for what you have used.

Most of the started blog needs very little bandwidth so StackPath will be costly at the start but becomes a good alternative once your AWS CloudFront expense starts to reach around $10.

Check StackPath

My suggestion would be to use AWS CloudFront till your monthly expense becomes around $5. Once you reach that limit than move to Keycdn and wait till you reach to $10 monthly expense before moving to StackPath.

Suggested Read: How To Set Up Email Services On AWS LightSail WordPress Install

AWS CloudFront Setup

This is very good for the starter blogs as they always have constrained budget. So you will only spend money on the bandwidth which you use. If it’s a new AWS account, you can use it for free up to one year.

Do I need S3 Bucket?

If you start looking for information about AWS CloudFront, you would see many pages talking about including AWS S3 Bucket and CloudFront to WordPress. So many people get confused that they need to create an S3 bucket and then use it as an origin for CloudFront.

No, You don’t need S3 Bucket for using AWS CloudFront with WordPress.

Also remember that S3 bucket gets charged separately, so until you have a business need to use it, I would not recommend it. Though in a specific condition you may need an S3 bucket, the cost for that is very minimal. I will explain it later in the post.

How to Enable AWS CloudFront CDN Service

There are two steps which you need to complete to enable AWS CloudFront for WordPress.

  1. Enable pull service in AWS CloudFront to fetch your files. AWS doesn’t charge for incoming data so this data transfer will be free of cost.
  2. Point your files to AWS CloudFront in your WordPress install so it can be picked up from there.

Don’t worry both the steps are very easy to accomplish.

Enable a Pull Service

You can go to your AWS Console and look for CloudFront service. Now you need to create a new distribution, which will be used to supply your files.

Once you click on create distribution, it will ask what kind of delivery method you want – Web or RTMP.

Web– To distribute static files from your blog

RTMP – To distribute media files like audio and video

For our usage, we can select Web as we will be serving files from our WordPress installation. You need to enter origin details in the next screen.

AWS CloudFront CDN Setup Screen

Specify the origin domain name, protocol policy, and other general settings. There are few important settings which are mentioned below:

Origin Domain Name– Domain name for your blog which needs to be integrated with AWS CloudFront. If you have a subdomain to serve the images or other static assets, you can give that. Otherwise, it will be the primary domain name for your blog.

Price Class– AWS is charged differently based on the region, so if you want to avoid pricier location and want to serve content from certain regions, you can select here.

Alternate Domain Names– If you want to use your own CNAME rather than the AWS provided name, you can set it here. Alternatively it will create a domain name for you, which might not be easily readable. So if you want to change it, you can do it here.

Geo Restrictions– If you want to restrict your content at some geo location, you can do it here.

You can also set your HTTP vs HTTPS settings also here, decide how you want to serve your content. If you have enabled https and want all HTTP requests to redirect to HTTPS, you can set it up here.

Suggested Read: How To Set Up Access to phpMyAdmin For AWS LightSail WordPress Install

Enable AWS CloudFront In WordPress

Once you have created​ a distribution, it will pull all the files from your sites and will cache it in AWS. Now you need to point your WordPress to AWS distribution for your static files.

You can do that with W3 Total Cache plugin, it provides support for AWS CloudFront. Before you make that connection, you need to create an access id and security key for your AWS account.

You can just enable it and set it as a mirror also but that doesn’t give fine grain controls. So I prefer the access id and security key method.

Create an access ID and security Key

You can go to AWS Console and look for IAM. Create a new user and give it any name you like. Select the Programmatic access method under access type, we do not want that user id to login to AWS console.

AWS CloudFront IAM Access Setup

Now you need to provide authority for CloudFront to this user. Attach pre-made policy CloudFrontFullAccess and CloudFrontReadOnlyAccess to the user. Once you are done, it will generate an access id and secret key, make a note of it.

Update W3 Total Cache

Now go to General Setting in W3 Total Cache and enable CDN with Amazon CloudFront. After enabling it, you need to create a connection to AWS.

Enable CDN in W3 Total Cache WordPress Plugin

Go to CDN page and it will ask for access id, secret key and domain name. You can enter the details and it will create a connection to AWS.

Domain name will be what you have given in CNAME section of CloudFront or will be assigned for you. You can get it from AWS CloudFront dashboard.

You can update what kind of files you want to serve from your CDN and W3 Total Cache will update the links to point to CDN. Now if you open your blog, your static files will be served from AWS CloudFront.

One thing which you need to note is CloudFront charges for file invalidations. So if you want to clear your cache and manually invalidate the cache, there will be a charge. First, 1000 Files / Path are free, after that you need to pay. So be careful while invalidating the cached files.

You can also skip using CDN for logged in users or administers, if you want to save some cost. But I would recommend to periodically check your blog as a normal user. You may want to keep it as close as other user of your blog so all gets a single consistent view.

You can also set it up with WP Super Cache with ease, just provide the alternate URL and enable the CDN support, it will start serving the file from AWS CloudFront.

Remove Duplicate Content Issue For CloudFront Domain

If you have used your domain name as an origin in your CloudFront distribution, you may be surprised to see that your complete site is accessible from the CloudFront domain name. This is because AWS CloudFront is capable of caching the static and dynamic content to deliver it through its network.

So if anyone request a dynamic content like post URL from CloudFront domain, it can cache it and serve that request. For Google, this is another URL which delivers the same content and if it starts indexing those URL, it can create a duplicate content issues on CloudFront distribution.

To make sure Google does not index these URLs, you need to add a Robots.txt file on the CloudFront domain which will block the search engine crawl. So your main site robots.txt should be different than the one served with CloudFront.

Create S3 Bucket

This is where we need an S3 bucket and will use CloudFront capability of multiple origins to resolve this issue. Create a new S3 bucket and mark it as private as we only want it to be accessed by CloudFront only.

Create S3 Bucket For Robots.txt File on AWS CloudFront Domain Name

Now upload a new robots.txt file in this S3 bucket with the text mentioned below.

User-agent: * 
Disallow: /

Once you have the file added to the S3 bucket, we can go ahead and update the CloudFront Distribution.

Update CloudFront Distribution

CloudFront is capable of caching content from multiple origins and delivering it. If there are clashes in those origins, they will be resolved based on behavior​ set in the distribution settings.

Add Origin

What we want to do is add the S3 bucket as an origin and give it a higher priority than your site. This will make sure that if someone requests robots.txt from the CloudFront domain, the file in S3 will be delivered. If you request the robots.txt from the site URL, it will still return the original file.

Now, go to your CloudFront distribution and add a new origin. Select an S3 bucket as the origin domain name and update the below settings.

  • Mark ‘Yes’ for Restrict Bucket Access
  • For Origin Access Identity, create a new identity if you do not already have one. Give a comment to identify the new identity.
  • Select ‘Yes, Update Bucket Policy’ to grant the read permission on the S3 bucket. With this, the bucket will be accessible from the CloudFront.

This will make sure that users can only access the bucket content with the CloudFront URL only.

Create CloudFront Origin With S3 Access
Add Behavior

Once the origin is created, we need to update the behavior​ to give this origin a higher priority for robots.txt. Click on Create Behavior and add robots.txt in Path Pattern.

Select an S3 bucket as the origin and update other settings on how to deliver that file. Once done, make sure that it has a higher Precedence (lower number) in the behavior list. This will make sure that the robots.txt will be searched in the S3 bucket first.

Now, you are all set and will not receive the duplicate content issue for your CloudFront distribution.

That’s how you can enable the CDN service for your WordPress blog with AWS CloudFront. Which CDN service are you using for your blog and when did you enable it? Did you wait for some before using the CDN service with your blog?

How You Can Connect To phpMyAdmin On Your AWS LightSail Server

Connect to PHPMyAdmin On AWS LightSail Server

Are you using AWS LightSail infrastructure to install WordPress and looking for ways of connecting to phpMyAdmin for managing your database? Here is an easy tutorial which will allow you to set it up on Windows, Mac or Linux machines.

Connect to PHPMyAdmin On AWS LightSail Server
PHPMyAdmin Login Screen

AWS LightSail is one of the best VPN hosting providers with the most affordable costs. They are backed by state of art AWS infrastructure which makes sure you get good up-time and service.

Once you install WordPress on AWS LightSail you need to set up some basic services. phpMyAdmin connection is one of those services which will make sure you can optimize and manage your WordPress database.

How To Connect phpMyAdmin on AWS LightSail

AWS LightSail uses a Bitnami WordPress image which is optimized for performance and security. It means you can’t just connect to your server and open phpMyAdmin. Also, it doesn’t come with a cPanel to provide additional tools to get your work done.

For security reasons, most of the admin tools are only accessible on the localhost IP address of 127.0.0.1 including phpMyAdmin.

As the address is a local address, you need to create a secure SSH tunnel which will allow you to access those tools.

What Is SSH Tunnel?

SSH tunnel is one of the ways to connect to services which are behind a firewall or with restricted access.

Bitnami restricts all the access to localhost only, which means they can only be accessed with local IP address. That address would be hostname 127.0.0.1, where you can access phpMyAdmin.

To connect to services like phpMyAdmin, you need to create an SSH tunnel between your local computer and AWS server. An SSH tunnel make sure that the communication between your machine and the server is encrypted and secure.

There are many security concerns over providing the direct access to the database so Bitnami hides the database with the help of SSH tunnel.

SSH Tunnel uses a port forwarding technique and forwards a local port to the remote connection. This way any local traffic going to that port will reach to that remote server and gets a result back.

So let’s check how you can create an SSH tunnel and access phpMyAdmin on AWS LightSail server.

Connect phpMyAdmin on Windows

You can use any SSH client on Windows to create an SSH tunnel. I prefer Putty as my preferred SSH client for Windows so we will use it in this tutorial.

Putty is a free SSH client and you can download it for free from Putty.org. You can go ahead and download the Windows version to access phpMyAdmin.

Once you have the Putty installed on the Windows machine, you need to create a secure connection and tunnel to your AWS server.

Create SSH Tunnel

You need to add the user id, SSH key and Port information to create an SSH Tunnel. The first thing which you will need to create a secure connection is your private key. You can download it from the account page in Amazon LightSail.

Make sure you download the key from the same region where your server is present. You will get a PEM keyfile from the account page but Putty does not work with it. It needs a PPK keyfile which can be generated with the help of PuttyGen.

PuttyGen is a tool which comes with Putty install. Just search and open the PuttyGen application to convert your PEM keyfile.

PuttyGen Application To Convert PEM Keyfile to PPK keyfile

You can click on load and select the downloaded PEM keyfile. By default it will look for PPK file, so change the file type to all and select the PEM keyfile.

Once the key is loaded, just click on Save Private Key and save the PPK file. This will be the key which we will use while defining the connection for the AWS server.

Suggested Read: [Review] Designrr eBook Creator for Professionally Designed eBooks

Connect Putty To AWS Server

Now you can open Putty application and define the connection parameters for the AWS server. Just make sure to use the PPK file for your private key for the connection.

STEP 1: Open a new connection and enter the IP address of the AWS Server IP Address at Session screen.

Putty New Connection Screen For AWS SSH Tunnel Creation

STEP 2: Now you need to enter the user id and private key in the Connection section. As we are going to create a SSH connection, we need to enter Username, Private key and Port Information in the Connection settings. All three things will go in different screens.

Click on Data tab under Connection settings and enter Username ‘bitnami’ in Auto-Login username field.

Putty Username Entry On Connection Screen

STEP 3: Now open Auth section and enter the path for the private key (PPK file).

Putty Private Key Entry On Connection Screen

STEP 4: Open Tunnels section and enter the below values for the port fields.

Source Port: 8888

Destination: localhost:80

If you have enabled the SSL by following our guide, please change the destination port from 80 to 443. Once done, click on add to save the port information.

Putty Port Information On Connection Screen

STEP 5: Now Go back to Session screen and enter a name for the session. Click on Save to save the settings, so each time you can just load the session to connect to your AWS Server.

Once done, click on connect and you will see a Bitnami welcome screen. If you see a popup before that, just click on Yes and it will take you to Bitnami welcome screen.

This means, you have connected to AWS Server and a tunnel has been established. Now go to below URL and access PHPMyAdmin.

http://127.0.0.1:8888/phpMyAdmin

If you have SSL enabled change HTTP to HTTPS in above URL.


Suggested Read: Best Third Party Premium Plugin for Divi Visual Page Builder From Elegant Themes

Connect phpMyAdmin on MacOS and Linux

Mac and Linux / Ubuntu come with the SSH utility which you can use to access the phpMyAdmin. You can access the SSH utility through the terminal application in the Mac.

You will need your private key to be able to log on to your AWS LightSail server. So go ahead and download the key from your account page. Once you have the key, you can change the current directory to the place where you have the key.

Now, enter the below command to enable the SSH tunnel between your machine and AWS LightSail server.

ssh -i /location_to_private_key -L 8888:127.0.0.1:80 bitnami@AWS_SERVER_IP_ADDRESS

Just replace location_to_private_key and AWS_SERVER_IP_ADDRESS to the actual values and you will have an SSH tunnel created to your WordPress installation.

Now you can access the phpMyAdmin on the below mention URL:

http://127.0.0.1:8888/phpMyAdmin

Make sure that the port number in the URL and the SSH tunnel command is same.

If you have followed our guide to enable the SSL certificate on AWS WordPress, you will receive an error that secure connection can’t be established to phpMyAdmin.

This is because all the incoming traffic is getting transferred to SSL port and we have created an SSH tunnel on the non-SSL port. You need to use the below commands to create the tunnel on the SSL port:

ssh -i /location_to_private_key -L 8888:127.0.0.1:443 bitnami@AWS_SERVER_IP_ADDRESS

Now use the below URL to access the phpMyAdmin

https://127.0.0.1:8888/phpMyAdmin

You might see a warning that the site is trying to impersonate localhost but you can skip that. We have knowingly created the tunnel to access the server utilities, so go ahead and access it.

This is how you can access the services running on your AWS LightSail server which are only accessible from localhost URL. So access your PHPMyAdmin or Pagespeed cache status.

How To Add Surveys To WordPress Blog With Survey Anyplace

Design WordPress Survey With Survey Anyplace

Adding Surveys to Your WordPress blog can be a good way to interact with your readers or checking about important topics. Survey Anyplace can help in creating those fun and engaging surveys.

Design WordPress Survey With Survey Anyplace

Surveys are a great tool to generate feedback or opinions on any topics. They should also be a good tool which you can use to engage with your readers.

For example, If you are an e-commerce site and want to fine-tune your buying experience, ask your buyers to fill out a survey. It will let you know what sections they had the most difficulty with and needs fine-tuning.

You can also create some fun surveys like asking your users about their best pet activities or most beloved actors etc.

There are bloggers who have gone one step ahead and ask their readers about what they want to read next? Create a survey with a list of topics and let your readers decide what you should write about.

Survey Anyplace to Create Surveys

Survey Anyplace allows you to create those surveys and distribute them across different platform. You can also integrate them into WordPress with the help of their WordPress Plugin.

You will get a webpage for your survey which can be shared across the social networks to engage more readers. This way you can increase the reach of your surveys and get more responses.

How To Create a Survey

You can create a Survey from their web application and it will generate a survey ID which can be used to embed it in WordPress. Each survey contains an intro and final screen along with questions.

The design elements are available under the Design tab where you can define the font, colors, background etc. for your surveys. There are some predefined themes which you can use directly or tailer it based on the colors and layout of your site.

Design Tab in Survey Anyplace
Design Your Survey

You can also upload your logo to make it look more official and easily pick colors from it. There are other options like uploading a background, choose your fonts and size are available to change the looks of your survey.

Don’t Miss: How To Convert Your Existing Post into a Lead Magnet PDF

Piping Variables

One of the good features​ to personalize your Intro or Final screen is Piping Variables. These variables allow you to enter content specific to the respondent like letting him know about the number of questions answered in the survey.

There are many different variables available like – Questionnaire Title, Response Count, Response Time and Date etc. You can use these variables to create a personalize Intro or final message for your users.

Type Of Questions

Questions are the soul of any survey. Survey Anyplace allows you to create many different kinds of question to include in your surveys.

Type Of Questions in Survey Anyplace
Type Of Questions

You can select and combine any of these types of question to create your survey. To add some fun and engagement, you can use a scratch card or slot machine questions.

It allows you to alter the Intro and Final screen text while defining the questions. You can also enable or disable the Intro screen from this section. Now, let’s look at some of the interesting question types which can make your survey more engaging.

Ranking

You can ask your users to rank certain things and they can easily drag and drop the option to rank them in order. Creating a question is very east, you get a text field where you can enter and format the question text. You can also add different answers which you want your users to rank like if you have 5 different post ideas, ask your readers to rank them in the order they want to read them.

Ranking Question For Your Survey

This type of question engages your users as they have to drag and drop to arrange answers in their preferred choice.

Don’t Miss: How To Configure & Enable AMP For Your WordPress Site

Sliders

You have two options with Sliders – Text and Numbers. This is a good way to take quantitative feedback on a scale defined by you.

Example Slider (Number) Question

While defining the question, you can define the scale and labels for it. Like any other questions, you will get a full edit window for writing your questions. You can even add images or video to make the question more interactive.

You can also define the start value from which your slider will start. For Example, if you want to take feedback for your service, you would not want to start your slider from very poor. Start from somewhere realistic like Good or Better and then let your users slide it according to their liking.

Scratch Card

Another good type of question or interactive element is Scratch Card. You can include scratch cards in your surveys to generate some random elements for your responders.

Example Scratch Card Question Creation

It allows you to include multiple answers and give the probability for that answer to come up. You can also add images for each option which will be shown when the user scratch the card.

Suggested Read: [Review] StackPath CDN Services For Faster WordPress Experience

Include Survey In WordPress

Once you create the survey, you will get a link which is for a live survey on Survey Anyplace site. You can either use this URL and direct your readers to that or embed it directly on your post.

They have a WordPress plugin which can come handy if you are going to use multiple surveys on your site. You can get the plugin free from WordPress repository.

Get WordPress Plugin

The plugin provides some nice options to include survey as embed, popup or in as a widget. You can also just add it to open it in a new tab or same window.

Pricing

Survey Anyplace can give you free surveys for up to 20 monthly responses with most of the features. You can’t white label the survey, so it will always have Survey Anyplace logo placed on the bottom of your survey.

If you want more responses or white label the survey, you can opt for paid plans. You will also get piping and assessment capabilities with the paid plans.

So go ahead and give Survey Anyplace a try and create some fun and engaging surveys for your users.

How To Configure & Enable AMP for Your WordPress Site

Configure & Enable AMP for Your WordPress Site

Are you planning to enable AMP pages for your blog and not sure what to do? Here is a guide which can help you setup AMP pages and serve them correctly to your readers.

Configure & Enable AMP for Your WordPress Site

Google has launched AMP (Accelerated Mobile Pages) as an alternative to serve readers on the low bandwidth devices. They wanted to handle search results on low bandwidth devices and improve the user experience.

The major problem is when people search for any information on low bandwidth devices, they have to wait long for getting the page load.

Most of the web pages on the internet load so much extra information which takes a lot of time low bandwidth devices. For example, any WordPress blog will show so many widgets in the sidebar/footer. They will not add any value to the user who is looking for specific information.

AMP is supposed to solve it by stripping all the extra things from a web page and display only the required information.

What is AMP

AMP is Google’s created open source projects which aim to improve the loading speed of a webpage on all distribution platforms. You can get more details on their official site.

Now, don’t get me wrong, AMP is not an incomplete or stripped version. It works on a principal of MVP (Minimal Viable Product).

MVP (Minimal Viable Product) – A product with a basic set of features but enough to provide information for your users.

They want to present the information in front of the user as fast as possible. It should not matter on which platform or which network they are on. So, they are looking for minimal information which is needed to fulfill user requirement.

I Don’t Have Anything To Remove

Many webmasters can complain that those sidebar/footers are not extra information. They do engage users with the blog as most of them will have a list of related articles, recent articles etc. So they do provide relevant information which user can explore.

Engagement is not a key metric with AMP. Google understand that engagement takes a hit when you strip many elements out of a webpage. With some development skills, you can increase the user engagement on your AMP pages.

Sidebar, Footers, Comments, and Popups are some of the ways webmaster try to engage with users. They help in reducing the bounce rate but here Google wants a fast loading page. It should improve user satisfaction with fast loading relevant information.

Now, the webmaster community is divided on the implementation of AMP for websites. Some say it’s good for Google but bad for webmasters as we lose on revenue while Google makes money on searches.

I am not going to argue either in favor or against AMP. I hope you have done your research and make up your mind to implement AMP.

In this post, we are going to check how to configure & enable AMP for a WordPress blog.


How To Enable AMP on WordPress

WordPress comes from Automattic, Inc. They also create some useful plugins which can extend the functionality of WordPress.

AMP for WordPress is a plugin created by them and other contributors including Google. It is available free on WordPress repository and can be installed from Dashboard.

AMP for WordPress Plugin In WordPress Repository

There are some other plugins available which have paid versions to make it easier but I will be using AMP for WordPress in this post. It can be used for most of the AMP configuration and provide enough flexibility to render your pages correctly.

Just install the plugin and activate it to enable AMP webpage for your posts. If you want the AMP version for your pages also, you can enable it in the AMP -> General setting panel.

Get The Plugin

You can check the amp page for any blog post by adding /amp/ to blog post URL. For example, if your original URL is https://example.com/, your AMP URL will be – https://example.com/amp/.

When you check it the first time, you will notice that it is a very minimalistic page. There are no ads, no widgets, even your site logo is changed to the text version.

If you are using some scripts in between the content, those scripts will also be stripped. So you might be missing some components on your pages.

For example, I use Gist for displaying the code snippet on my blog. When I first enabled the AMP plugin, all of the Gist snippets were stripped out of my AMP pages. Which means people will see the incomplete article and might not appreciate it.

So, we need to do some work to make sure that AMP and non-AMP content is same.


Suggested Read: How To Use AWS Load Balancer to Scale Your WordPress Site

Enable Google Analytics On AMP Pages

After I enable the AMP version, I noticed that my JetPack and Google Analytics counts are not matching. JetPack counts were high and reporting activities on AMP pages where nothing is coming on Google Analytics.

So just because you have Google Analytics on your blog does not mean that it will be active on your AMP pages also. You have to enable it.

AMP for WordPress comes with inbuilt support for Google Analytics and you can enable it from the settings. Go to AMP -> Analytics page on your WordPress Dashboard.

Enter ‘googleanalytics’ in the type field and enter the below JSON to the value field. You need to replace the account with your Google Analytics property ID.

It will generate the ID automatically, save the value and you will have working analytics on your AMP pages.

{
  "vars": {
  "account": "UA-XXXXX-Y"
   },
  "triggers": {
  "trackPageview": {
  "on": "visible",
  "request": "pageview"
              }
  }
}

This will allow you to track the AMP pageviews in your Google Analytics Account.

You can also track event or social actions with the help of this. You will need to expand the JSON to include those.

Check this guide to look at the detail explanation of JSON and how you can track multiple things.

You can skip the scripts section as AMP for WordPress will automatically load the scripts based on elements present on the page.


Enable SEO Options on AMP Pages

By default, your SEO settings on the regular site will not work on AMP pages. You need to make sure all your meta tags and other settings are carried over correctly.

Luckily, Yoast has made it easy to implement with the WordPress Plugin – Glue for Yoast SEO & AMP. It is also available free on the WordPress repository.

Once you download and install, you can enable the type of post where we should enable this Glue to connect the data.

Glue for Yoast SEO & AMP

You can also set some more basic design template in the plugin which includes color for your link, site favicon etc.

It can also take some additional CSS which you want to load on AMP Pages. Just make sure your overall CSS should not cross the 50kb limit set by AMP guidelines.

You should have Yoast for SEO plugin installed and activated to make this work.

It also allows adding the analytics details. Use this or the method above to activate Google Analytics, do not activate it in both the places.

Get Plugin


Enable Site Logo On AMP Pages

This step is only needed if you are not happy with the text version of your blog name. You can display your site logo rather than just the simple text on your AMP pages.

By default, the plugin will show the name of your blog on the left and your favicon on the right side. If you do not want that and would prefer to show your logo, you can use the below code.

[gist]5472846a50154eceaf669aaf77fa0389[/gist]

This will show your logo centered on the header bar. You can also change the color of the header bar from the background CSS tag.

Just change the URL to point to your logo and it should start displaying your logo on AMP Pages.


Suggested Read: How To Block Brute Force Attack on WordPress Blog

Make Shortcodes AMP Compatible

AMP for WordPress takes the final rendered page and convert into an AMP page. So if you are using any shortcode which is generating <script> HTML tag, it will be stripped out of the AMP version.

Those might be important elements which you may want to display on the page. So you need to make sure they are rendered correctly on your AMP page with the help of some code.

You can load anything in the AMP components. Check their official reference docs to see all the supported components.

For example, I have talked about using the Gist on my blog posts which were not displaying on AMP pages. AMP has a dynamic content amp-gist which can be used to display those. I want to use the existing JetPack shortcode on the normal page and use amp-gist component on the AMP Page.

I can do that with the help of below code. You have to check if its the AMP page, if yes, use amp-gist otherwise fall back on JetPack shortcode.

[gist]8f02b92dde85e0fc22eaefdb18ec8c16[/gist]

You may have to define AMP version for every shortcode you want to replace. Once done, your content will display correctly on the AMP and non-AMP version.


Include Google Ads on AMP Pages

One of the important revenue mechanism for webmasters is Ad networks. By default, AMP pages do not display any ads on your blog pages. So you need to some extra coding to include the Ads.

I am going to enable Adsense on the AMP Pages if you are using any other network you need to modify the code according to that network.

[gist]4a9c83c17daea79f5038e41edf029926[/gist]

amp-ad is the component which you need to add to your page. Above code will add it on top and bottom of your post to display two ads.

If you want more ads, you can just create a similar function for other filters or action to display additional ads.

I would suggest using the responsive ad unit so that it can display correctly irrespective of the platform.


Suggested Read: Locked Out Of WordPress, Here Is How To Get Back In

Update Footer Text To Remove WordPress URL

By default, your AMP pages will have a footer which links to WordPress rather than your blog. So you would want to update that to reflect your blog design and links rather than WordPress.

Default Footer Text on AMP Pages

You can create a folder named ‘amp’ on the active WordPress Theme folder and put the templates which you want to use for AMP pages.

To change the Footer, you need to create a new template footer.php and place it in the amp folder.

Here is a sample footer.php file which adds a link to your non-AMP blog and copyright notice rather than default back to WordPress link.

[gist]3894b49667f364fd229f49e17dcc37c3[/gist]

You can take the file and change domain name from example to your domain name. Once you edit and upload the file to your amp folder.

Here is how your footer will look on AMP pages after the update.

Footer In the AMP Pages of Blog

You can edit the code to add more customization to your AMP Page footer.


How To Test Your AMP Pages

It becomes very important to be able to test your AMP pages while making any changes or adding any new plugin to your WordPress installation.

Check Preview of New Blog Posts

While you are writing any new blog posts, you should check the previews of the AMP page also. You can check it by clicking on the AMP icon located on the right of the preview button.

Preview AMP version of the post from edit screen

Make sure that AMP page has all the important elements and content which your readers might look for.

AMP Validator

One way to test AMP pages is to look from the naked eye and find errors. Another is to use tools and let the tool decide on the issues on your AMP pages.

AMP project has created a good online AMP Validator which can test any AMP pages and let you know if there are any syntax errors on your page.

Note that it will not report any errors about the missing content or incomplete post. You still have to compare the content on AMP and non-AMP pages and find errors.

Check AMP Validator

Hopefully, the above post will get you started on your AMP implementation for your blog. There are many other things which can be done with AMP like adding menu, ads within content, enabling search option etc.

I will be talking about those things in future posts. If you would like that information, go ahead and subscribe to our RSS feed or connect with us on social media to get the updates.

>