Javascript code is not working in wordpress site
Hi i have created a javascript code that works very well.But when i have copy that code on wordpress pages then that code stops working.I don’t know why it stops working. I am new to wordpress but i have good experience in javacript.Please tell me why code is not working on wordpress pages? Here is code:
WordPress Theme: JavaScript not working
I am attempting to design my own wordpress theme, but I’m having issues getting my JavaScript to work, and nothing I have researched seems to have the answer. If anyone can help me out I’d greatly appreciate it! Things I have done: Enqueue my javascript file in functions.php:
function sorenTheme_scripts() < wp_enqueue_style('style', get_stylesheet_uri()); wp_register_script( 'soren-script', get_template_directory_uri() . '/js/soren-script.js', array( 'jquery', 'jquery-ui-core' ), '1', true ); wp_enqueue_script('soren-script'); >add_action('wp_enqueue_scripts', 'sorenTheme_scripts');
Create a simple javaScript file in the directory /js named soren-script.js, which currently just contains a very simple alert test
and that’s it. When I tried to put the alert in the index.php file directly using the script tags , the alert came up as expected, but when I move it to the js file I get nothing. Is there something i need to add to the .php or .js files? EDIT: When I look at the developer console, the source files include jquery, my css file, etc but not soren-script.js So I guess getting soren-script.js to show up would fix the problem but I don’t know how to do that, i thought the enqueue would make it automatically show up as a source, as it did with my style sheet
The browser console doesn’t have anything relating to the alert, just the message «Consider using ‘dppx’ units instead of ‘dpi’, as in CSS ‘dpi’ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‘dpi’ of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) «
3 Answers 3
You probably don’t have the wp_footer() function in your template. Since in this hook the code will get loaded it won’t appear if you haven’t defined the hook.
$in_footer (boolean) (optional) Normally, scripts are placed in of the HTML document. If this parameter is true, the script is placed before the end tag. This requires the theme to have the wp_footer() template tag in the appropriate place. Default: false
Note that get_footer() and wp_footer() are 2 different things:
The get_footer() template tag is a custom wrapper for the locate_template() function, used to include a template-part file within a template file. The get_footer() template tag is part of the WordPress template system, and is used primarily by the Theme itself, to specify the footer.php or footer-.php file to include in the current template.
The wp_footer() template tag is a custom wrapper for the wp_footer action hook, which is invoked via do_action( ‘wp_footer’ ). The wp_footer() template tag is part of the WordPress Hooks API, and is used primarily by Plugins, to inject scripts in the site HTML footer.
The wp_footer hook is typically placed right befor the closing body tag:
javascript is not running in wordpress
I have problem with running javascript codes in may pages. I tried testing my code in xampp and it was working. but I can not see them when I add them to my pages or my posts in my host and I installed wordpress again and it wasn’t working. Please help me
Could you provide us with some more information, are these manually added JavaScript files? How do you register them? In a child theme? Did you manually create a plug-in and register them there? Do you want to load them in the front-end, or back-end?
And what does your code look like to actually load them in the front-end? Or do you use some other plug-in?
2 Answers 2
There are a few ways you can include JavaScript files in WordPress, I will give you one example using your child theme.
First you need to validate whether or not you actually have a child theme. Use FTP to login to you server and go to the wp-contents/themes directory. There you will see all your installed themes (in your case betheme). If you do not have a child theme follow these steps:
- Create a new directory in your themes folder (betheme-child).
- Upload your JavaScript file in this directory (for example script.js)
- Create a new file called functions.php and add the following code to it: (surrounded by php opening and closing tags):
function enqueue_child_scripts() < wp_enqueue_script('child-script', get_template_directory_uri() . '/script.js'); >
- Login to your wp-admin and navigate to your themes
- Enable your child theme instead of your normal theme.
- Go to the front-page of your website, look at the page source and check if your JavaScript file is being loaded.
Javascript is not working on WordPress
This code is not functioning the way it is on JsFiddle. It barely shows half of the app when implemented on WordPress. See fiddle: https://jsfiddle.net/od6g095L/ How it’s supposed to display: This is how it displays on WordPress: This is exactly what I have on my wordpress page:
What Type of Person Are You? #container < max-width:600px; height: auto; background: #59C1DA; border: 10px solid #333; border-radius: 5px; margin: auto; text-align: center; >#content < border: 10px solid #fff; padding: 15px; color: #fff; >#question < font-weight: bold; >#score jQuery not working in WordPress
I am using a test environment to try to get jquery working in wordpress, the installation version is 3.2.1 and the theme is 2010 (although I have tried this in a few different themes, same result). There are no plug-ins installed. Basically I am putting this in the header file to see if I can get jQuery to work.
jQuery(document).ready(function($)
$j=jQuery.noConflict(); // Use jQuery via $j(. ) $j(document).ready(function()< alert('test'); >);
I can not seem to get it to display the alert when the page loads. When I check firebug the script has loaded. jQuery works fine when not used in conjunction with WP and all scripts tested outside of WP perform as expected. Should it work in WP 3.2.1? What can I try?
7 Answers 7
Have you added the actual jQuery script file?
There are a number of ways to do this, but I usually use the following method by including this code in the functions.php file.
add_action('init', 'add_jquery'); ?>
Make sure WP itself (or another installed plugin) does not have an already embedded jQuery version that conflicts with yours.. View the source of your page and make sure only one jQuery version is loaded. Should go w/o problems.
By using wp_enqueue_script you are sure the jQuery library is loaded ONCE. You can see here how to load a JS file.
Beside the way mentioned by Paul Sham which is absolutely correct, following way is also helpful which is also describe at THIS link.
function include_jQuery() < if (!is_admin()) < // comment out the next two lines to load the local copy of jQuery wp_deregister_script('jquery'); wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3'); wp_enqueue_script('jquery'); >> add_action('init', 'include_jQuery');
put this code in your current wordpress theame's function.php file in between
I find the other one, write this at the beginning of your script. $ = jQuery.noConflict();
The answer below was not intended as step-by-step instructions about how to add jQuery to WordPress. I'm simply asking him to check and see if it's already there, then I'm telling him to "not include it again" IF it's already there.
As mentioned in comments, wp_enqueue_script is the absolute best way to add jQuery to WordPress, whenever you need to add jQuery.
Of course jQuery works within WordPress but I am not sure if it's already included within the Twenty-Ten theme by default. Check to see if the script includes tags are there. You need something like this in the header someplace before you can call any JavaScript that uses jQuery.
(Make sure you're not including it more than once or multiple versions.)