Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

critical css in wordpress

l am trying to implement the idea of critical css in wordpress and came up with the below code:

<?php global $critical;  
          elseif ($critical): ?>  
          $critical = 'http://phld.bluestone98.com/css/critical.css';
              <style><?php echo $critical ?></style>

              <script>
                  // minified loadCSS function
                  function loadCSS(e,n,o,t){"use strict";var d=window.document.createElement("link"),i=n||window.document.getElementsByTagName("script")[0],s=window.document.styleSheets;return d.rel="stylesheet",d.href=e,d.media="only x",t&&(d.onload=t),i.parentNode.insertBefore(d,i),d.onloadcssdefined=function(n){for(var o,t=0;t<s.length;t++)s[t].href&&s[t].href.indexOf(e)>-1&&(o=!0);o?n():setTimeout(function(){d.onloadcssdefined(n)})},d.onloadcssdefined(function(){d.media=o||"all"}),d}
                      loadCSS("<?php echo get_template_directory_uri(); ?>/css/uncritical.css");
              </script>
              <noscript><link href="<?php echo get_template_directory_uri(); ?>/css/uncritical.css" rel="stylesheet"></noscript>

              // Set cookie here
          <?php else: ?>  
              <link href="<?php echo get_template_directory_uri(); ?>/css/main.css" rel="stylesheet">
          <?php endif; ?>

However on viewing the source code for my side l can't see my critical css and can only see my main.css . Is there anything am doing wrong here?

1 Answer

peyton caseria
PLUS
peyton caseria
Courses Plus Student 12,281 Points
peyton caseria
peyton caseria
Courses Plus Student 12,281 Points

you have uncritical css in a few places, but it looks like thats on purpose.

It looks like a rookie mistake but I'm not sure,

change this: <?php else: ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/main.css" rel="stylesheet"> <?php endif; ?>

to this: <?php else: ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/critical.css" rel="stylesheet"> <?php endif; ?>

I think you just never changed the css file name here.

Rep me if this works, if not I'll try to help more.

peyton caseria
peyton caseria
Courses Plus Student 12,281 Points

Great looking code by the way, Nice job !