In main theme functions.php I have :
wp_enqueue_script( 'template', get_template_directory_uri() . '/js/template.js', array('jquery'), '', true );
In child theme functions.php I've added :
add_action( 'wp_enqueue_scripts', 'remove_main_script' );
function remove_main_script()
{
wp_dequeue_script('template');
}
The file template.js is still loaded. How can I remove it?
You should add a priority to add_action() (10 is the default), to ensure that the parent styles and scripts are registered before you deregister them via your child theme:
add_action( 'wp_enqueue_scripts', 'remove_main_script', 20 );
function remove_main_script()
{
wp_dequeue_script('template');
}
Related
I need to include some external css files, i use this snippet in functions.php but neither of them works.. Why..?
add_action( 'wp_enqueue_scripts', 'add_css' );
function add_css() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'style', get_template_directory_uri().'/assets/css/bootstrap.css' );
}
I'm using Twenty-Twenty-One child theme
This is my style.css
/*Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: the WordPress team
Author URI: https://wordpress.org/
*/
h2{
color:red!important;
} */
h2 is to see if it works.
If you're using a child theme, you want to use get_stylesheet_directory_uri() instead of get_template_directory_uri - Unless the stylesheets are part of the parent theme.
function add_css() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri().'/style.css' );
wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/assets/css/bootstrap.css' );
}
Depending on how your parent theme loads it's styles your function will vary. You can check the Enqueue stylesheet section in the Theme handbook for more clarification. Below is their example if the parent theme loads its style using a function starting with get_stylesheet
Make sure you are using the correct parent handle, 'parent-style' is used for TwentyFifteen theme for example.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
You should also look at the wp_enqueue_style code reference as the handle for your bootstrap style should probably not be style as it needs to be unique e.g. bootstrap-style
I'm working on a WordPress plugin which works perfectly if I insert the shortcode in a page or an article, but if I insert the shortcode in a widget area the .js and .css files aren't loaded.
//CUSTOM JS FUNCTIONS
add_action( 'wp_enqueue_scripts', 'my_functions' );
function my_functions() {
wp_register_script( 'my-script-1', plugin_dir_url( __FILE__ ) . 'js/functions.js', array( 'jquery' ), '1.0', true );
}
//CUSTOM CSS
add_action( 'wp_enqueue_scripts', 'my_css' );
function my_css() {
wp_register_style('my-css', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
//INCLUDE JS IF SHORTCODE EXIST
add_action( 'wp_print_styles', 'form_my_include' );
function form_my_include() {
global $post;
if (strstr($post->post_content, 'my_form_shortcode')) {
wp_enqueue_script('my-script-1');
wp_enqueue_style('my-css');
}
}
//SHORTCODE
function my_shortcode_add(){
ob_start();
include("include/my_function.php");
return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_shortcode_add');
// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');
You need to enqueue your script and stylesheet directly inside the shortcode. You can also load both the script and stylesheet inside the same wp_enqueue_scripts() hook.
//CUSTOM JS FUNCTIONS
add_action( 'wp_enqueue_scripts', 'my_scripts_and_stylesheets' );
function my_scripts_and_stylesheets() {
wp_register_script( 'my-script-1', plugin_dir_url( __FILE__ ) . 'js/functions.js', array( 'jquery' ), '1.0', true );
wp_register_style('my-css', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
//SHORTCODE
function my_shortcode_add(){
wp_enqueue_script('my-script-1'); //loaded here
wp_enqueue_style('my-css'); //loaded here
ob_start();
include("include/my_function.php");
return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_shortcode_add');
// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');
Your current code grabs to content inside post, and checks for the shortcode in there. Depending on where your shortcode is called, it might not actually be present in the post content, despite being present on the page.
By adding the wp_enqueue_script() & wp_enqueue_style() to your shortcode function, it will enqueue your whenever your shortcode is present on a page, regardless of where on the page it is.
Add this code to your plugin.
// Enable shortcodes in text widgets
add_filter('widget_text','do_shortcode');
This code simply adds a new filter allowing shortcodes to run inside widget.
I'm using a child theme and need to enqueue the stylesheet for a slider. The css file is located in a folder in the parent theme directory, i.e. /parent-theme/css/flexislider.css
I created the child theme using a plugin which added a functions.php file to the child theme directory with the following code:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style')
);
}
I assume I have to add another entry to the above function referencing flexislider.css but I'm not quite sure how to do it.
*UPDATED
Based on what you added to the question, you should be able to just add to that function and register the stylesheet. The full function would look like this:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style')
);
wp_enqueue_style('flex-slider',get_template_directory_uri() . '/css/flexislider.css');
}
I don't have much experience with child-themes, but following the model in that function, I think get_template_directory points to the parent theme and not the child theme, which you said the flexislider code is located
https://github.com/320press/wordpress-bootstrap
How do I add custom.js to this theme? I'm not very good at gruntjs. Let's say it's path is library/js/custom.js
Here's the gruntfile: https://github.com/320press/wordpress-bootstrap/blob/master/Gruntfile.js
Thank you!
Why do not you use enqueue to embed script into your theme. Create a function in function.php file as
/**
*Enqueue styles.
*/
function add_scripts() {
wp_register_script( 'customScript', get_template_directory_uri() . 'library/js/custom.js', array(), '1.0.0', true );
// here it is just example of path. you can use yours.
wp_enqueue_script( 'customScript' );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );
I want to use the jQuery-ui .accordion function in a WordPress child theme. So far I've:
created a js file in my child theme directory and put it in no-conflict mode:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion();
});
Enqueued the script into my functions.php file: function myChild_scripts() {
wp_enqueue_style( 'onepage-child-style', get_stylesheet_uri() );
wp_enqueue_script( 'onepage-child-accordion', get_stylesheet_uri() . '/js/accordion.js', array('jquery-ui-accordion', 'jquery'), 20150507, true );
Added the add_action function: add_action( 'wp_enqueue_scripts', 'myChild_scripts' );
However, the .accordion function is also dependent on jquery-ui.css. Don't I also need to include that in the enqueueing process? I can find no documentation that discusses inclusion of this file - or whether it's already part of WP core.
You can enqueue a stylesheet in the functions.php file. It may be something like this (assuming your file is in your theme directory, inside a css folder).
function my_styles()
{
wp_register_style( 'jquery-ui-style', get_template_directory_uri() . '/css/jquery-ui.css', 'all' );
wp_enqueue_style( 'jquery-ui-style' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );
Here's some reference.