I am writing a custom WordPress plugin, I am using the OceanWP Theme with Elementor, and am trying to enqueue/register Bootstrap 4.5 styles/scripts as well as my own custom styles/scripts.
However, OceanWP's styles are still taking precedence being used instead of my styles/scripts.
Currently, I am trying to over ride the themes assets by upping the priority in the add_action hook but am not having any luck.
I am trying to display a custom multi-part form and display it on a page using a shortcode.
public function __construct()
{
//set dirpath
$this->_dirpath = dirname(__FILE__);
add_action('wp_enqueue_scripts', array($this, 'cmmc_styles'), 9999);
add_action('wp_footer', array($this, 'cmmc_scripts'));
add_shortcode("sme-cmmc-form", array($this, "displayCmmcForm"));
}
public function cmmc_scripts()
{
///wp_enqueue_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all');
wp_enqueue_script('popper_js', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js', array('jquery'), NULL, true);
wp_enqueue_script('bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'), NULL, true);
wp_enqueue_script('cmmc_js', plugin_dir_url( __FILE__ ) . 'assets/js/app.js', array('jquery'), '1.0' );
//wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));
}
public function cmmc_styles() {
wp_register_style('bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_style('bootstrap_css');
wp_enqueue_style('custom_styles', plugins_url('/assets/css/styles.css', __FILE__));
}
Can someone please tell me how I could possibly over ride the themes styles, even if it is just for this plugin, or dequeue the styles for this single page temporarily?
EDIT: to add in the enqueued styles and scripts from the theme
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'theme_css' ) );
// Load his file in last.
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'custom_style_css' ), 9999 );
// Remove Customizer CSS script from Front-end.
add_action( 'init', array( 'OCEANWP_Theme_Class', 'remove_customizer_custom_css' ) );
// Load theme js.
add_action( 'wp_enqueue_scripts', array( 'OCEANWP_Theme_Class', 'theme_js' ) );
/**
* Load front-end scripts
*
* @since 1.0.0
*/
public static function theme_css() {
// Define dir.
$dir = OCEANWP_CSS_DIR_URI;
$theme_version = OCEANWP_THEME_VERSION;
// Remove font awesome style from plugins.
wp_deregister_style( 'font-awesome' );
wp_deregister_style( 'fontawesome' );
// Load font awesome style.
wp_enqueue_style( 'font-awesome', OCEANWP_THEME_URI . '/assets/fonts/fontawesome/css/all.min.css', false, '5.11.2' );
// Register simple line icons style.
wp_enqueue_style( 'simple-line-icons', $dir . 'third/simple-line-icons.min.css', false, '2.4.0' );
// Register the lightbox style.
wp_enqueue_style( 'magnific-popup', $dir . 'third/magnific-popup.min.css', false, '1.0.0' );
// Register the slick style.
wp_enqueue_style( 'slick', $dir . 'third/slick.min.css', false, '1.6.0' );
// Main Style.css File.
wp_enqueue_style( 'oceanwp-style', $dir . 'style.min.css', false, $theme_version );
// Register hamburgers buttons to easily use them.
wp_register_style( 'oceanwp-hamburgers', $dir . 'third/hamburgers/hamburgers.min.css', false, $theme_version );
// Register hamburgers buttons styles.
$hamburgers = oceanwp_hamburgers_styles();
foreach ( $hamburgers as $class => $name ) {
wp_register_style( 'oceanwp-' . $class . '', $dir . 'third/hamburgers/types/' . $class . '.css', false, $theme_version );
}
// Get mobile menu icon style.
$mobileMenu = get_theme_mod( 'ocean_mobile_menu_open_hamburger', 'default' );
// Enqueue mobile menu icon style.
if ( ! empty( $mobileMenu ) && 'default' !== $mobileMenu ) {
wp_enqueue_style( 'oceanwp-hamburgers' );
wp_enqueue_style( 'oceanwp-' . $mobileMenu . '' );
}
// If Vertical header style.
if ( 'vertical' === oceanwp_header_style() ) {
wp_enqueue_style( 'oceanwp-hamburgers' );
wp_enqueue_style( 'oceanwp-spin' );
}
}
/**
* Returns all js needed for the front-end
*
* @since 1.0.0
*/
public static function theme_js() {
// Get js directory uri.
$dir = OCEANWP_JS_DIR_URI;
// Get current theme version.
$theme_version = OCEANWP_THEME_VERSION;
// Get localized array.
$localize_array = self::localize_array();
// Comment reply.
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
// Add images loaded.
wp_enqueue_script( 'imagesloaded' );
// Register nicescroll script to use it in some extensions.
wp_register_script( 'nicescroll', $dir . 'third/nicescroll.min.js', array( 'jquery' ), $theme_version, true );
// Enqueue nicescroll script if vertical header style.
if ( 'vertical' === oceanwp_header_style() ) {
wp_enqueue_script( 'nicescroll' );
}
// Register Infinite Scroll script.
wp_register_script( 'infinitescroll', $dir . 'third/infinitescroll.min.js', array( 'jquery' ), $theme_version, true );
// WooCommerce scripts.
if ( OCEANWP_WOOCOMMERCE_ACTIVE
&& 'yes' !== get_theme_mod( 'ocean_woo_remove_custom_features', 'no' ) ) {
wp_enqueue_script( 'oceanwp-woocommerce', $dir . 'third/woo/woo-scripts.min.js', array( 'jquery' ), $theme_version, true );
}
// Load the lightbox scripts.
wp_enqueue_script( 'magnific-popup', $dir . 'third/magnific-popup.min.js', array( 'jquery' ), $theme_version, true );
wp_enqueue_script( 'oceanwp-lightbox', $dir . 'third/lightbox.min.js', array( 'jquery' ), $theme_version, true );
// Load minified js.
wp_enqueue_script( 'oceanwp-main', $dir . 'main.min.js', array( 'jquery' ), $theme_version, true );
// Localize array.
wp_localize_script( 'oceanwp-main', 'oceanwpLocalize', $localize_array );
}