# Handling AMP Legacy Themes Full (ok)

#### Customizer Panel <a href="#customizer-panel" id="customizer-panel"></a>

The plugin adds an “AMP” panel in the Customizer, which you can use to tweak various parts of the default template like colors.

#### Disabling the AMP Customizer Settings <a href="#disabling-the-amp-customizer-settings" id="disabling-the-amp-customizer-settings"></a>

If you’re using a completely custom template, you may want to disable the AMP Customizer Settings:

```javascript
add_filter( 'amp_customizer_is_enabled', '__return_false' );Code language: JavaScript (javascript)
```

Note that this needs to be called before the `after_setup_theme` hook to work.

#### Where to Put Your Code <a href="#where-to-put-your-code" id="where-to-put-your-code"></a>

The code snippets below and any other code-level customizations should happen in one of the following locations.

If you’re using an off-the-shelf theme (like from the WordPress.org Theme Directory):

* A [child theme](https://developer.wordpress.org/themes/advanced-topics/child-themes/).
* A custom plugin that you activate via the Dashboard.
* An [mu-plugin](https://codex.wordpress.org/Must_Use_Plugins).

If you’re using a custom theme:

* `functions.php` (or via a ‘require’ call to files that load from `functions.php`).
* Any of the options above.

#### Theme Mods <a href="#theme-mods" id="theme-mods"></a>

The default template will attempt to draw from various theme mods, such as site icon, if supported by the active theme.

**Site Icon**

If you add a site icon, we will automatically replace the WordPress logo in the template. Or if you’d prefer you can do it programmatically:

```php
add_filter(
	'amp_post_template_data', 
	function ( $data ) {
		// Ideally a 32x32 image
		$data['site_icon_url'] = get_stylesheet_directory_uri() . '/images/amp-site-icon.png';
		return $data;
	}
);Code language: PHP (php)
```

**Logo Only**

If you want to hide the site text and just show a logo, use the `amp_post_template_css` action. The following colors the title bar black, hides the site title, and replaces it with a centered logo:

```php
add_action(
	'amp_post_template_css',
	function () {
		// only CSS here please...
		?>
		header.amp-wp-header {
			padding: 12px 0;
			background: #000;
		}
		header.amp-wp-header a {
			background-image: url( 'https://example.com/path/to/logo.png' );
			background-repeat: no-repeat;
			background-size: contain;
			display: block;
			height: 28px;
			width: 94px;
			margin: 0 auto;
			text-indent: -9999px;
		}
		<?php
	}
);Code language: PHP (php)
```

Note: you will need to adjust the colors and sizes based on your brand.

#### Template Tweaks <a href="#template-tweaks" id="template-tweaks"></a>

**Featured Image**

The default template displays the featured image. If you don’t want to display the featured image in your amp page, use the following code:<br>

```php
add_filter( 
	'amp_post_template_data', 
	function ( $data ) {
		$data['featured_image'] = false;
		return $data;
	} 
);Code language: PHP (php)
```

**Content Width**

By default, your theme’s `$content_width` value will be used to determine the size of the `amp` content well. You can change this:

```javascript
add_filter( 'amp_content_max_width', function () {
	return 1200;
} );Code language: JavaScript (javascript)
```

**Template Data**

Use the `amp_post_template_data` filter to override default template data. The following changes the placeholder image used for iframes to a file located in the current theme:

```php
add_filter( 'amp_post_template_data', function ( $data ) {
	$data[ 'placeholder_image_url' ] = get_stylesheet_directory_uri() . '/images/amp-iframe-placeholder.png';
	return $data;
} );Code language: PHP (php)
```

Note: The path must pass the default criteria set out by [`validate_file`](https://developer.wordpress.org/reference/functions/validate_file/) and must be somewhere in a subfolder of `WP_CONTENT_DIR`.

**Schema.org (JSON) Metadata**

The plugin adds some default metadata to enable [“Rich Snippet” support](https://developers.google.com/structured-data/rich-snippets/articles). You can modify this using the `amp_post_template_metadata` filter. The following changes the type annotation to `NewsArticle` (from the default `BlogPosting`) and overrides the default Publisher Logo.

```php
add_filter( 'amp_post_template_metadata', function ( $metadata ) {
	$metadata['@type'] = 'NewsArticle';

	$metadata['publisher']['logo'] = array(
		'@type' => 'ImageObject',
		'url' => get_template_directory_uri() . '/images/my-amp-metadata-logo.png',
		'height' => 60,
		'width' => 600,
	);

	return $metadata;
}, 10, 2 );Code language: PHP (php)
```

**Template Meta (Author, Date, etc.)**

For the meta section of the template (i.e. author, date, taxonomies, etc.), you can override templates for the existing sections, remove them, add new ones.

**Example: Override Author Template from Theme**

Create a folder in your theme called `amp` and add a file called `meta-author.php` with the following:

```xml
<li class="xyz-byline">
	<span>Anonymous</span>
</li>
Code language: HTML, XML (xml)
```

Replace the contents, as needed.

**Example: Adding custom templates for homepage and page for posts**

As for v0.6 pages are supported by the plugin, including the homepage (page on front) and page for posts (blog). After enabling “page” post type support in the AMP general settings, all pages will be enabled for AMP by default, unless the page is the homepage, the blog page, or a page that is assigned to a custom template. (You can auto opt-in to AMP support for all pages via `add_filter( 'amp_post_status_default_enabled', '__return_true' )`.) To opt-in these pages for AMP, just enable support via the AMP support toggle in the page’s publish metabox. The homepage can re-use the `single.php` template as a default, but the page for posts should get a custom template assigned so that the list of posts (The Loop) is present. To modify the template for the homepage or page for posts, put the following in your theme’s `functions.php`:

```php
add_filter( 'amp_post_template_file', function ( $template, $template_type, $post ) {
	if ( 'page' === $template_type && 'page' === get_option( 'show_on_front' ) ) {
		if ( (int) get_option( 'page_on_front' ) === $post->ID ) {
			$template = dirname( __FILE__ ) . '/amp/home.php';
		} elseif ( (int) get_option( 'page_for_posts' ) === $post->ID ) {
			$template = dirname( __FILE__ ) . '/amp/blog.php';
		}
	}
	return $template;
}, 10, 3 );Code language: PHP (php)
```

Then you can add an `amp/home.php` which is basically a fork of the plugin’s bundled `single.php`and the same for `amp/blog.php` with this key addition:

```xml
<ul>
	<?php while ( have_posts() ) : the_post(); ?>
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php endwhile; ?>
</ul>
<?php the_posts_pagination(); ?>Code language: HTML, XML (xml)
```

**Example: Override Taxonomy Template via filter**

This will load the file `t/meta-custom-tax.php` for the `taxonomy` section:

```php
add_filter( 'amp_post_template_file', functionn( $file, $type, $post ) {
	if ( 'meta-taxonomy' === $type ) {
		$file = dirname( __FILE__ ) . '/t/meta-custom-tax.php';
	}
	return $file;
}, 10, 3 );Code language: PHP (php)
```

In `t/meta-custom-tax.php`, you can add something like the following to replace the default category and tags with your custom `author` taxonomy:

```xml
<li class="xyz-tax-authors">
	<?php echo get_the_term_list( $this->get( 'post_id' ), 'xyz-author', '', ', ' ); ?>
</li>Code language: HTML, XML (xml)
```

**Example: Remove Author from `header_meta`**

This will completely remove the author section:

```php
add_filter( 'amp_post_article_header_meta', function ( $meta_parts ) {
	foreach ( array_keys( $meta_parts, 'meta-author', true ) as $key ) {
		unset( $meta_parts[ $key ] );
	}
	return $meta_parts;
} );Code language: PHP (php)
```

**Example: Add Comment Count to `footer_meta`**

This adds a new section to display the comment count:

```php
add_filter( 'amp_post_article_footer_meta', function ( $meta_parts ) {
	$meta_parts[] = 'xyz-meta-comment-count';
	return $meta_parts;
} );

add_filter( 'amp_post_template_file', function ( $file, $type, $post ) {
	if ( 'xyz-meta-comment-count' === $type ) {
		$file = dirname( __FILE__ ) . '/templates/xyz-meta-comment-count.php';
	}
	return $file;
}, 10, 3 );Code language: PHP (php)
```

Then, in `templates/xyz-meta-comment-count.php`:

```xml
<li>
	<?php printf( _n( '%d comment', '%d comments', $this->get( 'post' )->comment_count, 'xyz-text-domain' ) ); ?>
</li>Code language: HTML, XML (xml)
```

**Custom CSS**

**Rule Additions**

If you want to append to the existing CSS rules (e.g. styles for a custom embed handler), you can use the `amp_post_template_css` action:

```php
add_action( 'amp_post_template_css', function ( $amp_template ) {
	// only CSS here please...
	?>
	.amp-wp-byline amp-img {
		border-radius: 0; /* we don't want round avatars! */
	}
	.my-custom-class {
		color: blue;
	}
	<?php
} );Code language: PHP (php)
```

**Completely Override CSS**

If you’d prefer to use your own styles, you can either:

* Create a folder in your theme called `amp` and add a file called `style.php` with your custom CSS.
* Specify a custom template using the `amp_post_template_file` filter for `'style' === $type`. See the “Override” examples in the “Meta” section for examples.

Note: the file should only include CSS, not the `<style>` opening and closing tag.

**Head and Footer**

If you want to add stuff to the head or footer of the default AMP template, use the `amp_post_template_head` and `amp_post_template_footer` actions.

```php
add_action( 'amp_post_template_footer', function ( $amp_template ) {
	$post_id = $amp_template->get( 'post_id' );
	?>
	<amp-pixel src="https://example.com/hi.gif?x=RANDOM"></amp-pixel>
	<?php
} );Code language: PHP (php)
```

**AMP Endpoint**

If you don’t want to use the default `/amp` endpoint, use the `amp_query_var` filter to change it to anything else.

```php
add_filter( 'amp_query_var' , function ( $amp_endpoint ) {
	return 'foo';
} );Code language: PHP (php)
```

#### Custom Template <a href="#custom-template" id="custom-template"></a>

If you want complete control over the look and feel of your AMP content, you can override the default template using the `amp_post_template_file` filter and pass it the path to a custom template:

```php
add_filter( 'amp_post_template_file', function ( $file, $type ) {
	if ( 'single' === $type ) {
		$file = dirname( __FILE__ ) . '/templates/my-amp-template.php';
	}
	return $file;
}, 10, 3 );Code language: PHP (php)
```

Note: there are some requirements for a custom template:

You must trigger the `amp_post_template_head` action in the `<head>` section:

```javascript
do_action( 'amp_post_template_head', $this );Code language: JavaScript (javascript)
```

You must trigger the `amp_post_template_footer` action right before the `</body>` tag:

```javascript
do_action( 'amp_post_template_footer', $this );
Code language: JavaScript (javascript)
```

Within your `amp-custom` `style` tags, you must trigger the `amp_post_template_css` action:

```javascript
do_action( 'amp_post_template_css', $this );Code language: JavaScript (javascript)
```

You must include [all required mark-up](https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/?referrer=ampproject.org) that isn’t already output via the `amp_post_template_head` action.

### Custom Post Type Support <a href="#custom-post-type-support" id="custom-post-type-support"></a>

By default, the plugin only creates AMP content for posts and (as of 0.6) pages. Also as of 0.6, you can enable AMP support for other post types via the AMP settings admin screen. Just enable the checkbox with each post type which is able to be served as AMP.

You can also add support for other post types by adding `add_post_type_support()` calls in PHP for the desired post types. For example, assuming our post type is `xyz-review` you can add AMP support by adding the following to a theme or plugin:

```javascript
add_action( 'amp_init', function () {
	add_post_type_support( 'xyz-review', amp_get_slug() );
} );Code language: JavaScript (javascript)
```

You’ll need to flush your rewrite rules after this. You can do this by accessing the Permalinks admin screen or via running `wp rewrite flush` in WP-CLI.

If you want to add post type support but have AMP be disabled by default, you can use the following plugin code:

```php
add_filter( 'amp_post_status_default_enabled', function ( $default, $post ) {
	if ( 'xyz-review' === $post->post_type ) {
		$default = false;
	}
	return $default;
}, 10, 2 );Code language: PHP (php)
```

If you want a custom template for your post type:

```php
add_filter( 'amp_post_template_file', function ( $file, $type, $post ) {
	if ( 'single' === $type && 'xyz-review' === $post->post_type ) {
		$file = dirname( __FILE__ ) . '/templates/my-amp-review-template.php';
	}
	return $file;
}, 10, 3 );Code language: PHP (php)
```

We may provide better ways to handle this in the future.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnphp.gitbook.io/learnphp/wordpress/handling-amp-legacy-themes-full-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.