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:
- Fresh WordPress version: https://wordpress.org/download/
- AMP Plugin: https://wordpress.org/plugins/amp/
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. [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
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
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(); ?>
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