Adding script to WordPress in head element

Question

I m trying to insert this code     lt script type  text javascript  gt      some Javascript codes comes here  lt  script gt    to WordPress   lt head gt  lt  head gt  section in front end and in admin panel  E g   Joomla  1 6 has an API that allows this            doc   amp  JFactory  getDocument             doc- gt addCustomTag  headTag     I need to add different things for different pages   For example   Page 1 I need to add    lt link rel  alternate  type  application rss xml  title  feed title  href  feed url    gt    For a few pages  Page 2 I need to add    lt script type   text javascript   src       LIVE SITE      wp-content plugins jobs lknlibrary js ajax js   gt  lt  script gt       lt script type   text javascript   gt       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 amp name db parent id amp 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    lt  s     s  div  s     gt      s  gt   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   lt  script gt    for a few pages  Page 3 I need to add     lt link rel  stylesheet  type  text css  href   wordpress wp-content plugins jobs lknlibrary js tabs tab webfx css    gt      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

User · Answer

In your theme s functions php   function my custom js         echo   lt script type  text javascript  src  myscript js  gt  lt  script gt         Add hook for admin  lt head gt  lt  head gt  add action   admin head    my custom js        Add hook for front-end  lt head gt  lt  head gt  add action   wp head    my custom js

User · Answer

Elaborating on the previous answer  you can gather all the required snippets before outputting the header  and only then use an action hook to inject all you need on the head   In your functions php file  add   inject required scripts   array            Call this function before calling get header   to request custom js code to be injected on head         param code the javascript code to be injected      function require script  code      global  inject required scripts     inject required scripts      code     store code snippet for later injection    function inject required scripts       global  inject required scripts    foreach  inject required scripts as  script         inject all code snippets  if any     echo   lt script type  text javascript  gt    script   lt  script gt      add action  wp head    inject required scripts      And then in your page or template  use it like   lt  php    Template Name  coolstuff     require script  lt  lt  lt JS   jQuery function   jQuery  div   wrap   lt blink  gt       JS     require script  lt  lt  lt JS   jQuery function   jQuery  p span a   html  Internet is cool      JS     get header            I made it for javascript because it s the most common use  but it can be easily adapted to any tag in the head  and either with inline code or by passing a href src to an external URL

User · Answer

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    lt  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            gt    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

User · Answer

If you are ok using an external plugin to do that you can use Header and Footer Scripts plugin  From the description      Many WordPress Themes do not have any options to insert header and   footer scripts in your site  or   It helps you to keep   yourself from theme lock  But  sometimes it also causes some pain for   many  like where should I insert Google Analytics code  or any other   web-analytics codes   This plugin is one stop and lightweight solution   for that  With this  Header and Footer Script  plugin will be able to   inject HTML tags  JS and CSS codes to  and  easily

User · Answer

One way I like to use is Vanilla JavaScript with template literal   var templateLiteral           lt  -- HTML CODE COMES HERE -- gt      var head   document querySelector  head    head innerHTML   templateLiteral

User · Answer

I believe that codex wordpress org is your best reference to handle this task very well depends on your needs  check out these two pages on WordPress Codex   wp enqueue script  wp enqueue style

[javascript] Adding <script> to WordPress in <head> element

Examples related to javascript

Examples related to wordpress

Examples related to plugins