I want to add all my themes JavaScript files in function.php and my scripts are
<script src="http://localhost/xampp/website/nextgen/wp-content/themes/nextgen/nextgen/js/jquery.min.js"></script>
how can i add these to my functions.php i have tried several tutorials but it not work for me.
Show me demo with the above code
Place this in functions.php file:
function addthemejs() {
wp_enqueue_script( 'myscript', 'http://localhost/xampp/website/nextgen/wp-content/themes/nextgen/nextgen/js/jquery.min.js' , array(), "", false ); );
}
add_action( 'wp_enqueue_scripts' , 'addthemejs' );
I have hardcoded your code, you have to know that is not so good solution, but if you are just testing it's ok I guess
Related
I am creating a WP theme using Bootstrap 5 and I have encountered a problem that I cannot solve. I would like to place the bootstrap files directly into the theme files. I have successfully done this with the .css files, but I am having problems with the .js files. Do any of you perhaps have an idea what I am doing wrong that elements like navbar-toggler are not working? By including the js file <script src="_TEMP0_#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> in the theme using the CDN everything works. When I do it manually it no longer works.
Here is an excerpt from my functions.php file:
function imago_theme_scripts() {
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700;900&display=swap" rel="stylesheet', array(), null );
wp_enqueue_style( 'imago-theme-style', get_stylesheet_uri(), array('imago-bootstrap-css'), '1.0.0' );
wp_style_add_data( 'imago-theme-style', 'rtl', 'replace' );
wp_enqueue_script( 'imago-bootstrap-popper', 'https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js', array(), null, true );
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array(), null, true );
//wp_enqueue_script( 'imago-bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha3/dist/js/bootstrap.bundle.min.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'imago_theme_scripts' );
I still tried this way by replacing the popper.min.js and bootstrap.min.js script with:
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.bundle.min.js', array(), null, true );, but unfortunately that doesn't change anything either. Navigation in the mobile version still doesn't work.
The directory structure is preserved correctly.
In the first configuration you can see that the `popper.min.js' file is plugged before the 'bootstrap.min.js' file according to the documntation.
They may not be working because you're not including jQuery to the dependencies.
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), null, true );
Other than that, they are loading, your nav console indicates that... ...are there any errors in the console?
I was developing a web form that will be used to collect data. I needed to attach it to my WordPress website. I have been successful attaching the HTML and CSS files, so that they can blend with the theme of the website, however, I have been unsuccessful trying to add the JavaScript file.
I have followed several guides on how to but I have not been successful. I tried the enqueue_script approach but it didn't work. Here is samples of my code from the functions.php file
<?php
/**
* Income School functions and definitions
*
* #link https://developer.wordpress.org/themes/basics/theme-functions/
*
* #package Income_School
*/
add_action( 'wp_enqueue_scripts', 'form_enqueue_style' );
function form_enqueue_script() {
wp_enqueue_script( 'form-js', get_template_directory_uri() . '/js/form.js', array(), false, true);
}
add_action( 'wp_enqueue_scripts', 'form_enqueue_script' );
In my theme folder where the above functions.php can be found, i also created js folder inside my theme folder where i placed my javascript file. However when I try to load my site, the above script cannot come into the footer. While as for the CSS, I just added it simply while I was adding the HTML code in the block, through the Scripts n Styles plugin. Kindly assist me so I can be able to ensure my JS is working well.
function my_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', 'my_theme_name_scripts' );
Also make sure the file is under the correct path in your theme.
I have an old PHP app here, that imports js file with an HTML script tag. After this import, I'm able to use the js functions inside other HTML components such as input. It's a simple solution you already tried?
<script language="javascript" type="text/javascript" src="lib/ajax_search.js"></script>
The function searchOrcSuggest() is inside my js file imported with html.
<input name="descricao[<?php echo $row1['codigo']?>]" id="descricao<?php echo $row1['codigo']?>" value="<?php echo $row1['descricao']?>" type="text" class="forms" size="45"
onkeyup="searchOrcSuggest(this, 'codigoprocedimento<?php echo $row1['codigo']?>', 'particular<?php echo $row1['codigo']?>', 'convenio<?php echo $row1['codigo']?>', 'search<?php echo $row1['codigo']?>', <?php echo $codigo_convenio?>);"
autocomplete="off" />
Also this app have other manner to pass js functions by an js file named script.js.php, don't ask me why!
And the import of this archive made like:
<script language="javascript" type="text/javascript" src="lib/script.js"></script>
Here is the file if you want to see it
link to file
I have a wordpress theme and It's work good.
Every things are working , images , bootstrap CDN , styke.css . but I have a big problem! my Javascript file is not working!!!!!
I write the JS codes in other file and I inclde the file in header.php file but It's not working.
If you have a true answer pleas help me.
Within your WordPress child theme functions.php file you would add the function:
wp_enqueue_script()
Example:
function add_child_theme_scripts() {
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/child-theme-scripts-folder/your-script.js', array ( 'jquery' ), 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'add_child_theme_scripts' );
Ref: https://developer.wordpress.org/themes/basics/including-css-javascript/#scripts
Add this code in your function file and edit it.
//Funtion that add script in header
function my_scripts() {
wp_enqueue_script( 'unique-script-name-id', get_template_directory_uri() . '/js/script-name.js', array(), '', false);
}
//Add action hook to call function
add_action( 'wp_enqueue_scripts', 'my_scripts' );
I have an HTML form which requires a javascript and JQuery to calculate prices. This is what the form looks like with the javascript implemented and everything working correctly: https://counterboosting.com/wp-content/themes/appointment/csgoboost/
Now I would like to put this form onto my wordpress website page. All the HTML shows up and it seems like the CSS also works but the Javascript just won't work.
There are 3 Javascripts and 3 CSS files to be linked, as you can see if you look at the source code of the link I put above.
I tried to Enqueue the scripts in functions.php file like this:
function wp_theme_enque_scripts() {
wp_enqueue_script( 'boosting', get_template_directory_uri() . '/csgoboost/js/boosting.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/csgoboost/js/bootstrap.min.js', array(), '3.3.6', true );
wp_register_style('bootstrap.css', get_template_directory_uri() . 'csgoboost/css/bootstrap.css', array(), '3.3.6', 'all' ); wp_enqueue_style( 'bootstrap.css');
wp_register_style('boosting.css', get_template_directory_uri() . 'csgoboost/css/boosting.css', array(), '3.3.6', 'all' ); wp_enqueue_style( 'boosting.css');
}
add_action( 'wp_enqueue_scripts', 'wp_theme_enque_scripts' );
I then put this code in the HTML page:
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/jquery.js"></script>
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/bootstrap.min.js"></script>
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/boosting.js"></script>
This is the page I want the form to display on but the javascript is not working: https://www.counterboosting.com/buy-csgo-rank-boosting/
I'm really desperate to fix this, its been over a week that I've been try this. I'd even reward anyone able to help me here.
Thank you so much in advance (as you might tell, I am not very experienced in this field)
I see SyntaxError: expected expression, got '<' from my browser console from your page https://www.counterboosting.com/buy-csgo-rank-boosting/ I think you can fix it from there first.
quick question here.
I am adding custom javascript to my wordpress site, i have header-tab.js saved in the child theme's js folder, and tried to call on it with enqueue_script in my child theme's functions.php as shown here:
function includes_header_tab()
{
wp_enqueue_script( 'header-tab', get_template_directory_uri() .'/js/header-tab.js', array( 'jquery' ));
}
add_action('wp_enqueue_scripts', 'includes_header_tab');
?>
this does not seem to work, can anyone see if there is a problem in my code? or am i missing something? or it might be my javascript file that is at fault?
you are missing a couple of data, first register and then enqueue
function includes_header_tab()
{
wp_register_script( 'header-tab', get_template_directory_uri('/js/header-tab.js', __FILE__ ), array( 'jquery' ));
wp_enqueue_script( 'header-tab' );
}
add_action('wp_enqueue_scripts', 'includes_header_tab');
?>
As mentioned the get_directory_template_uri manual page:
In the event a child theme is being used, the parent theme directory URI will be returned, get_template_directory_uri() should be used for resources that are not intended to be included in/over-ridden by a child theme. Use get_stylesheet_directory_uri() to include resources that are intended to be included in/over-ridden by the Child Theme.
You simply got the parent's uri and not the child's.