I have been trying to add a typed.js plugin to one of the wordpress themes.
I put the typed.js in the "js" folder in the theme folder.
Then I edited the functions.php in the theme folder and added:
function typed_script_init() {
wp_enqueue_script( 'typedJS', get_template_directory_uri() . '/js/typed.js');
}
add_action('wp_enqueue_scripts', 'typed_script_init');
add_action('wp_enqueue_scripts', 'typed_init_in_footer');
function typed_init_in_footer() {
add_action('print_footer_scripts', 'typed_init');
}
function typed_init() { ?>
<script type="text/javascript">
$(function(){
$("#typed").typed({
strings: ["Are you Interested?"],
typeSpeed: 20
});
});
</script>
<?php }
I do have in one of my section in the theme:
<h1>
<span id="typed"></span>
</h1>
And when I launch my wordpress page it does not work.
I have been sitting on this for almost 3hours reading online tutorials about including javascript in wordpress and still nothing.
Is there anybody who can help me?
Thanks guys!
The proper way to do this would be to (1) include jQuery as a dependency (you haven't mentioned if you've included jQuery), (2) use noConflict wrappers:
function typed_script_init() {
wp_enqueue_script( 'typedJS', get_template_directory_uri() . '/js/typed.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'typed_script_init');
function typed_init() {
echo '<script type="text/javascript">
(function($){
// The `$` jQuery shortcut is now available to you
$(function(){
$("#typed").typed({
strings: ["Are you Interested?"],
typeSpeed: 20
});
});
})(jQuery);
</script>';
}
add_action('wp_footer', 'typed_init');
I've added the scripts to the wp_footer action hook...but it may be preferable to put those scripts in an external JS file, and also enqueue them in wp_enqueue_scripts, with typedJS as a dependency.
Related
I have a php function as shown below. The following function is being used at many places.
function render_brightcove_player($active_feed, $poster_image = false)
{
$poster = '';
if ($poster_image) {
$poster = 'poster=' . esc_url($poster_image);
}
?>
<div class="hsc-video" onclick="hscLogo()">
<div class="hsc-video__inner">
<script src="//players.brightcove.net/1242843915001/SJ3Tc5kb_default/index.min.js"></script>
</div>
</div>
<?php
wp_enqueue_script(
'miscellaneous-scripts',
HSC_TEMPLATE_URL . "/assets/js/miscellaneous.js"
);
}
In the php code, I have added wordpress function wp_enqueue_script(). Inside miscellaneous.js file I am using:
function hscLogo() {
document.getElementsByClassName("hsc-tv-logo")[0].style.display = "none";
}
I am wondering if that is the right way to use wp_enqueue_script() function in php. Do I need to place wp_enqueue_script() somewhere else ?
This is the first time I am using wp_enqueue_script in wordpress. Here is the tree structure of javascript folders/files.
Is your php code in wordpress?
And if it is called by any wordpress template or plugin, you can use wp_enqueue_script in your php file.
You can check the following link to study wp_enqueue_script.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
wp_enqueue_script(
'miscellaneous-scripts',
HSC_TEMPLATE_URL . "/assets/js/miscellaneous.js",
array(),
'1.0.0', //Version
true // Load in footer.
);
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'm creating a word press theme , this includes a responsive jquery menu.
However, for some reason, I can't get the menu to work. In my functions.PHP file I have included the script below. Please may someone help with advice and a code snippet, i'm trying to:
1) Call Jquery
2) Run the script slimmenu.js script
<?php
function menu_function() {
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/jquery.slimmenu.js', array( 'jquery'));
}
add_action('wp_enqueue_scripts','menu_function');
?>
Many thanks,
P
You have not enqueued jquery which is a dependancy for the script you've enqueued. Also consider naming your file something a bit more unique to avoid conflicts. try...
function menu_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'slimMenu', get_template_directory_uri() . '/js/jquery.slimmenu.js', 'jquery' );
}
add_action('wp_enqueue_scripts','menu_scripts');
Better add the script in footer.php before :
<?php
wp_footer();
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/jquery.slimmenu.js', 'jquery', true);
?>
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.