CODEWITHSUNDEEP
csswordpressamp-html
Aness
Aness

Reputation: 670

How do I apply custom css styles only to Amp pages

I have a wordpress website which I am coverting to an AMP website for now I am using the amp plugin Now my website has a lot of css files and the style that I can inline is limited so I am trying to add a custom css using :

<style amp-custom>
 .someclass={/*my custom css I want it to affect only amp pages*/}

</style>

I can add the style without problem to all pages by adding it to the header.php file, Now The thing is I want this tyle to be applied only to my amp pages , they have a special urls (Adding ?amp at the end).

can I make it so that the custom css is only applied to the amp pages ?

Upvotes: 1

Views: 2015

Answers (3)

Farzad Yazdi
Farzad Yazdi

Reputation: 21

As the proposed solutions didn't work for me, I tried the one below and it works:

add_action( 'amp_post_template_css', function ( $amp_template ) {
    ?>
    .some-class {
        color: blue; /*Use Normal CSS Here! */
    }
    <?php
} );

Upvotes: 0

Sami Ahmed Siddiqui
Sami Ahmed Siddiqui

Reputation: 2386

You can use amp_post_template_css action if you are using this plugin.

function custom_post_template_css() {
  ?>
  .someclass={
    /*my custom css I want it to affect only amp pages*/
  }
  <?php
}
add_action( 'amp_post_template_css','custom_post_template_css', 11 );

Please refer to the Custom CSS for the documentation.

Upvotes: 3

Aness
Aness

Reputation: 670

A bit tricky but After I searched in the forums I found out that the amp plugins provides a method is_amp_endpoint() for knowing if the page is an Amp page so with a little PHP in the Wordpress theme header.file we can affect all the AMP pages .

<style amp-custom>
<?php
    if (is_amp_endpoint()){
        echo(".mypanel_class{color:white !important;}");
        echo("div#myid{display:none;}");
    }
    ?>
</style>

Upvotes: 0

Related Questions