I'm working on a project that I have a child-theme on which I'm running specific functions from the function.php file.
My problem is that when I try to add an if condition to only run the script on a specific page, it doesn't work.
I'm using the functions.php from the child theme.
In other words... I need to be able to get the current page on the child theme.
What am I doing wrong?
add_action(
'init', function() {
if (is_page('contact')) {
wp_register_script( 'my-func', get_stylesheet_directory_uri() . 'my-func.js', '', '', false );
wp_enqueue_script( 'my-func' );
}
}
);
Thanks
for theme code will go to your functions.php file and for plugin code will go to the public functions.
add_action( 'wp_enqueue_scripts', 'my_assets' );
function my_assets()
{
if (is_page('booking')) {
/* for plugin */
wp_enqueue_style($this->plugin_name, plugin_dir_url(__FILE__) . 'css/custom.css', array(), $this->version, 'all');
/*for theme */
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
}
Related
So I have this Child Theme and when I try to enqueue the styles and the javascript I run into an error:
wp_enqueue_script is working fine
wp_enqueue_style doesn't work at all
wp_head() is included in the header and it worked before, but after updating Avast theme and wordpress the problem started to occurre.
functions.php
function theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css'); //not working
wp_enqueue_style( 'fancy', get_stylesheet_directory_uri() . '/css/jquery.fancybox.min.css'); //not working
wp_enqueue_script( 'devtools', get_stylesheet_directory_uri() . '/js/main.min.js' ); //working
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Check out the wordpress child themes documentation.
There you can find this line
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'parenthandle' ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}
in my wp theme I'm trying to enqueue a js script. When I load the source code of my page it is nowhere to be seen.
my functions.php looks like this:
#LOAD JS
function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', '', true);
wp_enqueue_script ('customjs', '/js/scripts.js','','',true);
}
add_action('wp_enqueue_scripts', 'load_js');
I already checked if my footer was included and if the file path is correct.
Try this code in functions.php
function wpdocs_scripts_method() {
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ) ); //Parent theme
wp_enqueue_script( 'Customc-script', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ) ); // Child Theme
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
You can do it in two ways :
First Way :
function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', '', true);
wp_enqueue_script ('customjs');
}
add_action('wp_enqueue_scripts', 'load_js');
Second Way :
function loadjs()
{
wp_enqueue_script ('customjs',get_template_directory_uri() . '/js/scripts.js', array());
}
add_action('wp_enqueue_scripts', 'load_js');
Hope the above solutions will work for you.
Function.php
function loadjs()
{
wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/scripts.js', array(), '', true );
}
add_action('wp_enqueue_scripts', 'load_js');
if you have use child-theme
Try this code in functions.php
function loadjs()
{
wp_enqueue_script('custom-script', get_bloginfo('stylesheet_directory') . '/js/scripts.js', array(), '', true );
}
add_action('wp_enqueue_scripts', 'load_js');
All of above answers can't spot the different of load_js and loadjs. Change it to the same and see it's work.
I want to call a jQuery from my functions.php in WordPress.
I'm using Divi Theme. When I add the script directly into Divi theme it works. But I want to add it to the functions.php form my child theme and this is where the problem start.
Functions.php
function coolbanner_enqueue() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
Script:
jQuery(document).ready(function(){
jQuery('#cta-section').waypoint(function() {
jQuery('#cta-section').toggleClass('animate-cta');
}, {offset: '80%'});
});
Can somebody point out what I'm doing wrong?
Seems like you're missing the jQuery Waypoint JS file
Try enqueueing the jquery waypoint js file BEFORE using your custom script
function coolbanner_enqueue() {
wp_enqueue_script( 'jquery-waypoint', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js', [ 'jquery' ] );
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery-waypoint' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
you can find the jquery waypoint github repo here...
https://github.com/imakewebthings/waypoints
Additionally the url I used below is from a cdn which you can find here:
https://cdnjs.com/libraries/waypoints
if you feel more comfortable using the github's url
then just substitute the cdn url with the following...
https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js
Solution:
function coolbanner_enqueue() {
wp_enqueue_script( 'custom-scripts-js', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
I'm trying to make a child theme off the html5blank theme. I've managed to get my child theme CSS working using the following:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
}
?>
But the styles from the parent are still inherited. These are style.css and normalize.css. I have no need for these files at all.
So I've been told I need to use wp_dequeue_style(). to "remove parent enqueued files with wp_dequeue_style()" and add your hook with a later priority than the default 10. This is a third, optional parameter for add_action(). Something like 100.
Unfortunately I'm really struggling with this basic task, I've tried but I can't get it working. I tried the following but obviously it's totally wrong!
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
wp_dequeue_style( 'parent-style-css', get_template_directory_uri() . '/style.css', 100 );
wp_dequeue_style( 'parent-normalize-css', get_template_directory_uri() . '/normalize.css', 100 );
}
?>
Can anyone help with this? I'm sure it's straight forward but I don't have a clue!
Also, I'm guessing if I don't need the JS from the parent either as I'll use that in my child them, I guess I'd use the methods to enqueue/dequeue them?
EDIT
Is this more like it...
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
wp_dequeue_style( 'normalize');
wp_dequeue_style( 'html5blank');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts', 100 );
function my_theme_enqueue_scripts() {
wp_deregister_script( 'conditionizr');
wp_deregister_script( 'modernizr');
wp_deregister_script( 'html5blankscripts');
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.12.0.min.js', array('jquery'), '1.12.0'); // Custom scripts
wp_enqueue_script('jquery'); // Enqueue it!
wp_register_script('responsive-nav', get_template_directory_uri() . '/js/responsive-nav.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('responsive-nav'); // Enqueue it!
wp_register_script('uniform-js', get_template_directory_uri() . '/js/jquery.uniform.min.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('uniform-js'); // Enqueue it!
wp_register_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('main-js'); // Enqueue it!
}
?>
The instructions were simply telling you to change this...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
into this...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
The full method call is...
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
Only the first two are required, the others have defaults they will use in case you leave them blank.
Also, to dequeue, you only need the name of the parent identifier, not all of the file details.
wp_dequeue_style( 'name-of-identifier-in-parent-theme' );
It looks like you put the priority on the wrong function call.
And Yes, you can dequeue javascript files as well using this method.
I am making my first custom wordpress theme and am running into problems with functions.php
I am using bootstrap too so i want to include bootstrap stylesheets to wp i currently do it this way-:
style.css
#import url('css/bootstrap.css');
#import url('css/font-awesome.css');
I understand that i can use functions.php to do the same, so i wrote a custom function and tried to do it like this-:
functions.php
<?php
/* Theme setup */
require_once('wp_bootstrap_navwalker.php');
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/css/bootstrap.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri().'/css/font-awesome.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri().'/js/bootstrap.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
?>
This does not seem to work. Neither does functions.php load the wp jquery or the bootstrap.js
Can anyone shed some light onto this matter for me? I would be ever grateful. This is not a child theme its a custom theme.
Try registering your scripts before you enqueue them. For example:
function my_enqueue_scripts() {
// Register Bootstrap JS.
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), NULL, true );
// Enqueue Bootstrap JS.
wp_enqueue_script( 'bootstrap-js' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );