WordPress: Why isn’t my stylesheet being enqueued?

I’m modifying an existing WP plugin by making a separate plugin that will extend it. I’d like to write CSS that will override the plugin. However, when I try to enqueue the stylesheet it doesn’t work. I know it doesn’t work because I added a simple form in the includes() and tried to style the words red in order to see a change. Why isn’t this working??

Note – I’m using the action hook plugins_loaded, which I read in the codex happens before wp_enqueue_script. So I don’t suspect that my enqueueing is missing the timing, but I’m new to WP dev so correct me if I’m wrong.

Read More

Update – Please see my updated CSS code below. The #id selector wasn’t coloring the text red by itself, but when I added the p (paragraph selector) it worked. Neither selector worked by itself, it only worked when I added both. Why is this?

find-do-for-anspress.php

if (! defined('WPINC')) {
    die;
}

Class Find_Do_For_Anspress {

    /**
     * Class instance
     * @var object
     * @since 1.0
     */
    private static $instance;

    /**
     * Get active object instance
     *
     * @since 1.0
     *
     * @access public
     * @static
     * @return object
     */
    public static function get_instance() {

        if ( ! self::$instance ) {
            self::$instance = new Find_Do_For_Anspress(); }

        return self::$instance;
    }
    /**
     * Initialize the class
     * @since 2.0
     */
    public function __construct() {

        if ( ! class_exists( 'AnsPress' ) ) {
            return; // AnsPress not installed.
        }
        if ( ! defined( 'FIND_DO_FOR_ANSPRESS_DIR' ) ) {
            define( 'FIND_DO_FOR_ANSPRESS_DIR', plugin_dir_path( __FILE__ ) ); 
        }

        if ( ! defined( 'FIND_DO_FOR_ANSPRESS_URL' ) ) {
            define( 'FIND_DO_FOR_ANSPRESS_URL', plugin_dir_path( __FILE__ ) );
        }

        $this->includes();

        add_action( 'wp_enqueue_scripts', array($this, 'fd_enqueue'));


}

    private function includes() {

        require_once (FIND_DO_FOR_ANSPRESS_DIR.'braintree/lib/braintree.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/fd-bt-keys.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/fd-process-trans.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/fd-bt-functions.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/fd-bt-form.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'includes/fd-ask-form.php');



    }

    public function fd_enqueue() {
        wp_enqueue_style( 'fd_for_anspress_css', FIND_DO_FOR_ANSPRESS_DIR.'css/fd-css.css', array(jquery), null); //handle, source, dependencies, version, media (the type of media for which the stylesheet is designed, e.g. mobile, web, print...)
        //wp_enqueue_script( 'fd_for_anspress_js', FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/js/fd-braintree-js.js', array(), null);  used require_once to directly add it to fd-bt-form.php
    } 

} //End class

function find_do_for_anspress() {
    $FDClassStart = new Find_Do_For_AnsPress();
}
add_action( 'plugins_loaded', 'find_do_for_anspress' );

        //HTML "testing" block
        echo '<p id="checkout">Testing the enqueued CSS</p>';

fd-css.css attempt 1

<style>
#checkout {
    color: red;
}
</style>

fd-css.css attempt 2

<style>
#checkout {

    color: red;
}

p {
    color: red;
}
</style>

Related posts

1 comment

  1. When you are are calling wp_enqueue_style you are passing array(jquery) as a dependency. With jquery being an invalid handle (it should be wrapped in quotes), the dependency is never loaded, so your stylesheet isn’t loaded

    That said, you likely don’t want any dependencies for you CSS. You would use this if you wanted to control the load order of your stylesheets, any handle you place here would be loaded before your script. If the handle is invalid, your script won’t be loaded.

    wp_enqueue_style( 'fd_for_anspress_css', FIND_DO_FOR_ANSPRESS_DIR.'css/fd-css.css' );
    

Comments are closed.