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:
Easy
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 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.
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.
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
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 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
// 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
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
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
Newsletter Subscription
As some of you might have noticed, I don't post very often and my blog might be a bit hard to follow. Fort this reason, I created a subscription lst for anyone who is willing to get a notice once I publish a new blog post. You can subscribe to it by clicking here
Author: Mantas Ališauskas
Photography: Mantas Ališauskas
Design: Mantas Ališauskas
Blog: AMPire.city
Want more of this?
Any given post entry of any given place takes me around 20h to complete. This includes writing, researching, photo editing, creation of graphics and actual post. Nobody pays me to do it, therefore I must do it on my free time. I have many interesting ideas of how to put an interesting information into an easy way to digest it, like maps, infographics and other cool stuff, but what I lack is time. If you appreciate my work and happened to be in a position where it wouldn't hurt you, it would mean a world to me if you could gift me an extra hour on Patreon.
Thank you for your contribution @ctdots.
After reviewing your tutorial we suggest the following points listed below:
There are already several tutorials to explain about setting up Wordpress for a custom theme.
We suggest that in the next tutorial explain more innovative functionality about Wordpress.
Include proof of work under the shape of a gist or your own github repository containing your code.
Looking forward to your upcoming tutorials.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Chat with us on Discord.
[utopian-moderator]
Thanks for the tips! It was my first tutorial so your feedback is very appreciated. It is a first part of the series therefore the topic is so simple, also I mad ea mistake. I believe there is plenty of tutorials of how to set up a custom theme, but on this one I want to focus on custom AMP theme. My bad making a wrong topic:)
Thank you for your review, @portugalcoin! Keep up the good work!
Totally agree:)
Hi @ctdots!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Thank you!
Hey, @ctdots!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Thank for creating an awesome platform:)