CODEWITHSUNDEEP
javascriptjoomla
LITguy
LITguy

Reputation: 623

Adding javascript to head of Joomla website

I have gone through some Joomla tutorials and I am not understanding how Joomla works. I have never encountered something where every aspect of it evades me. I'm not asking for a free ride.. just where to go or a basic idea of how this works.

I simply need to add a Panoramio javascript into the <head></head> section of a joomla website. In Word Press I simply download the header.php template and code away.

It's so confusing understanding Joomla. I do know not to paste directly into an "Article" page so do I have to install some sort of extension or tool to even get this to work?

I read to edit the index.php in my templates but I can't even find that. Am I the only person that can't understand Joomla at all? Even the beginner documentation seems to assume I know their system. Thank you in advance.

Upvotes: 8

Views: 24427

Answers (6)

Lodder
Lodder

Reputation: 19733

Be careful about which files you add code to. Editing core files like the index.php in the templates folder might not be the best solution. What if there is a template update? The file will get overridden. So just bare that in mind.

Before you add the script, it is good idea to get the name of current template:

$app = JFactory::getApplication();
$template = $app->getTemplate();

You can use the following to import a .js file the <head> tags:

$doc = JFactory::getDocument(); //only include if not already included
$doc->addScript(JUri::root() . 'templates/' . $template . '/file.js');

or you can add the Javascript there and then like so:

$doc = JFactory::getDocument();
$js = "
       //javascript goes here
      ";
$doc->addScriptDeclaration($js);

Hope this helps

Upvotes: 8

Peter
Peter

Reputation: 854

I am no expert in JavaScript but I have an AJAX application that works perfectly without modifying any template files. The thing is that it adds the JavaScript at the bottom of the page, not in the head section. I don't know if this is an issue but it works for me.

1) Go to Extensions->Module Manager

2) Create a new module. Call it JavaScript Footer (for example)

3) Under the Details tab set Show Title to Hide, set Position to Debug, set Status to Published and set Access to Public

4) Under the Custom Output tab, type <script type="text/javascript" src="http://yourdomain.com/yourscript.js"></script>

I never did understand why some scripts are in the header while others are at the bottom of the body (Google Analytics for example) but it works for me.

Upvotes: 0

JMWalker
JMWalker

Reputation: 95

Joomla is quite different from Wordpress. Actually, index.php is rather useless when customizing joomla template. You will have to explore the blocks of the template in the folder blocks found in your template. For example, to add a scripts in the header section just edit header.php in the directory your_template/blocks.

Upvotes: -1

Naomi Fridman
Naomi Fridman

Reputation: 2144

you can edit index.php file and other template files as css etc.

go to : Extensions->template manager

chose template TAB

Second from the left you see: "template name" Details and Files here you can edit any template file directly on your server.

Menu can change depending on Joomla version, but that's the general idea.

Upvotes: 1

Valentin Despa
Valentin Despa

Reputation: 42562

Here is a quick tutorial on what you need to do:

  • Joomla! templates are at the /templates folder (locate your template)
  • inside you find the index.php file (there you need to change stuff)
  • inside you will find a html page with some PHP inside it
  • locate the <head> tag

How add this:

$doc->addScript($this->baseurl.'/templates/'.$this->template.'/javascript/YOURSCRIPT.js', 'text/javascript');

Make sure that this line of code already exists:

$doc = JFactory::getDocument();

Footnote: Because you did not specifiy what Joomla! version you are using, this example is from Joomla! 2.5, the current LTS.

P.S. You can also insert the script the 'normal' way, after the <head> tag.

Upvotes: 0

David Fritsch
David Fritsch

Reputation: 3731

You definitely aren't the only one. Joomla is meant to be able to handle anything you need it to do, and this makes it rather complicated.

Your best bet is to add the script to the template index.php file that you mentioned if you want it to be available throughout the entire site. If you just needed it for a particular module or component, you would instead want to load it there. In your case, since you are fairly new to Joomla, let's just get it loading!

Navigate to your base Joomla directory (where you installed Joomla) and look for the templates folder. Within this you should have several folders. Hopefully you know which template you are currently using and open that folder and there should be an index.php file in it. The top of this file should look similar to the header.php file from Wordpress. Add your script tag to the header element and it should load.

If you have no idea what the name of your current template is, go to Extensions->Template Manager on the backend. There should be two with stars to the right of them. One should be marked "administrator" and the other "site". The folder that you are looking for in the templates folder should match the name of the "site" template.

Upvotes: 0

Related Questions