I'm having some trouble using a custom javascript file in my WP child theme.
What I've done in order to try and only make changes to the child theme is create a functions.php in my child theme's root folder. Like that I believe this functions.php to be prepended to the actual theme's fucntions.php file.
Now in this functions.php I want to enqueue my custom javascript file and thats where I get stuck. I'm having some difficulties thoroughly understanding the enqueue function but I have basically grabbed the enqueue function used in the original functions.php and I've altered it so it would point towards my child theme's "js" folder and then to the custom.js file in there.
Here is what my child functions.php looks like:
<?php
define( 'CHILD_DIR', get_stylesheet_directory() );
wp_enqueue_script('responsive-scripts', CHILD_DIR. '/js/custom.js');
?>
It looks like it is properly linking, or at least pointing to the correct file when I check my chrome console but it does say that it's not found (404) When I check the network tab in chrome it says the custom.js file's type is text/html (not application/javascript, which is what I see for my other javascript files), also for Time it says "pending".
Could anyone help me see where I'm going wrong?
The function you want to be using is get_stylesheet_directory_uri().
This is because get_stylesheet_directory will return the path to the stylesheet directory, which only makes sense in the context of server-side scripts, meaning it is the function you should use for things like includes.
On the other hand, get_stylesheet_directory_uri() will give you the URI of the stylesheet directory, which can be used in client-side contexts, such as linking scripts or stylesheets.
Related
I have a file index.php and there is a main js script in its header.
I'm using Jquery load method to load other php file inside a div element:
$("#formHideinAjax").load('loginpass.php');
And as our friend explained here the main js file which had loaded in the header doesn't work in new imported file so I was forced to add the js file inside the loginpass.php too(Now I have two same js file, one in header and one in div that loads loginpass.php ! )
I know that this method of loading js file is not standard and sends more request to my server.
How can I fix this problem?
Well, it is explicitly said in $.load() documentation. I'm afraid you can't just paste <script></script> code into your DOM for browser to run it.
I'm afraid you have to send JavaScript code from your loginpass.php file (without <script></script> tags) and just eval it in your JavaScript
$("#formHideinAjax").load('loginpass.php', function () {
// eval JavaScript code from php file here
});
I have an external script to integrate in a Wordpress theme. This script has different mixed resources in it like js, php files, etc.
It's something like:
/mytheme/myscript/
...main.php
...folder/main.js
Now, main.js post to main.php and uses something like:
var comet = new vpb_start_comet('main.php');
comet.connect();
My problem's here. Main.php is not found because I should change it with the relative wordpress path, being in a subfolder of my theme. So how could I get_bloginfo('template_url').'/myfolder/main.php in my main.js file?
If your folder/main.js is being included via the wp_enqueue_script() function ( which it probably should be, as this is the proper method with WP to load scripts ), then you can easily add the theme directory uri as a variable using the `localize_script()' function like so:
wp_localize_script( 'script_handle', 'themeDirURI', get_template_directory_uri() ) ;
You would put this code after the wp_enqueue for the main.js script. This will make the theme directory available as a javascript variable named themeDirURI, and the value will be something like: `http://www.example.com/wp-content/themes/theme-name/'
Hope this helps!
I have a plugin that has js file in its folder.
My main plugin file looks like this:
require('api/myapi.class.php'); // API Library
require('settings.php'); // Configuration Options
require('register_shortcodes.php');
How to add a function that will inject js file to all client pages (Not admin pages)
I guess I need to use wp_enqueue_script but where should I add it?
wp_enqueue_script("myscript.js");
Try something like:
add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' );
function my_plugin_scripts() {
wp_enqueue_script( 'myscript', plugins_url().'/plugin_name/js/myscript.js', array('jquery'));
}
This assumes you put your script in the js folder of the plugin folder, and that it depends on jquery.
EDIT:
A user tried to edit my answer, that added no real improvement to my answer. To explain my answer a bit more. You hook to wp_enqueue_scripts which will show the function with the enque script only on the front end, and not in the admin area, which is what the OP wanted, so there is really no need to check if you're on the admin page.
I am trying to create a simple chat in wordpress, and I don't want to use any plugins. I am creating the index file by myself and in there, I have a javascript function where it calls a jQuery's post method like the following:
function chatinitial(){
var user=document.getElementById("chatuser").value;
jQuery.post("chat.php",/*{stage:"initial",user:user},*/function(data){
alert(data);
});
}
In here, I need to call the chat.php to process my inputs, but I don't know where to put the chat.php file and how to point to it in the javascript code above. Do I put it in the theme folder?
Put the chat.php in your root folder and change your JavaScript to:
jQuery.post("/chat.php",
Or put chat.php in your themes directory and change your JavaScript to:
jQuery.post("/wp-content/themes/your_theme_name/chat.php",
The second version would be my preference, the only downside being that the JavaScript is then tied to your theme name, so it will break if ever you rename your theme.
If you want to do it quick and dirty put all the code into your theme's functions.php file.
You need to add a hook to your chat functions that are accessed via AJAX. There are two types of access - privileged and non-privileged. Here is how you add a hook:
add_action( 'wp_ajax_chat_function', 'my_chat_function' );
add_action( 'wp_ajax_nopriv_chat_function', 'my_chat_function');
Recently I completed a blog entry that could help you http://mehaul.me/blog/wordpress-using-ajax-to-query-posts/
Javascript file's order is not correct in Drupal. On other pages other than print page the order of script files are correct. The files are drupal.js and google_analytics_reports.js
Since the order is not correct it is causing error
"ReferenceError: Drupal is not defined"
Please help me to change the order of the files in Print pages(When we try to take a print out of the page, we will get this print page).
Are you sure that this is a problem of the js files order and not
something else?
Are the same js files loaded on print and normal pages?
What files are inside the /templates folder of your theme (or
generally files with tpl.php extension under your theme folder)?
If you just need a template for the printing mode install the print module and copy the print.tpl.php file into your theme templates folder. Then edit it as you prefer.