“WP AMP” Documentation by “Custom4Web” v8.4.2

---

“WP AMP — Accelerated Mobile Pages for WordPress and WooCommerce”

---

Table of Contents

1. Installation
2. Admin Interface
3. Shortcodes
4. Filters and Actions
5. Conditional Tags
6. Helper Functions
7. URL Params
8. Frequently Asked Questions
9. Sources and Credits

---

A) Installation - top

From your WordPress Dashboard

1. Visit 'Plugins > Add New'.
2. Click 'Upload Plugin'.
3. Select zip-archive with plugin and click 'Install Now'.
4. Activate WP AMP from your plugins page.

Via file upload

1. Unpack zip-archive with plugin.
2. Upload the wp-amp folder to your '/wp-content/plugins/' directory, using your favorite method (ftp, sftp, etc...)
3. Activate WP AMP from your plugins page.

Once Activated

1. Clear all caches (site cache, browser cache, etc).
2. Re-save permalinks settings.
3. Check plugin settings and visit AMP-version of your site.

Plugin is already preconfigured. So you can follow the link "Visit AMP Site" and enjoy plugin usage.

---

B) Admin Interface - top

Plugin settings is available from the page 'Settings > WP AMP'.

General Settings:

Here you can configure basic plugin options such as max width of the content, allowed post types and archive pages, RTL etc.

Appearance Settings:

Here you can adjust settings like colors, fonts, header and footer elements, and post meta data block. Also you can configure social share buttons here.

Templates Settings

Here you can customize AMP template blocks. For example you can enable or disable some blocks or change display order of blocks using drag & drop.

WooCommerce Settings

Here you can customize AMP content blocks of WooCommerce pages. The same as Template Settings there is an ability to change visibility and display order of content blocks such as title, image, SKU etc. You can customize Product, Shop and Product Archives pages.

Ads Settings:

Here you can setup AdSense, DoubleClick or custom ad blocks.

To enable these blocks on AMP you should enable them in Template Settings.

Please note that when you add an ad block first time it needs some time to appear.

---

C) Shortcodes - top

Plugin provides with few useful shortcodes for embedding into the AMP content.

Related Posts

[wp-amp-related title="Related Posts" count=3][/wp-amp-related]

Parameters:

• title="..." - title of Related Posts section (optional)
• count="..." - number of elements that will be displayed (optional)

Recent Posts

[wp-amp-recent title="Recent Posts" count=3][/wp-amp-recent]

Parameters:

• title="..." - title of Recent Posts section (optional)
• count="..." - number of elements that will be displayed (optional)

Share Buttons

[wp-amp-share types=facebook,twitter,linkedin,email width=60 height=44][/wp-amp-share]

Parameters:

• types="..." - share button types ( available types: 'facebook', 'twitter', 'pinterest', 'linkedin', 'gplus', 'email' )
• width="..." - social share icon width ( default value: 60px )
• height="..." - social share icon height ( default value: 44px )

AdSense

[wp-amp-ad type="adsense" width="150" height="50" data-ad-client="ca-pub-8125901705757971" data-ad-slot="7783467241"][/wp-amp-ad]

Parameters:

• type="..." - only AdSense available (required)
• data-ad-client="..." - adsense data-ad-client parameter (required)
• data-ad-slot="..." - data-ad-slot parameter (required)

No AMP

[no-amp]This text will not be show in the AMP version[/no-amp]

Switch Button

[wp-amp-switcher title='Switch default version'][/wp-amp-switcher]

Parameters:

• title="..." - button title

Accordion

[wp-amp-accordion] [wp-amp-accordion-section] <h2>Section 1</h2> <p>Content in section 1.</p> [/wp-amp-accordion-section] [wp-amp-accordion-section expanded="expanded"] <h2>Section 2</h2> <p>Content in section 2.</p> [/wp-amp-accordion-section] [/wp-amp-accordion]

Shortcodes:

• [wp-amp-accordion] - accordion tag
• [wp-amp-accordion-section] - accordion section tag

---

D) Filters and Actions - top

Hooks in WordPress core, plugins and themes essentially allow you to manipulate code without editing core files. So you can change third-party plugin behaviour from your own theme or plugin and keep future updates as well.

Plugin Actions

• amphtml_init - WP AMP plugin initialization, can be used for including additional js/php library or extending main functionality.
• amphtml_template_head - hooks to the head of AMP page, can be used for adding extended components.
• amphtml_template_css - hooks to the styles of AMP page, can be used for adding custom styles.
• amphtml_template_content - hooks to the content of AMP page, can be used for adding custom content.
• amphtml_footer_bottom - executes at the bottom of the footer of AMP page.
• amphtml_after_footer - executes after the footer of AMP page.

Plugin Filters

• amphtml_style - allows you to modify styles of AMP Page.
• amphtml_single_content - allows you to retrieve and update AMP post content.
• amphtml_meta - allows you to retrieve and update AMP Page meta block (author, category, date).
• amphtml_nav_menu - allows you to retrieve and update AMP Page navigation menu content.
• amphtml_no_amp_menu_link - allows you to retrieve and update the class of no AMP navigation menu element.
• amphtml_the_content - allows you to update list of allowed default the_content filters
• amphtml_logo_link - allows you to update logo link
• amphtml_rel_link_url - allows you to update url of related amphtml document
• amphtml_language_attributes - allows you to change or disable language attributes in <html> tag
• amphtml_template_footer - allows you to change footer content of AMP Page.

Example

1. Let's add support for SoundCloud:

add_action('amphtml_template_head', function() {
	echo '<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>';
});

2. Let's remove AMP endpoint ('/amp') from all navigation menu links with class 'no-amp':

add_filter('amphtml_no_amp_menu_link', function( $class ) {
	$class = 'no-amp';
	return $class;
});

3. Suppose you want to apply specified custom the_content callback:

add_filter( 'amphtml_the_content', 'add_the_content' );
function add_the_content ( $hooks ) {
    $priority = 10;
    $callback = 'update_content';
	$hooks[ $priority ][] = $callback;
	return $hooks;
}

4. Let's change logo link:

add_filter( 'amphtml_logo_link', 'my_functions_name', 1, 10 );
function my_functions_remove( $link ) {
    $link = 'http://www.example.com';
    return $link;
}

5. Let's remove language attributes:

add_filter('amphtml_language_attributes', '__return_false');

6. Let's insert ads after second paragraph:

add_filter('the_content', 'amphtml_content_ads');

function amphtml_content_ads($content) {

	// Your AMP ad code
	$ad_code = '<amp-ad> .... </amp-ad>';

	if ( is_single() && ! is_admin() ) {
		return insert_amp_ad_after_paragraph( $ad_code, 2, $content );
	}

	return $content;
}

function insert_amp_ad_after_paragraph( $insertion, $paragraph_id, $content ) {
	$closing_p = '</p>';
	$paragraphs = explode( $closing_p, $content );
	foreach ($paragraphs as $index => $paragraph) {

		if ( trim( $paragraph ) ) {
			$paragraphs[$index] .= $closing_p;
		}

		if ( $paragraph_id == $index + 1 ) {
			$paragraphs[$index] .= $insertion;
		}
	}

	return implode( '', $paragraphs );
}

---

E) Conditional Tags - top

The conditional tags of WP AMP and WordPress can be used in your template files to change what content is displayed based on what conditions the page matches.

1. Check if AMP page is opened:

is_wp_amp()

Returns true if an AMP page is requested.

---

F) Helper Functions - top

Helper functions of WP AMP can be used for preparing content in custom templates.

1. Escape AMPHTML content

Usage: <?php esc_amphtml( $content ) ?>

Description: Escaping for AMPHTML blocks.

Parameters:

• $content - Text to escape (required)

---

G) URL Params - top

List of URL params:

1. ?view-original-redirect=1

This URL param is used for accessing regular version of the page, if "Redirect all mobile users to AMP version by default" option enabled.

2. ?add-to-cart=[ID]

This is default WooCommerce URL param which allows adding product to cart via GET query.

3. ?add-to-cart-redirect=1

This URL param is used for adding to cart and accessing regular version of the product page, if "Redirect all mobile users to AMP version by default" option enabled.

---

H) Frequently Asked Questions - top

Does WP AMP have support of extended components out of box?

Here is a list of extended components available by default:

• amp-carousel
• amp-iframe
• amp-youtube
• amp-audio
• amp-vimeo
• amp-accordion
• amp-analytics
• amp-ad
• amp-social-share

What post types and pages does the plugin support out of box?

WP AMP plugin supports default post types, pages and archives - posts, pages, categories, tags, search, blog page, etc.

Is plugin compatible with Yoast SEO?

Yes, this plugin works fine with Yoast SEO plugin.

Does plugin has Google Analytics integration?

Yes, you can enable Google Analytics tracking by entering your GA code to the appropriate field under plugin general settings page.

Does plugin provide integration with WooCommerce?

Yes, plugin works fine with Product Pages, Product Archives, Shop Page. But Checkout and Cart Pages excluded from display because of AMP support of html form elements

Does plugin provide integration with All in One SEO Pack?

Yes, this plugin works fine with All in One SEO Pack.

Does plugin allow to show ads (AdSense)?

Yes, this plugin allow setup few different AdSense blocks.

Is it possible to rewrite post title, content, featured image for AMP?

Yes, you can rewrite post title, content, featured image from post edit page:

Is it possible to exclude some pages from AMP generation?

Yes, there is additional setting at post/page Edit Page:

Can I add support for additional extended component?

Yes, you can add support for additional extended components by hooking into 'amphtml_template_head' action.

How can I overwrite default template files?

Template files can be found within the "wp-content/plugins/wp-amp/templates" directory.
You can edit these files in an upgrade-safe way using overrides. Copy it into a directory within your theme named /wp-amp and feel free to edit this file.

---

I) Sources and Credits - top

We've used the following javascript and PHP libraries as listed.

• jQuery Mask Plugin from Igor Escobar.
• FastImage from Tom Moor
• PHP Simple HTML DOM Parser from S.C. Chen, John Schlick and Rus Carroll

All of these libraries are licensed under the MIT license.

---

Once again, thank you so much for purchasing this plugin. We would be glad to help you if you have any questions relating to this plugin. No guarantees, but we'll do our best to assist. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Custom4Web

Go To Table of Contents

---