Title: Adding javascript in to the post
Last modified: August 19, 2016

---

# Adding javascript in to the post

 *  [episode27](https://wordpress.org/support/users/episode27/)
 * (@episode27)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/)
 * Hi everyone,
 * I’m having a problem with adding javascript in to the post
 * Eg: Add a new **Page** > In **Visual** tab I paste the javascript
 * Then I add the jquery code there in 2 different types
 * <script type=’text/javascript’ src='<?php echo get_bloginfo(‘template_url’); ?
   >/js/jquery-1.3.1.min.js’></script>
 * <script src=”js/jquery-1.3.1.min.js” type=”text/javascript”></script>
 * But still it’s not working but I checked WP and I found an article
    [http://codex.wordpress.org/Using_Javascript](http://codex.wordpress.org/Using_Javascript)
 *     ```
       Javascript in Posts
       To use Javascript inside of posts in WordPress, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary.
   
       For the occasional or one time use of Javascript, you need to put the script into a Javascript file and then call it out from within the post. Make sure that each script is defined by its function name such as:
   
       function updatepage(){var m="Page updated "+document.lastMo.......}
       To include a Javascript inside a post, you need to combine both the call to the script file with the call to the Javascript itself.
   
       <script type="text/javascript" src="/scripts/updatepage.js"></script>
       <script type="text/javascript">
       <!--
       updatepage();
       //--></script>
       If the src attribute of your javascript tag is being stripped out you need to turn off the rich editor (from the dashboard go to Users > Personal Options). If you are using the rich editor the javascript tag's src attribute may be stripped out even when manually editing in the HTML popup window.
       ```
   
 * If someone resolve this explain me in points…
 * Thanks 🙂

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [Chinmoy](https://wordpress.org/support/users/chinmoy/)
 * (@chinmoy)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595790)
 * goto Add a new Page > HTML tab. Then put the javascript and update the page.
 *  Thread Starter [episode27](https://wordpress.org/support/users/episode27/)
 * (@episode27)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595793)
 * that’s simple chinmoy I did that already but script is not working properly I
   fix the jquery conflict in the code but nothing changed.
 * see the script below
 *     ```
       <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
       <script type="text/javascript">
       jQuery. noconflicts() ;
       jQuery.(document).ready(function() {    
   
         //Get all the LI from the #tabMenu UL
         jQuery.('#tabMenu > li').click(function(){  
   
           //perform the actions when it's not selected
           if (!$(this).hasClass('selected')) {      
   
           //remove the selected class from all LI
           jQuery.('#tabMenu > li').removeClass('selected');  
   
           //After cleared all the LI, reassign the class to the selected tab
           $(this).addClass('selected');  
   
           //Hide all the DIV in .boxBody
           $('.boxBody div').slideUp('1500');  
   
           //Look for the right DIV index based on the Navigation UL index
           $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');  
   
          }  
   
         }).mouseover(function() {  
   
           //Add and remove class, Personally I dont think this is the right way to do it,
           //if you have better ideas to toggle it, please comment
           $(this).addClass('mouseover');
           $(this).removeClass('mouseout');     
   
         }).mouseout(function() {   
   
           //Add and remove class
           $(this).addClass('mouseout');
           $(this).removeClass('mouseover');      
   
         });  
   
         //Mouseover with animate Effect for Category menu list  :)
         $('.boxBody #category li').mouseover(function() {  
   
           //Change background color and animate the padding
           $(this).css('backgroundColor','#888');
           $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
         }).mouseout(function() {  
   
           //Change background color and animate the padding
           $(this).css('backgroundColor','');
           $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
         });    
   
         //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
         $('.boxBody li').click(function(){
           window.location = $(this).find("a").attr("href");
         }).mouseover(function() {
           $(this).css('backgroundColor','#888');
         }).mouseout(function() {
           $(this).css('backgroundColor','');
         });     
   
       });  
   
       </script>
       ```
   
 *  [Chinmoy](https://wordpress.org/support/users/chinmoy/)
 * (@chinmoy)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595795)
 * <script src=”js/jquery-1.3.1.min.js” type=”text/javascript”></script>
    remove
   this.
 * Because WP by default put the jquery.js in the header. Check your header as view
   source on FF.
 *  Thread Starter [episode27](https://wordpress.org/support/users/episode27/)
 * (@episode27)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595797)
 * I removed both scripts and did what you said.
 * but still it’s not working, is there any other option…
 *  [Chinmoy](https://wordpress.org/support/users/chinmoy/)
 * (@chinmoy)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595799)
 * keep one. Don’t delete jquery. If you delete jquery lib, your javascript would
   not work. Keep one not both.
 *  [Chinmoy](https://wordpress.org/support/users/chinmoy/)
 * (@chinmoy)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595800)
 * You can put the javascript in header.php file not in to the post.
 *     ```
       <script type="text/javascript">
       jQuery. noconflicts() ;
       jQuery.(document).ready(function() {    
   
         //Get all the LI from the #tabMenu UL
         jQuery.('#tabMenu > li').click(function(){  
   
           //perform the actions when it's not selected
           if (!$(this).hasClass('selected')) {      
   
           //remove the selected class from all LI
           jQuery.('#tabMenu > li').removeClass('selected');  
   
           //After cleared all the LI, reassign the class to the selected tab
           $(this).addClass('selected');  
   
           //Hide all the DIV in .boxBody
           $('.boxBody div').slideUp('1500');  
   
           //Look for the right DIV index based on the Navigation UL index
           $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');  
   
          }  
   
         }).mouseover(function() {  
   
           //Add and remove class, Personally I dont think this is the right way to do it,
           //if you have better ideas to toggle it, please comment
           $(this).addClass('mouseover');
           $(this).removeClass('mouseout');     
   
         }).mouseout(function() {   
   
           //Add and remove class
           $(this).addClass('mouseout');
           $(this).removeClass('mouseover');      
   
         });  
   
         //Mouseover with animate Effect for Category menu list  :)
         $('.boxBody #category li').mouseover(function() {  
   
           //Change background color and animate the padding
           $(this).css('backgroundColor','#888');
           $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
         }).mouseout(function() {  
   
           //Change background color and animate the padding
           $(this).css('backgroundColor','');
           $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
         });    
   
         //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
         $('.boxBody li').click(function(){
           window.location = $(this).find("a").attr("href");
         }).mouseover(function() {
           $(this).css('backgroundColor','#888');
         }).mouseout(function() {
           $(this).css('backgroundColor','');
         });     
   
       });  
   
       </script>
       ```
   
 * Put it inside <head></head> tag
 *  Thread Starter [episode27](https://wordpress.org/support/users/episode27/)
 * (@episode27)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595806)
 * yes but it repeats to the all the pages. What I want is to add this in to specific
   page…
 *  [Chinmoy](https://wordpress.org/support/users/chinmoy/)
 * (@chinmoy)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595807)
 * Yes it is possible. Put the code at HTML tab mode in WP editor. But sometime 
   WP editor change the tags in your own format. Try this above javascript once.
 *  Thread Starter [episode27](https://wordpress.org/support/users/episode27/)
 * (@episode27)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595810)
 * no luck bro I tried all the stuffs but still I think my code cannot identify 
   the path of main jquery (wp-includes\js\jquery) I give this one too but not working
 *  Thread Starter [episode27](https://wordpress.org/support/users/episode27/)
 * (@episode27)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595821)
 * hi is anybody there who knows how to resolve the problem I have tried this in
   manyways even I put the right path the effects not working I did as ‘chinmoy’
   said but still didn’t get solved this things
 * Here I will tell you how did I do this by steps,
 * 1.) I add a new Page and add the cording into HTML tab in this case I tried this
   in many ways
 * a.) I removed the jquery-1.3.1.min.js in my cording and let the main jquery in
   header.php
 * b.) I keep the jquery-1.3.1.min.js in my cording and tried adding Conflict
 * c.) I put the jquery-1.3.1.min.js in to the themes folder ‘js’ (wp-content\themes\
   template\js)
 * d.) I put the jquery-1.3.1.min.js in to the wp-includes folder (wp-includes\js\
   jquery)
 * Also I need to appear the code in few pages not the all the pages so give me 
   a solution somebody who knows, thanks 🙂
 *  [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * (@t31os_)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595831)
 * For conditional script inclusion try the approach shown here.
    **whypad.com/posts/
   wordpress-add-scripts-to-the-pages-you-want/749/**

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Adding javascript in to the post’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 11 replies
 * 3 participants
 * Last reply from: [Mark / t31os](https://wordpress.org/support/users/t31os_/)
 * Last activity: [15 years, 10 months ago](https://wordpress.org/support/topic/adding-javascript-in-to-the-post/#post-1595831)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics