AMP Wordpress Basics #1: Setting up Wordpress for a Custom AMP Theme

Image for post
Image for post
Original photo by Goh Rhy Yan on Unsplash

Repository

What Will I Learn?

Requirements:

Difficulty:

Useful links:

Setting up AMP for Wordpress plugin

Image for post
Image for post

Setting up custom AMP theme

Image for post
Image for post
Image for post
Image for post

Using plugins with AMP for Wordpress

Image for post
Image for post
W3 Total Cache example

Setting up style.css correctly

/*
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
*/
Image for post
Image for post

Setting up functions.php for the theme

<?php// Load CSS
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

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

Image for post
Image for post
Image for post
Image for post

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store