• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WBXPress.NET

Website Developement Guide

  • apache2
  • nginx
  • mysql
  • php7
  • SSL
  • wordpress
  • genesis
  • caching
  • seo

Accelerated Mobile Pages in WordPress

Updated on 2nd May 2017 1 Comment

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: https://wbxpress.net/favorite-wordpress-plugins/
AMP version url: https://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

Filed Under: google, wordpress Tagged With: Accelerated Mobile Pages, caching, plugin-review

Reader Interactions

Comments

  1. Akash says

    11th June 2017 at 10:39 pm

    hy bro need your help im using genblog theme but i want some custemization on it like supportmeindia.com/blog/ my site sharmatricks.com plzz chack and help me.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Most Popular Posts

  • Remove/ Defer Render-blocking JavaScripts
  • Customizing Genesis eleven40-pro Theme
  • Free Genesis Child Theme by WBXPress
  • Host Multiple Sites with SSL in Ubuntu 18.04
  • 25 Ways to Boost Website Traffic that Really Work

Recent Comments

  • Ruhul on Customizing Genesis eleven40-pro Theme
  • Priya Agarwal on Customizing Genesis eleven40-pro Theme
  • mimi roy on Remove/ Defer Render-blocking JavaScripts
  • danish choudhary on Customizing Genesis eleven40-pro Theme
  • Radhe on Customizing Genesis eleven40-pro Theme

Copyright © 2021 · Powered by WordPress · Log in