Wordpress add javascript in footer - javascript

I need to add a script in the site footer.
I'm just referencing the footer.php:
<script src="wp-content/file/script.js"></ script>
At Home functions normally, but when access a page child he does not find because search the directory:
site/page-child/wp-content/file/script.js.
I saw that I have to use:
  wp_enqueue_script ()
But where should I put this code?
Thank's

You just need to add a "/" before your url in order to start it from root like :
<script src="/wp-content/file/script.js"></ script>
Indeed at home page it looks for yoursite.com/wp-content but on other pages it searches yoursite.com/current-page/wp-content and obviously it results in 404.
Adding / make it always look for yoursite.com/wp-content

Adding <script src="wp-content/file/script.js"></ script> is not a clean way to load your JS files because this is not a relative URL and when you active your child theme probably your theme will not load your JS file, the solution is :
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js"></script>
You need to add this to your footer.php file in your theme directory wp-content\themes\your_theme\footer.php
but the best way is to use WP hooks to include your scripts, first you need to register them using
wp_register_script( 'my_script_name', get_template_directory_uri(). '/js/script.js' );
then simply load them
wp_enqueue_script( 'my_script_name' );
Don't try to register and enqueue your scripts directly in your footer.php file, instead create a method in your functions.php template file then load your scripts using
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Note: To enqueue your scripts to the footer you need to set $in_footer parameter to true.
Checkout wp_enqueue_script for more information.

Since you seem to use WordPress, you can replace
<script src="wp-content/file/script.js"></ script>
with:
<script src="<?php site_url('/wp-content/file/script.js'); ?>"></script>

Related

how to add custom javascript in wordpress child theme

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

Wordpress script not loading

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>

Adding wordpress web template with different styles and js

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.

Javascript in Wordpress widget works only on Home page

I would like to use my widget in every pages, but that works only on home page.
I'm still in local for the moment. I'm writing my script in footer.php before the end of body like that :
<script type="text/javascript" src="wp-content/themes/twentyfourteen/js/formlist.js"></script>
I've seen that when I'm not on home page, when I inspect with developper tools, my script .js is red and not well imported. How can I make that ?
You have to correctly enqueue your Javascript in your theme, i.e. something like this:
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
There are other methods, depending on if your script uses the main jQuery library and other considerations. See Function Reference/wp enqueue script « WordPress Codex for information on all the ways to use wp_enqueue_style.
And use your Dev Tools to check for errors and correct loading.
Try calling your script like this:
<script src="<?php echo get_template_directory_uri();?>/js/formlist.js"></script>
If you are on your home page, wp-content/themes/twentyfourteen... may work just fine. But say you're on yoursite.com/about then it thinks the URL for the javascript file is yoursite.com/about/wp-content/themes/twentyfourteen...
Make sense?

How do I put jQuery code in an external file in WordPress theme?

I am relatively new to Javascript/jQuery so please bear with me.
I'm designing a custom WordPress theme and I have been using jQuery to make some changes to the main navigation menu that is generated in my header file (header.php). I have been adding code like this inside the head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$('nav').mouseover(function() {
// my mousecode here...
}); // end mouseover
}); // end ready
</script>
My question is simple really. My scripts have gotten so long that I want to move them to their own file (perhaps nav-mouse-events.js) and call them from within header.php. How do I do this? Is it as simple as putting the code inbetween the second script tags into a file named nav-mouse-events.js and then adding this to the head tag?
<script src="nav-mouse-events.js"></script>
Or do I need to do something more complicated? Do I need to call jQuery from the new external file or header.php?
You would put the scripts in a .js file and use wp_enqueue_script in functions.php to include them the proper way.
From the wordpress site:
<?php
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
Add this line:
<script src="<?php echo get_bloginfo('template_url ');?>/nav-mouse-events.js"></script>
and save nav-mouse-events.js file with code:
$(document).ready(function(){
$('nav').mouseover(function() {
// my mousecode here...
}); // end mouseover
}); // end ready
in your template folder.

Categories