I have a weird situation going on. I'm currently working on localhost. Wordpress seems to be enqueuing my stylesheet as a script. Below is a screenshot and and a snippet of the enqueue code. The stylesheet is also throwing errors in the console, as if being interpreted as a script.
if ( is_page_template( 'page-templates/fullpage-scroll-template.php' ) ) {
wp_register_script( 'fullpage-css', trailingslashit( get_template_directory_uri() ) . 'css/fullpage.css' );
wp_enqueue_script( 'fullpage-css' );
}
as prometheus pointed out there, it should be wp_enqueue_style NOT wp_enqueue_script
if ( is_page_template( 'page-templates/fullpage-scroll-template.php' ) ) {
wp_register_style( 'fullpage-css', trailingslashit( get_template_directory_uri() ) . 'css/fullpage.css' );
wp_enqueue_style( 'fullpage-css' );
}
Related
I want to include bootstrap inside my WordPress installation. I know how to include scripts and styles to a theme, but this isn't what I want.
I've looked to the WordPress core files and I've tried to add the bootstrap files to the script-loader.php file but they will not be loaded. Is there any way to add these files to the WordPress core loaded styles and scripts?
for example, I've added this line to the default wordpress stylesheet/script loader function:
$styles->add( 'bootstrap', "/includes/css/bootstrap$suffix.css" );
$scripts->add( 'bootstrap', "/includes/js/bootstrap$suffix.js", array( 'jquery' ) );
but this will not work.
I would do this by altering your functions.php in your current theme.
There are a 2 functions you should know about. The first one is to add CSS.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Documentation
The second one is to add JS
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
Documentation
Wordpress has a basic documentation on how to do it both:
Documentation
Eventually you going to have something like this:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Good luck!
I created two plugins for Wordpress. Both plugins have different scripts and stylesheets. To load this scripts I use this method:
class load_scripts{
function register_market(){
add_action( 'admin_enqueue_scripts', array($this, 'enqueue_admin_market') );
}
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}
}
if( class_exists( 'load_scripts')){
$load_scripts = new load_scripts();
$load_scripts->register_market();
}
Of course I used different function and class names.
Now the problem is if both plugins are activated the scripts are loaded from only one plugin.
I tried to do this, but does not work:
add_action( 'admin_enqueue_scripts', array($this, 'enqueue_admin_market'), 0 );
What can I do to solve this conflict?
Your issue lies on these two lines:
wp_enqueue_style( 'pluginstyle', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript', plugins_url( '/assets/backend-script.js', __FILE__ ) );
Namely, you probably have 'pluginstyle' and 'pluginscript' as the handles in both your plugins. The $handle parameter should be unique in accordance with the wp_enqueue_style() and wp_enqueue_script() function references. For example:
Plugin 1:
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle-1', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript-1', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}
Plugin 2:
function enqueue_admin_market(){
wp_enqueue_style( 'pluginstyle-2', plugins_url( '/assets/backend-style.css', __FILE__ ) );
wp_enqueue_script( 'pluginscript-2', plugins_url( '/assets/backend-script.js', __FILE__ ) );
wp_enqueue_media();
}
I have a wordpress local installation and I am trying to load scripts and styles with wp_enqueue but none of these are working, the front-end is not capturing any of the files,
Here is the code:
<?php
function all_the_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css' );
wp_enqueue_style( 'custom', get_template_directory_uri() . '/assets/css/custom.css' );
wp_enqueue_script( 'bootstrap.bundle', get_template_directory_uri() . '/assets/js/bootstrap.bundle.js' , array ( 'jquery' ) );
wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/assets/js/custom-scripts.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'all_the_scripts' );
?>
I have double checked everything, all the files are in the correct locations and all required arguments are given, but still no result.
I tried wp_register_script but they say that it is optional and not needed
Use
get_stylesheet_directory_uri()
instead of
get_template_directory_uri()
The get_template_directory_uri() reference to the parent theme if you're developing Child Themes, and get_stylesheet_directory_uri() returns the URI of the current theme.
I want the modified child theme site-banner1.css stylesheet to load after the parent theme so it overwrites the parent file with the changes. I am using the enqueue array() to try and push site-banner1.css to the end of the queue by inputting the last style id (CSS from a plugin) into the array function. Here is the code from functions.php:
<?php
if ( !defined( 'ABSPATH' ) ) exit;
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit(
get_template_directory_uri() ) . 'style.css', array( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
function my_theme_enqueue_styles() {
$parent_style = 'tesseract-site-banner';
wp_enqueue_style( $parent_style,
get_template_directory_uri() . '/css/site-banner.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/site-banner1.css',
array( $parent_style, 'tt-easy-google-font-styles')
); }
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles',99999 );
Currently site-banner1.css is visible in the source code but it is not the last stylesheet to load and so the changes are not visible. The parent site-banner.css is still visible in the dev tools with the styles. By adding the last CSS id into the array can I force site-banner1.css to load after it, I think code is missing from the array but not sure what? If this is incorrect what is the way to force the sheet to load at the end of the queue?
I managed to fix the problem using wp_deregister_style:
<?php
if ( !defined( 'ABSPATH' ) ) exit;
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit(
get_template_directory_uri() ) . 'style.css', array( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
add_action( 'wp_enqueue_scripts', 'load_alta_styles', 200 );
function load_alta_styles() {
wp_dequeue_style( 'tesseract-site-banner' );
wp_deregister_style( 'tesseract-site-banner' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() .
'/site-banner1.css' );
}
I'm working on to writing a Wordpress Plugin based on: http://wppb.io/
My issue is: I'm working on Public view and try to use Ajax to connect with backend.I'm use: public/js/ xxx-public.js to place all ajax function handle and Define some hooks:
wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/xxx-public.js', array( 'jquery' ), $this->version, false );
wp_register_script( 'district_handle', plugin_dir_url( __FILE__ ) . 'js/xxx-public.js', array( 'jquery' ), $this->version, false );
wp_enqueue_script( 'district_handle');
wp_register_script( 'ret_cus_handle', plugin_dir_url( __FILE__ ) . 'js/xxx-public.js' , array( 'jquery' ), $this->version, false);
wp_enqueue_script( 'ret_cus_handle');
wp_register_script( 'order_ret_cus_handle', plugin_dir_url( __FILE__ ) . 'js/xxx-public.js', array( 'jquery' ), $this->version, false );
wp_enqueue_script( 'order_ret_cus_handle');
It works.
But problem is: the website will generate 4 xxx-public.js in header. I only want one.
I'm just a newbie with WP plugin. I hope to get your solution. Thank you in advance
You can use wordpress function wp_script_is() to determine if a script is enqueued already and use it in a conditional code like this below.
Make a function for scripts you want to enqueue first like this.
function custom-script( ) {
wp_enqueue_script('xxx-public.js');
}
Then write a conditional code.
if ( ! wp_script_is( 'custom-script', 'enqueued' ) ) {
// your code here
}
Make sure you check wp_script_is() from wordpress function references as it takes two parameters $handle and $list.
Hopes this helps for you.