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.
Related
I have found out JQuery is loading twice on my Wordpress website and is causing some plugins to break. I have done some research and think I need to remove some JQuery code from the header.php file, and then insert some new JQuery code into the functions.php file. Trouble is I am not exactly sure what code to remove/add. Can anyone help me stop JQuery running twice?
To remove the default WordPress jQuery file you can use the following:
function remove_jquery(){
wp_deregister_script('jquery');
wp_dequeue_script('jquery');
}
add_action('wp_enqueue_scripts','remove_jquery');
That should deregister and dequeue the native jQuery file and keep the one that you have in your header.php file.
function dequeue_script() {
wp_dequeue_script( 'jquery' );
}
add_action( 'wp_print_scripts', 'dequeue_script', 100);
I've got a Wordpress site and have a .js file that I would like linked up so I can call the script. After much research, I've found this must be done with a hook in functions.php. I've tried all sorts of variations but cannot get the official method to work, but I have found a way that does work but just breaks the rest of the site in the process.
What am I doing wrong? I know about the get_stylesheet_directory_uri() & get_template_directory_uri() differences with parent and child themes but neither seem to make any difference.
Here's the 'official' way that doesn't work:
function add_jquery_script() {
wp_enqueue_script(
'my-script', // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . 'http://<site>.com/wp-content/themes/dt-the7/custom-scripts.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
The 'not recommended at all' way that works but breaks the rest of the site:
function add_jquery_script() {
echo '<script type="text/javascript" src="http://<site>/wp-content/themes/dt-the7/custom-scripts.js"></script>' . "\n";
}
add_action('wp_head', 'add_jquery_script');
As always, any help much appreciated. Thanks guys
UPDATE
After echoing out get_stylesheet_directory_uri() I can see that my URL needs to be relative, which should now be as follows, however it still will not work.
function add_jquery_script() {
wp_enqueue_script(
'my-script', // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . '/custom-scripts.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
PHP
You need to call the function add_jquery_script(); before it can be expect to output anything - pretty simple, easily forgotten.
JQuery
The script was breaking your code because of a reference error, var price definition should be moved inside the function so it is in the function's scope.
http://learn.jquery.com/javascript-101/scope/
$(document).ready(function () {
refresh();
$('#bittrex-price').load(bittrexPrice);
});
function refresh() {
var price = "[domain hidden]/realtime/bittrex-realtime.php";
setTimeout(function (price) {
$('#bittrex-price').fadeOut('slow').load(price, params).fadeIn('slow');
$('#bittrex-vol').fadeOut('slow').load(price, params2).fadeIn('fast');
refresh();
}, 1000);
}
This is probably a simple question to answer but my Jquery wont work on my theme at all no matter what tutorial ive followed.
my js file is located as /js/jquery.js and the code inside is just for testing purposes:
jQuery(document).ready(function($) {
$('#banner').hide();
});
my functions.php file is located in the same location as the index is and the code ive done for that is:
<?php
function add_my_script() {
wp_enqueue_script(
'jquery', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . 'js/jquery.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
?>
and nothing happens... can anyone correct me in what I am doing wrong? This is what puts me off using wordpress.
Chances are you need to have a slash before "js":
get_template_directory_uri() . '/js/jquery.js'
With that said, you could check your site using the network monitor in your browser's developer tools. It will show you what URLs are being fetched. Or maybe just check your developer tool's console. It could show you a 404 error if it is unable to fetch your jQuery file.
wp_enqueue_script(
'call this something else!', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/jquery.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
you had a couple of typos.....also check if jquery is available by using your dev.console in chrome or firefox(right click on page, click inspect element, and then console) you'll get a error jquery undefined or similiar.
Also on your page in frontend:
get_header();
get_footer();
you dont use the head tags as these functions pull in the header file & footer files. without get_header() & get_footer - you'll have issues :)
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.
});
Using the latest Wordpress version (3.6), I am trying to apply:
<body onLoad="window.scroll(0, 150)">
To a specific landing page on my website so that the page scrolls to a specific point on page load.
Given the way that Wordpress is set up - with the body tags included in header.php - how can I echo the above code within the body tag for my specific page only, without applying it to the rest of my pages?
I am presuming something needs to go in here:
<body <?php body_class(); ?><?php my code in here?>>
You don't need to apply the code to the <body> tag, see: https://stackoverflow.com/a/191318/1287812
This can be done in functions.php with the following code, and using the conditional tags mentioned by SrikanthAD:
add_action( 'wp_footer', 'b5f_on_load_script' );
function b5f_on_load_script()
{
// Not our page, do nothing
if( !is_page( 'about' ) )
return;
?>
<script type="text/javascript">
window.onload = function() { alert( 'Inside specific page' ); };
</script>
<?php
};
Also see: How to use window.scroll to automatically scroll on pageload?
For some reason, I was having difficulties using the above approach, however the logic was correct.
I have now instead registered the scroll script separately and enqueued it based on page template using:
wp_register_script( 'scroll', get_template_directory_uri() . '/js/scroll.js' );
if( is_page_template('my-landing-page.php') ) wp_enqueue_script( 'scroll' );
With: window.onload=function(){window.scroll(0, 140)}; as a separate file.
Thanks for all the help.
You can use many of the conditional tags available in WordPress to get the desired functionality.
http://codex.wordpress.org/Conditional_Tags
Example:
if ( is_page( 'about' ) ) {
// do something
}
I agree with brasofilo, you don't necessarily have it include the conditional tag in your template. It can used anywhere, depending on your project.