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.
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>
When you are are calling
wp_enqueue_style
you are passingarray(jquery)
as a dependency. Withjquery
being an invalid handle (it should be wrapped in quotes), the dependency is never loaded, so your stylesheet isn’t loadedThat 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.