![AMP WP Basics 1.jpg](https://cdn.steemitimages.com/DQmcN8ecjeSgGKQxG7Spgw8cKoDBDXTYzLxAd3RgSKn8Q4y/AMP%20WP%20Basics%201.jpg)

<h3>Repository</h3>
https://github.com/ampirecity/AMPWPBasics1

<h3>What Will I Learn?</h3>
Setting up AMP plugin for Wordpress;
Setting up files for a custom AMP Wordpress theme.


<h3>Requirements:</h3>
•	A fresh WordPress version on your preferred server;
•	AMP for Wordpress plugin;
•	Basic CSS & HTML knowledge;
•	Basic PHP knowledge.

<h3>Difficulty:</h3>
Easy

<h3>Useful links:</h3>
**Fresh Wordpress version:** https://wordpress.org/download/
**AMP Plugin:** https://wordpress.org/plugins/amp/

<h2>Setting up AMP for Wordpress plugin</h2>
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.

![Steps_setting-up-wordpress-for=a=custom-amp-theme-1 copy 2.jpg](https://cdn.steemitimages.com/DQmXWTbbK4uMVyarhuCnBnDTDjio4PZ4fVM534bouvujhCL/Steps_setting-up-wordpress-for=a=custom-amp-theme-1%20copy%202.jpg)

<h2>Setting up custom AMP theme</h2>
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.

![Steps_setting-up-wordpress-for=a=custom-amp-theme-1 copy 4.jpg](https://cdn.steemitimages.com/DQmexB8c2Y4ZnvtJBPkaQ2zTCoDKbUp2j294DvWE8WerRmj/Steps_setting-up-wordpress-for=a=custom-amp-theme-1%20copy%204.jpg)

![Steps_setting-up-wordpress-for=a=custom-amp-theme-1.jpg](https://cdn.steemitimages.com/DQmbXHXcpW7gTq7vbPmEke2oXr1gdCDKDWhoLV3H2N6p8sr/Steps_setting-up-wordpress-for=a=custom-amp-theme-1.jpg)

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.


<h2>Using plugins with AMP for Wordpress</h2>
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.

![Steps_setting-up-wordpress-for=a=custom-amp-theme-1 copy 5.jpg](https://cdn.steemitimages.com/DQmccjaY6zpkvLdYXeG9NbuhninJyE2w8mk4iAd8iMfuwFr/Steps_setting-up-wordpress-for=a=custom-amp-theme-1%20copy%205.jpg)
*W3 Total Cache example*

<h2>Setting up style.css correctly</h2>
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
*/
```


![Steps_setting-up-wordpress-for=a=custom-amp-theme-1 copy 3.jpg](https://cdn.steemitimages.com/DQmPsbKz9Hv2wfQvHNkKNapcYU5sx1aD3anwqsDvrEY9WWJ/Steps_setting-up-wordpress-for=a=custom-amp-theme-1%20copy%203.jpg)

<h2>Setting up functions.php for the theme</h2>
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' );
```

<h2>Setting up basic template files for the theme</h2>
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:

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

<h2>Minimal header and footer content example</h2>

<h3>header.php</h3>
```
<!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(); ?>
```

<h3>footer.php</h3>

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

<h2>The Progress</h2>

![Steps_setting-up-wordpress-for=a=custom-amp-theme-1 copy 5.jpg](https://cdn.steemitimages.com/DQmf4VkuQGmeZ458YZWXzAETqKxVg6J2j2Gy7LSMEYVdS6F/Steps_setting-up-wordpress-for=a=custom-amp-theme-1%20copy%205.jpg)

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*

---------------------------
![ampirecity-dark@2x.png](https://cdn.steemitimages.com/DQmQmE8FfRUqBnwTKPuKyvND5UsSnfUCLm1WPPsBR7fZsv1/ampirecity-dark@2x.png)

<h2>Newsletter Subscription</h2>

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<a href="https://www.subscribepage.com/connectingthedots"> here</a>

---------------------------

*__Author:__ Mantas Ališauskas
__Photography:__ Mantas Ališauskas
__Design:__ <a href="http://webpark.lt/">Mantas Ališauskas</a>
__Blog:__ <a href="http://www.ampire.city">AMPire.city</a>*

---------------------------

<h2>Want more of this?</h2>
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.

<a href="https://www.patreon.com/bePatron?u=949078" data-patreon-widget-type="become-patron-button">Become a Patron!</a>