add custom CSS in amp paired mode

Sure. You can add code like this to your theme’s functions.php:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
        wp_enqueue_script( 'my-amp-styles' );
    }
} );

Note that it’s wp_enqueue_style() for stylesheets ??

Thank you very much, it has worked for me.

I share my final solution for those who have asked me the same thing:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {

  		wp_register_style( 'custom-style',
    		get_template_directory_uri() . '/css/custom-style.css',
    		array(),
    		'20190118',
    		'all' );
		wp_enqueue_style( 'custom-style' );
    }
} );

I’m also trying to get this to work. I’m using paired mode but I want to override some of my theme styles only on amp pages. I’m using a child theme. Could you please provide an example of registering a stylesheet such as my-amp-styles.css that is placed in the same directory as the child theme’s style.css. I can’t seem to get it to work. Thanks!

@rsmith4321 use the code above but replace get_template_directory_uri() with get_stylesheet_directory_uri().

Thanks, this is what worked for me. Also I figured out I had to flush my redis object cache to see the changes. This would be a great option to add to the plugin, just a dialog to enter some amp only css rules.

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {

  		wp_register_style( 'amp-style',
    		get_stylesheet_directory_uri() . '/amp-style.css');
		wp_enqueue_style( 'amp-style' );
    }
} );

• This reply was modified 5 years, 9 months ago by rsmith4321.

You can also use Custom CSS in the Customizer. Just use html[amp] as the root selector. Naturally this only works in Paired and Native modes.

• This reply was modified 5 years, 9 months ago by Weston Ruter.