i have asked the question before, but i still can not figure out the full solution.
i want to make my wordpress site menu keyboard accessible, so far the dropdowns will show on tab but will not tab to the elements in the dropdown.
here is my fiddle: jsfiddle.net/X96gX/10/show/
it looks fine here, but when i tried to add the js to my wordpress functions.php im guessing it did not take in ondomready, but i have no idea how to customize that in php
any hints are appreciated!
edit: here is the code added to functions.php (it does show when i load the file as script in the header)
function includes_header_tab()
{
wp_enqueue_script( 'header-tab', dirname( get_bloginfo('stylesheet_url')).'/js/header-tab.js', array( 'jquery' ));
}
add_action('wp_enqueue_scripts', 'includes_header_tab');
function includes_header_jquery()
{
wp_enqueue_script( 'header-jquery', dirname( get_bloginfo('stylesheet_url')).'/js/header-jquery.js', array( 'jquery' ));
}
add_action('wp_enqueue_scripts', 'includes_header_jquery');
Inside your JS file, wrap the code within the DOMReady handler:
$(function() {
// existing JS code here.
});
Related
I've created a child theme and am running my site on that so that I can customise a form that I'm including on certain pages using the plugin 'contact-form-7". In my child folder I've placed a style.css, functions.php and js/custom_script.js. the style sheet is being imported fine but I can't seem to get my validation jquery file working on that form. This is the code I've been using:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script( 'custom_script', get_stylesheet_directory_uri() . '/js/custom_script.js' ,array( 'jquery'));
wp_enqueue_script( 'custom_script' );
}
console isn't logging any errors but I can't seem to find it in the web tools side bar UNLESS I remove "js/" when the custom_script is called, in which case a GET error pops up.
I'm guessing I'm incorrectly importing the file and honestly I can't quite get my head around these hooks and importing files just yet- only been using wordpress a short time.
Any help much appreciated.
I believe that you haven't included the JQuery file? You have to download it first https://jquery.com/download/, and then register it as you did with "custom_script", you just have to put it before the "custom_script" in functions.php, inside "custom_script.js" you could also do:
$(document).ready(function(){
});
Go to your console and if you see:
Uncaught ReferenceError: $ is not defined
It's because you haven't included the JQuery file as needed.
Hope this helps!
Leo.
I recently started working on a wordpress site.
I have the woo commerce plugin working and he mystile theme. SO far so good!
However the gallery sucks!
I am trying to fiddle aroundwith it, but do not know my way around wordpress too well.
Question:
How do I add a line into the header?
Say for the single product, I would want to include a Javascript file. Do you know how I would do that?
What file do I augment?
Please let me know if you need more information.
Bo
To add a javascript file to the wordpress theme, you have 2 alternative:
Suppose we have a jquery.js inside the directory root of the theme.
Method A)
Open header.php file in wordpress theme. Add this inside <head> tag:
<script src="<?php echo get_template_directory_uri(); ?>/jquery.js"></script>
Method B)
Open functions.php file in wordpress theme:
Search something like add_action( 'wp_enqueue_scripts', 'blahblah' );,
If exist, find a function with blahblah name and add this code inside it:
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/jquery.js', array(), '1.8.3', false );
Otherwise: You should add a function and add_action method:
function scripts_styles() {
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/jquery.js', array(), '1.8.3', false );
}
add_action( 'wp_enqueue_scripts', 'scripts_styles' );
Note: Replace jquery string with your file name so.
I'm working on a Wordpress plugin and a I have to use jquery.
In my plugin file (call it 'my_p.php') I register my .js file (my_js.js) in this way:
add_action('admin_enqueue_scripts', 'my_script');
function my_script() {
wp_register_script( 'my_jquery', plugins_url( '/js/my_js.js', __FILE__ ), array( 'jquery' ), '1.0.0', false );
wp_enqueue_script( 'my_jquery' );
}
Code in my_js.js is:
jQuery(document).ready(function($){
jQuery(document.body).on('click','#button_my_p', function(e){
alert('hello!');
});
});
my problem is the following:
if 'button_my_p' is an element (in my case a button) in *my_p.php* file, it works fine and I see the alert when I click on the button. But, if 'button_my_p' is an element of another .php file (for example 'other.php' in my plugin folder), jquery code doesn't work.. I don't see the alert..
What am I missing???
My plugin's structure is:
js folder in which I put my_js.js.
my_p.php file
other.php file
Thanks for your help!
jQuery does not care if you have one file or a thousand. It simply searches through the DOM (which may be created by one .php file or by a thousand included) for a matched element.
My advice for debugging this issue will be:
firstly, to check that my_js.js is present on the page generated by other.php - if it's not - then you use wp_enqueue_script incorrectly
I have been looking to figure this out for weeks. How to include a jquery in wordpress... so I have used the wp_enqeue_scripts();
but then I still don't understand it.
so for example I have this jquery slide down code..
$jQuery(document).ready(function() {
$jQuery('#slide').slideDown();
});
now this code works perfectly on my static html code which has the slide ID in it by the way..
so how would i include that slide to my wordpress plugin?
here is my plugin code
<?php
/*
Plugin Name: Jquery Test.
Plugin URI: http://wsplugins.com
Description: A plugin that increases your website traffic by floating facebook, twitter and google + share button. The buttons bounce and move over your page ensuring maximum attention by your visitors.
Author: Ronny Kibet.
Author URI: http://#.com
Version: 1.0
*/
thanks.
You have a couple of options.
Option #1
Paste the code into footer.php (or header.php).
<script>
$(function() {
$jQuery('#slide').slideDown();
});
</script>
This would result in every DOM element with an ID of "slide" to slideDown upon page load.
Option #2
Using WordPress' API, you could create a method in your theme to include a JavaScript file with the code inside . This is more complicated and requires an understanding of WordPress hooks.
I am having this same problem, but I got it to "somewhat" work. First you need to use wp_register_scripts, with the script name, and then do wp_enque_script("scriptname");... I don't understand why this is the way it is, but we just have to deal :-/
you may need to use noConflict, an example would be:
<script type="text/javascript">
var slide=jQuery.noConflict();
slide(function() {
slide('#slide').slideDown();
});
</script>
to enqueue a script in wordpress in a plugin use this:
/**
* Proper way to enqueue scripts
*/
function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('dependencyScriptThatNeedsToExecuteBeforeMyScriptName','forExample','jquery), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
I was also searching for the same solution but I found it myself.
create a new file custom-functions.js in the js director and past the code that you want to enqueue in that file. Now enqueue it in the functions.php
wp_enqueue_script( 'custom-functions', get_template_directory_uri() . '/js/custom-functions.js', array(), '1.0', true );
read the full tutorial at Bootstrap WordPress Snippets - wp_enqueue_script
function theme_name_scripts() {
wp_enqueue_script( 'script-name', plugins_url( '/js/responsiveslides.min.js' , __FILE__ ), array(),false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
If I have the following code before </head> the php form sends but the css crashes and doesn't display the dropdown menu.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
If I don't have the code, the submit button refreshes the page if blank and never sends anything but the dropdown menu works. If any of the fields are filled, the submit button returns with 404.
How can I keep both?
Additional details:
Wordpress CMS
The JQuery script was inserted in a field for customized js in WP.
I know JS is default, but try putting the type="text/javascript" in the <script> tag. Also, firebug for firefox has a NET tab that will most likely tell you what is going on. I would suggest if you can't figure it out by yourself, to post a screen shot of what is loading.
Wordpress can get finicky with manually embedded js and style embeds. The correct way to inject them is to add_actions to init, print_scripts and print_sytles. Add the following, or something like it to your Functions.php:
// register scripts
if (! function_exists(register_scripts){
function register_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
}
}
add_action('init', 'register_scripts');
//print the now registered scripts
if (! function_exists(print_scripts){
function print_scripts() {
wp_enqueue_script( 'jquery' );
}
}
add_action('wp_print_scripts', 'print_scripts');
// do the same for css
if (! function_exists(print_styles){
function print_styles() {
wp_register_style( 'stylesheet', 'path to css'.stylesheet.css ); //bloginfo(url); or something like it to obtain your path
wp_enqueue_style( 'stylesheet' );
}
}
add_action('wp_print_styles', 'print_styles');
Its a little more work, but ensures scripts and styles get inserted correctly, and at the same time wordpress chooses to do so...
I'm not positive if this is causing your issue, but its a great place to start.