is there some Wordpress template shortcode for javascript files? - php

I know we can get some path with <?php bloginfo('something');?> into php files, but is it some equivalent for javascript file loaded with the enqueue_script function ?
Did wordpress change some shortcode into those files ?
EDIT : I think I did not clearly express my needs. So i want to know if wordpress had some shortcode who, placed into a js file who is loaded with the enqueue method, will be replaced by the template path. Typically i need to make some ajax call form a .php file from my template and want to avoid hard linking file

No javascript files won't be parsed as php, and as such won't process any shortcodes or php.
Why not just make your links relative. Often I find subdomaining my dev copy, removes any problems when moving a site live and broken links.
You could cheat and link to a php file, which then passes header information as Javascript. Doesn't seem very elegant though. See here.
Or you could just declare the variable in a little bit of inline Javascript and pick it up in the external JS file.
<script type="text/javascript">
var siteURL= '<?php bloginfo('url');?>';
</script>
<script type="text/javascript" src="yourscript.js"></script>
Then in yourscript.js just reference the variable 'siteURL'

You have to register scripts using wp_register_script(). Then by placing wp_enqueue_script before wp_head() it will load them in for you. The idea of using wp_enqueue_script is that you don't need to enter them all in manually, and you can load other scripts depending on whether a certain script has been loaded.

Related

Is there a function that can get me the url of the directory of the file I'm working on? (Wordpress)

I want to include some JS to my theme.
I created a folder called "js" in my twentyfifteen-child theme folder.
When I want to call the file I write the whole text:
<script type='text/javascript' src='http://54.149.xx.xx/wp-content/themes/twentyfifteen-child/js/scroll.js'></script>
Is there a function that does that in a more simple way instead of typing the whole directory myself?
It's useful when moving the website to a new server ect'.
What is your solution for this situation ?
In wordpress:
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/scroll.js'></script>
get_template_directory_uri() function return directory path of current active theme.
EDIT:
Try the follwoing function to get child theme directory.
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/scroll.js'></script>
First of all Hatul, you have better chances of getting an answer by asking this question on the WordPress Development site of stack exchange.
http://wordpress.stackexchange.com/
Second you should use the following code in your plugin file or functions.php file.
wp_enqueue_script('your_js_handle', plugins_url('your_js_folder/your_js_file.js',__FILE__) ,array('any_dependency_the_js_file_might_require',false);
For your_js_handle you can put any name but do not include spaces.
your_js_handle is the id of the file that will be available in the HTML DOM.
Plugins_url is the function you should use if you are working with a plugin.Else
you should use get_template_directory_uri('your_js_folder/your_js_file.js').
__FILE__is written with 2 underscores before and after the word so that is not an error and what __FILE__ will do is that it will retrieve the relative path of the file you are working with.
array('any_dependency_the_js_file_might_require',false) should be used if the javascript file requires any library in order to work. like if your plugin require the jQuery library then you have to use it by stating array('jquery').
if your plugin requires the jQuery library make sure you are enqueuing it before using it. Wordpress normally comes with a preinstalled jQuery library which is the latest version. To use it just state
wp_enqueue_script('jquery');
Finally false means either you render the file in the footer or the header of your site. In which case you should make sure you are using wp_head() or wp_footer() as required. If you set it to true, the script is placed before the end tag.
Hope that helps you to code with best practice.
Yours.
MMK

Including file in Joomla - what is the difference?

Can anyone tell me what is the difference between including the js script file in the following two ways,
I made this inside system plugin in joomla and included the js file inside "onAfterInitialise" function.
1)
<script type="text/javascript" src="<?php echo JURI::base(); ?>/plugins/system/test/script/script.js"></script>
This works fine and including the js file correctly, But when I logged-in from the backend the font size from userlisting and listing from other extensions gets enlarged.This is not the issue in my js script.
2)
$document->addScript(JURI::root(). "plugins/system/test/script/script.js");
This works fine without any issues.
Can anyone explain what goes behind this.
Using the second method is simply using Joomla coding standards and adds your script in between the <head> tags.
There isn't much difference except for where the script gets imported on the page.
JURI::base() and JURI::root() are both the same. They both define the root folder for your Joomla site. If you are unsure which one to use, I would recommend using method 2, as it's always good to get used to Joomla coding standards.
You can see the source of addScript() :) Basicly, if you use first method, your srcipt will be added in the same place you wrote the code. Second method will add link to a inner table in $document and will be 'rendered' at the
<head></head>
section at the end of page processing.

Javascript in an external file

Before I ask this question I must point out that I have tried to search for EVERYTHING!
My question is how can I run javascript from an external file instead of inside my php / html. What I'm trying to do is.
function ClearForm() {
document.form.message.value="";
}
function comeBack(){
if (document.form.message.value == "") {
document.form.message.value="What's on your mind?";
}
}
I have included<script type="text/javascript" src="javascript.js"></script> in the <head> and I have a file in the root called javascript.js and my php file is in the root too so that shouldn't be the problem! But how do I run that pieces of code you see above in the javascript.js file instead of in my php file. It work's fine if I have it in the php file but I want to separate things!
I have also tried to give the form / input field an id and then use getElementById in the external JavaScript file.
But as you can see and hear I'm kinda new to JavaScript so I'm apparently doing something wrong here.
If the above code is the only thing in your Javascript.js file, then you need to call the functions to run the code.
You've included the external Javascript file correctly - however, because all of your JS is included within functions, these function/s must be called before the code will run.
A call to 'ClearForm()' or 'comeBack()' from within your PHP file should run the code.
That JS file will have to be in the same folder as your PHP page.
Test whether the file is found or not by adding this line at the top of the js file
alert('js file found OK!');
document.form is an array, so if you only have one form use:
document.forms[0]
Also depending on which browser you use, find and install some Developer Tools to help you identify these errors.
You have declared those functions in the <head>. All fine.
The question is when do you want to call/run those functions?
If you simply want to run them at the end of the page, then you can add another external javascript file and include it using <script src="my_external_file.js"> right before the </body> tag.
Otherwise, you have to declare onXXX handlers, like onLoad() for the document, onClick() for certain elements, onSubmit() for forms, etc. These, too, can be declared in an external file, but specified after the relevant elements are loaded.

Can PHP be inserted into a javascript call in my header?

I have a wordpress theme that I like to duplicate. To make things easier on myself, I'm trying to use the bloginfo function to call my jquery file..like this:
<script type="text/javascript" src="<?php echo bloginfo("template_url"); ?>/js/jquery-1.4.2.min.js"></script>
I just can't get it to work. When I check my source file it looks exactly like the code above.
Can this even be done, or should I just forget it? Thanks guys!
Are you sure the above code is actually in a PHP-file and gets parsed by the server? I can't think of a different reason why PHP-code should just be printed and not executed.
See the Referencing Files From a Template chapter in http://codex.wordpress.org/Theme_Development
Whats the name of this file? It should end in .php.
What does the source look like when you view it from the browser?
Are there other places in the file where you use and is that data correct?
Make sure there are no blank lines at the end of the source file. PHP doesn't like blanks lines at the end of the code.
Two problems: No need for the echo in the WP template tag; should be
<?php bloginfo("template_url"); ?>
Template Tags/info « WordPress Codex
And, why are you trying to include jQuery from the template directory, when it resides in wp-includes/js? You should be using Function Reference/wp enqueue script, if your theme doesn't already include jQuery.
You should try to edit your theme's header.php file directly because custom fields of your theme may not be executed by PHP interpreter.
As I've never used PHP, this is only a guess...
PHP is a server side language, and you're tyring to use it on the client side?

Multiple javascript/css files: best practices?

I have about 7 Javascript files now (thanks to various jQuery plugins) and 4-5 CSS files. I'm curious as to what's the best practice for dealing with these including where in the document they should be loaded? YSlow tells me that Javascript files should be--where possible--included at the end. The end of the body? It mentions that the delimeter seems to be whether they write content. All my Javascript files are functions and jQuery code (all done when ready()) so that should be OK.
So should I include one CSS and one Javascript file and have those include the rest? Should I concatenate all my files into one? Should I put Javascript my tags at the very end of my document?
Edit: FWIW yes this is PHP.
I would suggest using PHP Minify, which lets you create a single HTTP request for a group of JS or CSS files. Minify also handles GZipping, Compression, and HTTP Headers for client side caching.
Edit: Minify will also allow you to setup the request so that for different pages you can include different files. For example a core set of JS files along with custom JS code on certain pages or just the core JS files on other pages.
While in development include all the files as you normally would and then when you get closer to switching to production run minify and join all the CSS and JS files into a single HTTP request. It's really easy to setup and get working with.
Also yes, CSS files should be set in the head, and JS files served at the bottom, since JS files can write to your page and can cause massive time-out issues.
Here's how you should include your JS files:
</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>
Edit: You can also use Cuzillion to see how your page should be set up.
Here's what I do: I use up to two JavaScript files and generally one CSS file for each page. I figure out which JS files will be common across all of my pages (or enough of them so it's close - the file containing jQuery would be a good candidate) and then I concatenate them and minify them using jsmin-php and then I cache the combined file. If there are any JS files left over that are specific to that one page only, I concatenate, minify, and cache them into a single file as well. The first JS file will be called over a number of pages, the second only on that one or maybe a few.
You can use the same concept with CSS if you like with css-min, though I find I usually only use one file for CSS. One thing extra, when I create the cache file, I put in a little PHP code in the beginning of the file to serve it as a GZipped file, which is actually where you'll get most of your savings anyways. You'll also want to set your expiration header so that the user's browser will have a better chance of caching the file as well. I believe you can also enable GZipping through Apache.
For the caching, I check to see if the file creation time is older than the amount of time that I set. If it is, I recreate the cache file and serve it, otherwise I just get the existing cached file.
You haven't explicitly said that you've got access to a server-side solution, but assuming you do, I've always gone with a method involving using PHP to do the following:
jquery.js.php:
<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file)
{
echo file_get_contents('jquery.' . $file . '.js');
}
?>
With the snippet above in place, I then call the file just like I normally would:
<script type="text/javascript" src="jquery.js.php"></script>
and then if I'm ever aware of the precise functionality I'm going to need, I just pass in my requirements as a query string (jquery.js.php?r=core,effects). I do the exact same for my CSS requirements if they're ever as branched.
I would not recommend using a javascript based solution (like PHP Minify) to include your css as your page will become unusable if the visitor has javascript disabled.
The idea of minifying and combining the files is great.
I do something similar on my sites but to ease development I suggest some code which looks like this:
if (evironment == production) {
echo "<style>#import(/Styles/Combined.css);</style>"
} else {
echo "<style>#import(/Styles/File1.css);</style>"
echo "<style>#import(/Styles/File2.css);</style>"
}
This should let you keep your files separate during dev for easy management and use the combined file during deployment for quicker page loads. This assumes you have the ability to combine the files and change variables as part of your deploy process.
Definitely look into including your js at the bottom and the css at the top as per YUI recommendations as keeping the JS low has a tangible affect on the appearance of the rest of the page and feels much faster.
I also tend to copy+paste all of my jquery plugins into a single file: jquery.plugins.js then link to
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
for the actual jquery library.

Categories