Search code examples
phpwordpressamp-html

Display Wordpress enqueue style css files in inline?

Hi everybody I have this Wordpress website that I want to transform into an AMP website, one of the challnging task is to rewrite the css in inline.

So in the wordpress framework we have this functions.php file and inside we have the wp_enqueue_style function. 

/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_mytheme_styles() {
  wp_enqueue_style( 'style', get_stylesheet_uri() . '/css/style.css' );}

  add_action( 'wp_enqueue_scripts', 'wpdocs_mytheme_styles' );

Basically Wordpress will give us this line on out front end pages

<link rel='stylesheet' id='style'  href='Path_to/css/stle.css' type='text/css' media='all' />

Can I change this display mechanism to make Wordpress display the registered styles in **INLINE this way :**

<style amp-custom>
<!-- The content of the style.css -->
<!-- .... -->

</style>

Yeah basically i have a lot of these files and I don't want to make a static change by opening each one and copy/pasting content n the header any idea?

Solution

  • You could do like this: 

    <style amp-custom>
  {% include "/assets/css/main.min.css" %}
 </style>

    OR,

    <style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }
      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>

    Reference : AMP-DEV