0

I'm a Javascript developer and I am very new to PHP/Wordpress. So just like what I saw from samples around the internet I wrote my functions.php script to add my custom css file like this:

functions.php

<?php
  echo '<h1>CASH ME OUTSIDE</h1>';

  add_action('wp_enqueue_scripts', 'theme_styles');
  function theme_styles() 
  {
    echo '<h1>CASH ME INSIDE</h1>';
    wp_enqueue_style('theme_styles', get_template_directory_uri() . '/foo.css');
  }
?>

To check if the functions.php is being called I printed <h1>CASH ME OUTSIDE</h1> and it did appear. How ever the echo inside the function theme_styles() is not being printed which leads me to the conclusion that the function is not being called.

  • 1
    A echo in functions.php, wp_enqueue_scripts or any other non-template file probably breaks the output due to a fatal error because of headers already sent. echo is not a proper way to debug. Delete the echo statements and check the HTML of the page, your css should be there. To debug, use error logs. Other than that, your code seems correct; be sure to include wp_head() and wp_footer() in your theme. – cybmeta Jan 30 '18 at 10:47
4

A echo in functions.php, wp_enqueue_scripts or any other non-template file probably breaks the output due to a fatal error because of headers already sent. echo is not a proper way to debug. Delete the echo statements and check the HTML of the page, your css should be there. To debug, use error logs.

Other than that, your code seems correct; be sure to include wp_head() and wp_footer() in your theme. Those functions are needed to print the enqueued scripts and styles; then just do this:

 add_action('wp_enqueue_scripts', 'theme_styles');
 function theme_styles() {

    // You can use error_log, a native PHP function,
    // or any other custom log function
    if( WP_DEBUG ) {
        error_log('some debug information');
    }

    wp_enqueue_style('theme_styles', get_template_directory_uri() . '/foo.css');
  }
  • 1
    Thanks cymeta. Very well explained. I was missing the wp_header() part. – CENT1PEDE Jan 30 '18 at 10:54
3

View source for your website and CTRL+F for foo.css. wp_enqueue_scripts registers script / style and loads it on your website, it doesn't echo anything. Header.php must have wp_head() tag, and footer.php must have wp_footer() tag.

  • No, it wasn't there. :/ Weird. Also the echo should be called when the function is called. – CENT1PEDE Jan 30 '18 at 10:27
  • I'm not echoing the styles. Im echoing the h1 just to test if the function is being invoked. – CENT1PEDE Jan 30 '18 at 10:28
  • Just to make sure, you do have foo.css in your template folder? Can you turn on WP-DEBUG to true in your wp-config.php file and see if there are any errors? – Zex2911 Jan 30 '18 at 10:34
  • WP-DEBUG is already set to true and no there were no errors, and Im 100% sure that the the path is correct. :/ – CENT1PEDE Jan 30 '18 at 10:35
  • Can you try it like this ` function cent1pede_register_plugin_styles() { wp_register_style( 'theme-styles', get_template_directory_uri() . '/foo.css') ); wp_enqueue_style( 'theme-styles' ); } // Register style sheet. add_action( 'wp_enqueue_scripts', 'cent1pede_register_plugin_styles' ); ` – Zex2911 Jan 30 '18 at 10:37
1

enqueue_scripts() is not a hook which actually outputs anything by itself as it is run before the page is constructed - any output you put in there (which you shouldn't anyway) will be wiped away when the page is displayed. What it does is to add your script files to the list of scripts which will be printed by the wp_head() or wp_footer() functions.

The best way to test a non-printing hook is to add something like

echo "<h1>CASH ME INSIDE</h1>"; wp_die();

the 2nd part of which will cause everything to come to an abrupt halt, thus not replacing your output with the actual page.

Hope that helps

  • After adding wp_header() in the header.php it all worked. But not like what you said the echo stayed and got printed anyways. It just for test anyway so I guess it's fine. Thanks for the tip. :) – CENT1PEDE Jan 30 '18 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.