How to create beautiful and good looking AMP pages in WordPress


In this article, I’m going to tell you how to create stunning and good looking AMP pages for your website in WordPress.

Create beautiful AMP pages for WordPress

Create beautiful AMP pages for WordPress

If you wish to know the three best AMP plugins for wordpress, you can visit this article in which I have compare the three best plugins to create AMP automatically.
In this guide, we are going to use AMP for WP plugin to create AMP pages since it creates the most beautiful AMP pages.

But you might doubt that, Automattic has also created an  AMP plugin but why are you using it?

Why not use AMP plugin by Automattic?

The reason is, the AMP created by it are very basic, and not good looking.

Also, the plugin offers minimum customization, just changing colors to be exact. To modify other things, you will have to dive into the code, which many webmasters will avoid.

And it offers almost no extra functionality like menu, recent posts etc.

So, exactly what kind of AMP should you expect?

By following this guide, you will be able to create good looking AMP pages easily. As an example, you can look at this page itself (if you are in an AMP, else click here to view an AMP from our site).

Our aim is to create a big header with site title, a menu below it and recent posts below content, as well as social buttons.

Features of AMP for WP plugin:

It offers a lot of features like:

  1. 2 distinct design templates to choose from.
  2. Complete SEO integration with Yoast SEO plugin.
  3. Recent posts below content
  4. Sticky social sharing buttons
  5. Big and attractive header
  6. 4 Advt. styles to add Adsense etc. to you AMP pages
  7. Easy customization with native customizer
  8. Custom CSS allowed

And some more..

That’s why we recommend that you should use this plugin.


So, let’s start discussing about the main thing, that is, creating beautiful AMP pages.

Creating Great AMP pages in wordpress:

  • First of all install and activate these two plugins in your WordPress site:
  1. AMP by Automattic (AMP for WP will not work without it)
  2. AMP for WP plugin itself

 

•Go to Appearance>AMP and customize the color options given in customizer.

•Open AMP settings, you can find it in the left side menu of your WordPress dashboard.

Configure the different sections like analytics, SEO, advt. as your needs. Now, let’s know about further customization.

Header styling

>>You can set the header background color by inserting following lines in Custom CSS field of AMP settings:

#header{background: #xyz123;}

Don’t forget to change #xyz123 by your dezired Hex color.

AML site logo

You can create an image containg your website’s name in some beautiful font, with the same background color which you used as header background.

For creating the logo img, I recommend you to use PicsArt app for Android. It offers different fonts, as well as blend, shadow and opacity options.


Get More Tips and Hacks in your inbox!

Hey Techy, Just enter your name and email, and get wordpress tips, technology news, more guides like this one, and free downloads to paid apps and games, all for free. No spam, promise.

Fill it up, you will not regret 😊
(Viewing an AMP and can’t see email form, go to top, click More>Get ProTechTips by email)


Some further customization:

  • You can use translation section in AMP settings to rename titles of navigation bar, recent posts widget etc.
  • Study the plugin’s CSS and make further changes

….

So, that was my guide to create good looking and beautiful AMP pages easily, without much coding. Hope you liked this article, also don’t forget to subscribe to our site by email to get more quality content right in your inbox.

If you have any other ideas for customizing AMP pages, please let me know in comments.

Keep Visiting. Get Techy.

It took me some time to put this up, what do you think about this article?