Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding <script> to WordPress in <head> element

I'm trying to insert this code:

 <script type="text/javascript">     some Javascript codes comes here </script> 

to WordPress' <head></head> section in front end and in admin panel

E.g., Joomla! 1.6 has an API that allows this:

        $doc =& JFactory::getDocument();         $doc->addCustomTag($headTag); 

I need to add different things for different pages. For example:

Page 1 I need to add

<link rel="alternate" type="application/rss+xml" title="feed title" href="feed url" /> 

For a few pages

Page 2 I need to add

<script type=\"text/javascript\" src=\"" . LIVE_SITE .  "/wp-content/plugins/jobs/lknlibrary/js/ajax.js\"></script>     <script type=\"text/javascript\">      var ajax = new sack();     var currentClientID=false;     function getClientData()     {         var clientId = document.getElementById('db_country_id').value.replace(/[^0-9]/g,'');         ajax.requestFile = '" .BASE_PATH . "/wp-content/plugins/jobs/com_jobs_admin/tasks/get_location_data.php?task=get_location_data&name=db_parent_id&getClientId='+clientId;    // Specifying which file to get         ajax.onCompletion = showClientData; // Specify function that will be executed after file has been found         ajax.runAJAX();        // Execute AJAX function     }      function showClientData()     {         clearJS = ajax.response;         var strTagStrippedText = clearJS.replace(/(<\s*\/?\s*)div(\s*([^>]*)?\s*>)/gi ,'');         document.getElementById('locationsDiv').innerHTML=strTagStrippedText ;     }      function initFormEvents()     {         if (document.getElementById('db_country_id')){             document.getElementById('db_country_id').onchange = getClientData;             document.getElementById('db_country_id').focus();         }     }      window.onload = initFormEvents; </script> 

for a few pages

Page 3 I need to add

 <link rel="stylesheet" type="text/css" href="/wordpress/wp-content/plugins/jobs/lknlibrary/js/tabs/tab.webfx.css" /> 

for a few pages

I have 70+ pages in admin panel like those above.

Trying to manage the header of the WordPress with the example is a bit difficult.

like image 915
trichnosis Avatar asked May 01 '11 14:05

trichnosis


People also ask

How do you add a script to a head tag?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.


2 Answers

In your theme's functions.php:

function my_custom_js() {     echo '<script type="text/javascript" src="myscript.js"></script>'; } // Add hook for admin <head></head> add_action( 'admin_head', 'my_custom_js' ); // Add hook for front-end <head></head> add_action( 'wp_head', 'my_custom_js' ); 
like image 145
ggutenberg Avatar answered Sep 25 '22 12:09

ggutenberg


For anyone else who comes here looking, I'm afraid I'm with @usama sulaiman here.

Using the enqueue function provides a safe way to load style sheets and scripts according to the script dependencies and is WordPress' recommended method of achieving what the original poster was trying to achieve. Just think of all the plugins trying to load their own copy of jQuery for instance; you better hope they're using enqueue :D.

Also, wherever possible create a plugin; as adding custom code to your functions file can be pita if you don't have a back-up and you upgrade your theme and overwrite your functions file in the process.

Having a plugin handle this and other custom functions also means you can switch them off if you think their code is clashing with some other plugin or functionality.

Something along the following in a plugin file is what you are looking for:

<?php /* Plugin Name: Your plugin name Description: Your description Version: 1.0 Author: Your name Author URI:  Plugin URI:  */  function $yourJS() {     wp_enqueue_script(         'custom_script',         plugins_url( '/js/your-script.js', __FILE__ ),         array( 'jquery' )     ); }  add_action( 'wp_enqueue_scripts',  '$yourJS' );  add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );   function prefix_add_my_stylesheet() {     wp_register_style( 'prefix-style', plugins_url( '/css/your-stylesheet.css', __FILE__ ) );     wp_enqueue_style( 'prefix-style' );   }  ?> 

Structure your folders as follows:

Plugin Folder   |_ css folder   |_ js folder   |_ plugin.php ...contains the above code - modified of course ;D 

Then zip it up and upload it to your WordPress installation using your add plugins interface, activate it and Bob's your uncle.

like image 39
johnmackay61 Avatar answered Sep 24 '22 12:09

johnmackay61