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.

Improve this question
1
  • 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. Commented Jan 30, 2018 at 10:47

3 Answers 3

Reset to default
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');
  }
Improve this answer
1
  • 1
    Thanks cymeta. Very well explained. I was missing the wp_header() part. Commented Jan 30, 2018 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.

Improve this answer
8
  • No, it wasn't there. :/ Weird. Also the echo should be called when the function is called. Commented Jan 30, 2018 at 10:27
  • I'm not echoing the styles. Im echoing the h1 just to test if the function is being invoked. Commented Jan 30, 2018 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? Commented Jan 30, 2018 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. :/ Commented Jan 30, 2018 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' ); ` Commented Jan 30, 2018 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

Improve this answer
1
  • 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. :) Commented Jan 30, 2018 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.