Accelerated Mobile Pages in WordPress

Accelerated Mobile Pages (AMP) is a Google backed project for faster delivery of your website content to the mobile device users. Google search engine also marks such websites with a symbol (a lighting symbol).

To know more about the project AMP visit: https://www.ampproject.org/

Implementing AMP for wordpress site is super easy. You need to install AMP plugin.

After installation of the plugin append url of any post with /amp to check the mobile version of the content.

Normal example URL: http://wbxpress.net/favorite-wordpress-plugins/
AMP version url: http://wbxpress.net/favorite-wordpress-plugins/amp/

Now, there are certain things you may wish to customize.

1. Customize the footer area:

=>

To remove the credit link, open \plugins\amp\templates\footer.php and remove the following selected code (line 4 to 6).

Next open \plugins\amp\templates\style.php and remove the following selected code (line 361 to 366).

Also change the margin

.amp-wp-footer h2 {
	font-size: 1em;
	line-height: 1.375em;
	margin: 0; // change to 0
}

2. Change Categories and Tags texts

Open \plugins\amp\templates\meta-taxonomy.php and change the texts (line 4 and 17).

3. Remove Author and Date Meta of Posts

Open \plugins\amp\templates\single.php and remove line 21 as shown:

4. Insert Google Adsense below Post Title and above the Content

To add the adsense code below post title and above the post content, open theme functions.php file and add the following code:-

/**
 * Add the AMP Ad script to AMP pages.
 */
function isa_load_amp_adsense_script( $data ) {
    $data['amp_component_scripts']['amp-ad'] = 'https://cdn.ampproject.org/v0/amp-ad-0.1.js';
    return $data;
}
add_filter( 'amp_post_template_data', 'isa_load_amp_adsense_script' );

/**
 * Add Google Adsense code to AMP above the content
 */
add_action( 'pre_amp_render_post', 'isa_amp_add_content_filter' );
 
function isa_amp_add_content_filter() {
    add_filter( 'the_content', 'isa_amp_adsense_above_content' );
}
 
function isa_amp_adsense_above_content( $content ) {
 
    $publisher_id = 'ca-pub-9114389529631234';
 
    $ad_slot = '5506321234';
 
    // Add Adsense ad above AMP content
    $ad_code = '';
 
    return $ad_code . $content;
}

Change the publisher id and ad slot with your own.

That’s it.

Troubleshooting: Google structured data testing tool reports the following error.

1. A value for the logo field is required.

You need to select a logo from theme customize option.

2. A value for the image field is required.

Posts having no featured image will show such an error. In that case you need to select a default featured image for the posts having no featured image set. For this install this plugin: Default Featured Image