Learning AMP WordPress #1: Setting up WordPress for a AMP Custom Theme

Repository

https://github.com/ampirecity/AMPWPBasics1

What Will I Learn?

  • Setting up AMP plugin for WordPress;
  • Setting up files for a custom AMP WordPress theme.

Requirements:

  • A fresh WordPress version on your preferred server;
  • AMP for WordPress plugin;
  • Basic CSS & HTML knowledge;
  • Basic PHP knowledge.

Difficulty:

Beginner

Useful links:

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Setting up AMP for WordPress plugin

WordPress and the team behind the AMP plugin for the platform are constantly working to improve things. If you are using one of the official themes you can just stop reading here, with AMP plugin 0.7+ the pages will be converted into AMP automatically.

However, while it could work for personal projects or small businesses, more advances websites might want to use AMP to its fullest. While the high-end project doesn’t require AMP plugin at all, for most cases it is better to start with it onboard. The default settings I use are set to Template Mode: Native with tree shaking and all templates queried checked.

Setting up AMP for WordPress plugin

Setting up AMP for WordPress plugin. [CC BY-SA 4.0], via AMPire.city

Setting up custom AMP theme

As for any theme in WordPress, only style.css and index.php are required, but I prefer starting with all of these files:

  • style.css – Sets up the theme.
  • index.php – The main template file.
  • functions.php – The place where customize the functioning of your theme.
  • header.php – Universal code before the content.
  • footer.php – Universal code after the content.
  • screenshot.png – 880x660px thumbnail for the theme.

Enabling fresh AMP WordPress Theme. [CC BY-SA 4.0], via AMPire.city

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

For tab-junkies like me, I recommend adding a favicon to recognize the tab of the website I am working on, as fast as possible. You can do that by going Appearance > Customize > Site Identity. [CC BY-SA 4.0], via AMPire.city

Using plugins with AMP for WordPress

The whole point of AMP (Accelerated Mobile Pages) is it’s the simplicity and loading speed, therefore avoid installing any unnecessary plugins. One thing is for sure, as AMP plugin will notify you, AMP will work best with caching enabled. There are many cache plugins out there, you can choose the one you prefer. I suggest you do so after developing the theme.

W3 Total Cache example. [CC BY-SA 4.0], via AMPire.city

Setting up style.css correctly

In order to set up the basic information of your theme, you need to set the header of this file correctly. While not all of these fields are required, this is the basic template for setting up a WordPress theme.

/*
Theme Name: Self-explanatory.
Theme URI: Self-explanatory.
Author: Name yourself.
Author URI: Advertise yourself.
Description: Whatever your heart wants it to be.
Version: The version of your release.
License: Extra licensing
License URI: Self-explanatory
Tags: Self-explanatory.
Text Domain: required for multi-lingual websites
*/

Setting up style.css correctly. [CC BY-SA 4.0], via AMPire.city

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Setting up functions.php for the theme

For starters, functions.php can be empty, but in order for style.css to work correctly, you need to load it as a stylesheet file as well. Also, as a personal choice, I add the fonts for the website and enable featured images. At the start of a project my functions.php is as it follows:

<?php
function enqueue_style() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_style');
// Load fonts
function load_fonts() {
wp_enqueue_style('Exo', 'https://fonts.googleapis.com/css?family=Exo:500,500i,700,700i&subset=latin-ext');
}
add_action('wp_enqueue_scripts', 'load_fonts');
// Activate featured images
add_theme_support( 'post-thumbnails' );

Setting up basic template files for the theme

The whole point of header.php and footer.php template files, is to make the general code, above and below the content, the same. You can add the content of these files to any template file in the same way I added to my index.php:

index.php

<?php get_header(); ?>
<h1>That's one small step for man</h1>
<?php get_footer(); ?>

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Minimal header and footer content example

header.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><?php bloginfo('name') ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>

footer.php

<?php wp_footer() ?>
</body>
</html>

The Progress

Setting up basic template files for the theme results. [CC BY-SA 4.0], via AMPire.city

And that is it, you are now all set up to start developing your own custom AMP WordPress theme.

 

Originally posted on 3/20/2019
Versions:
WordPress 5.1
AMP 1.02

Happy Clients

Enjoying ultra-fast mobile-first AMP websites for their competitive businesses.