Function added using `add_action()` not being called

Question

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.

Answer 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. 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');
  }

Answer 2

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.

Answer 3

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