I have avada theme, and I created child theme, how to add my custom js file in child theme.
I tried using this video tutorial, but without success
https://www.youtube.com/watch?v=4xbvhXj72kU
Can you help me!
Here is best way to include custom js in child theme:
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
You can use the wp_enqueue_script() function.
documentation: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
This function allows you to load scripts at any given time.
Create a folder in child theme and upload your JS file to that folder.
You can include a js file using
wp_enqueue_script()
or you can use
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/filename.js" type="text/javascript"></script>
add the above code in theme header.php or footer.php
Related
i want to add unique script if script file already there its not been added
i have used following js file
jquery.min.js
slick.min.js
custome.js
but jquery.min.js have conflict with already added by wordpress and when i remove this js file than$not define error come so can i resolve this
My code is here
wp_register_script('jquery_js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js');
// wp_register_script('jquery', plugins_url('js/jquery.min.js', __FILE__),array(),null,true );
wp_enqueue_script('jquery_js');
wp_register_script('slick', plugins_url('js/slick.min.js', __FILE__), array('jquery_js'));
wp_enqueue_script('slick');
wp_register_script('custome', plugins_url('js/custome.js', __FILE__), array('jquery_js'),null,true);
wp_localize_script('custome','ajax_object',array(
"ajax_url" => admin_url("admin-ajax.php"),
"base_url" => esc_url( plugins_url( 'img', __FILE__ ) )
));
wp_enqueue_script('custome');
What you can try is first to deregister the jquery that comes with WP and then register the new one. I would also recommend you to actually download your jquery.js, instead of trying to load it through CDN. So your function would look something like:
wp_register_script(
wp_deregister_script('jquery');
wp_enqueue_script( 'jquery-3.2.1.min', get_theme_root_uri() . '/my_theme_folder/path_to_jquery/jquery-3.2.1.min.js', true);
//and so on
//and so on
);
wp_enqueue_script('custome');
I want to use a external JS library on wordpress, how I should add it to my wordpress libraries. The library is viewerjs.
Taken from the documentation:
https://developer.wordpress.org/themes/basics/including-css-javascript/
Enqueue the script or style using wp_enqueue_script() or
wp_enqueue_style()
Example:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
Use enqueue styles code
<?php
function add_theme_codes() {
wp_enqueue_style( ‘style’, ‘your external file url goes here’, ‘all’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
make sure that you have included wp_head tag in head tag
I am trying to include a jquery library in my code and I did this:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.js"></script>
This works perfectly fine and I got what I needed but then I try to enqueue wordpress's preloaded jquery library like this:
function my_switchbutton_function(){
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-core');
}
add_action('admin_enqueue_scripts', 'my_switchbutton_function');
But this is not working I don't know why...I need to enqueue style too ?
versioning is same 1.11.4 in both cdn and preloaded js.
Is there any other script too that I need to enqueue ?
You need to define js filepath in the function
Example:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() .
'/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Replace get_template_directory_uri with get_stylesheet_directory_uri if you are using child theme and your file path is in child theme
Try this
add_action('wp_enqueue_scripts', 'myjs'); // add at front side
add_action('admin_enqueue_scripts', 'myjs'); // to add at admin side
function myjs() {
wp_enqueue_script('google-maps', '//ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.js', array(), '3', true);
}
I hope this will help to solve your Question
<?php
function twentyseventeen_child_enqueue_scripts() {
wp_enqueue_script( 'jquery-js', get_stylesheet_directory_uri() . '/assets/css/jquery.min.js');
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_scripts');
?>
I am having a wordpress website and some custom javascript. However my goal is to load this javascript file the right away as wordpress is suggesting it. Somehow this is not working or I am doing something wrong.
The file is called FormScript.js and is located here:
/httpdocs/wp-content/themes/Avada/FormScript.js
In the same directory is my function.php, in which I want to load the script.
This is how I am doing it:
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
// Register and Enqueue a Script
// get_stylesheet_directory_uri will look up child theme location
wp_register_script( 'FormScript', get_stylesheet_directory_uri() . 'FormScript.js');
wp_enqueue_script( 'FormScript' );
}
But why is this not working? Thanks for help...
You are missing a / after get_stylesheet_directory_uri() inside wp_register_script.
It should be:
wp_register_script( 'FormScript', get_stylesheet_directory_uri() . '/FormScript.js');
Edit:
From the documentation:
Note: Does not contain a trailing slash.
why don't you open the header.php file and use a simple script tag to load the FormScript.js file?
/httpdocs/wp-content/themes/Avada/FormScript.js
/httpdocs/js/FormScript.js
http://www.domain.com/js/FormScript.js
make sure your js file is world accessible
<script type="text/javascript" src="http://www.domain.com/js/FormScript.js"></script>
I have to make a new homepage on a wordpress website and the new homepage must be with different css and javascript than the css and js of the theme. I have created a page template with the new layout but I found it difficult to include the styles and js and I have started to wandering if this is the wright way. What I have done is to create a new page template with everything in it with a separate head tag where i will include the styles, but I couldn`t find out how to set the path to the files properly. I have to add bootstrap css as well and 4 js files and the new files should not affect the other pages of the website.
Also I have to add a slider on which should be a text which have to be editable from the administration panel. Do I have to make it with a plugin because I was given html and css files and the slider is made with javascript, and I have to use those files.
Can anyone give an advice which is the wright way to make the new page?
You can approach this by using is_page() or is_home() or is_front_page() to determine homepage, then use wp_dequeue_style(), wp_enqueue_style(), wp_dequeue_script(), wp_enqueue_script() to remove/add style and js files to your needs
Depending on how your theme is built you can put if statements in the header to include the appropriate css/js files.
You can do the following -
<?php if(is_front_page()):?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/homestyle.css">
<script src="<?php bloginfo('template_directory');?>/js/homescripts.js"></script>
<?php else: ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/regularstyle.css">
<script src="<?php bloginfo('template_directory'); ?>/js/regularscripts.js"></script>
<?php endif;?>
The slider question is harder to answer without specifics. There are many slider plugins available in the repo that you can add with shortcodes or php codes, but you can also use a regular jQuery slider.
You can accomplish what you want by creating a new template with a second header as you have described. You mentioned that the only problem you had was with trying to set up the file path, I think you mean calling the new header in your template. Here's what you do...
Copy the homepage template and name it something else (I think you have already done this)
Copy the header file and rename it from i.e. header.php to header-home.php
Call the header in your template with <?php get_header( $header-home ); ?>
Edit the new header-home.php with your new css and js file.
That's it! The home template will now use a custom header.
In regards to the slider as Codebloo has said, there are many free slider plugins available but I recommend Slider Revolution. All you do is install it like any other plugin and you are ready to set up your slides. When you have created your slides you are given a shortcode or a php insert that you can use on any page, post, or template.
Okay, you have your template. Next you need to enqueue styles and scripts in your functions.php or wherever you enqueue your assets based on whether you're showing that template or not.
This can easily be done like so:
function assets() {
$assets = array(
'bootstrap-css' => '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css',
'bootstrap-js' => '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js',
'css' => '/assets/css/main.min.css',
'js' => '/assets/js/main.min.js',
'home-css' => '/different-assets-path/css/main.min.css',
'home-js' => '/different-assets-path/js/main.min.js',
);
// enqueue common assets here
wp_enqueue_style( 'bootstrap_css', $assets['bootstrap-css'], false, null );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'bootstrap_js', $assets['bootstrap-js'], array(), null, true );
if ( is_page_template( 'templates/home.php' ) ) {
wp_enqueue_style( 'home_css', get_template_directory_uri() . $assets['home-css'], false, null );
wp_enqueue_script( 'home_js', get_template_directory_uri() . $assets['home-js'], array(), null, true );
} else {
wp_enqueue_style( 'main_css', get_template_directory_uri() . $assets['css'], false, null );
wp_enqueue_script( 'main_js', get_template_directory_uri() . $assets['js'], array(), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'assets', 100 );
Regarding adding a slider that's editable from the admin interface. I like to use Advanced Custom Fields to create editable content areas which I then display on the front-end like any other content. This way you're not tied to any particular slider plugin and can change out the javascript and markup to display the slider as you choose.