Title: WP Header Breaking New Script?
Last modified: November 26, 2016

---

# WP Header Breaking New Script?

 *  [PianoWorld](https://wordpress.org/support/users/pianoworld/)
 * (@pianoworld)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/)
 * Adding a “virtual” keyboard to our site that teaches chords and scales (licensed
   from people I know). New WP based site is now in development, and close to launch
   ready.
    If I put the code in a regular (static) page with the normal get_header
   call, regardless of how I call the support files the virtual keyboard needs the
   keyboard won’t work. It will display, just doesn’t do anything.
 * If I do not call the WP header (I created a test template with no get_header 
   call) the page looks kind of ugly, but the keyboard works. This leads me to believe
   there is a conflict between what the app needs to work and what is normally already
   in the header.
 * I’m hoping someone may be able to tell me where/what I should be looking for,
   or a possible solution / work-around.
 * The keyboard requires a js file called chords.js, a css file called chords.css(
   which I’ve posted on pastebin, link is below) and a jquery script (link below).
 * `<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/
   1.12.4/jquery.min.js"></script>`
 * The chords.css content is here:
    [http://pastebin.com/85rQ10KL](http://pastebin.com/85rQ10KL)
 * A snipet of the code in the actual page follows:
    <div id=”app_container”> <div
   id=”top_bar”>Piano Chords & Scales</div> <div id=”keyboard”> <div id=”red_line”
   ></div> <div class=”white”></div> <div class=”white”></div> <div class=”black”
   ></div> <div class=”white”></div> <div class=”black”></div> <div class=”white”
   ></div> <div class=”white”></div> <div class=”black”></div> <div class=”white”
   ></div> <div class=”black”></div> <div class=”white”></div> <div class=”black”
   ></div> <div id=”C1″ class=”white white_on”> <div class=”aa” style=”display: 
   block;”>C</div> </div>
 * I’d be happy to point you to the two versions I created (one with header, one
   without) but our development site can only be reached using a proxy right now.
   I could provide the access but I’d need your IP which I’m not expecting you (
   or anyone) to want to provide just to help me.
 * Thanks in advance for any help with this, much appreciated.
 * Best,
    Frank B.

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

 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8483737)
 * Do not load the Google version of jQuery. wordpress ships with one. When you 
   enqueue the script to load your keyboard, declare ‘jquery’ as a dependency and
   WP will auto load it. That may help.
 * See [https://developer.wordpress.org/reference/functions/wp_enqueue_script/](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)
 * So something like
 *     ```
       function my_scripts_method() {
           wp_enqueue_script( 'chords', '/path/to/chords.js', array('jquery') );
           wp_enqueue_style( 'chords', '/path/to/chords.css' );
       }
       add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
       ```
   
 * Note: please do not blindly paste my code and expect it to work. it’s offered
   as an example, not “the fix”. 🙂
    -  This reply was modified 9 years, 5 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).
 *  Thread Starter [PianoWorld](https://wordpress.org/support/users/pianoworld/)
 * (@pianoworld)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8483884)
 * Thank you Steve,
    I know just enough to be dangerous, so I’ll need to work through
   this one (and I’ll read the info on the link you provided).
 * I know enough to make backups and copies before changing things, still it makes
   me a bit nervous whenever I go under the hood.
 * I’m also trying to avoid creating anything that will result in code being pulled
   into the header of every page when it will only be needed in one or two.
 * Again, thanks for the quick response and the helpful hints.
 * Best,
    Frank B.
 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8483932)
 * You can add a test in the function that enqueues the script and CSS. Something
   like
 * `if ( is_page( array( 'slug1', 'slug2') ) ) { stuff }`
 * [https://codex.wordpress.org/Conditional_Tags](https://codex.wordpress.org/Conditional_Tags)
    -  This reply was modified 9 years, 5 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).
      Reason: added missing )
 *  Thread Starter [PianoWorld](https://wordpress.org/support/users/pianoworld/)
 * (@pianoworld)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8484023)
 * Thanks again Steve,
    I’m going to attempt some of these things, however I may
   end up having to check into the jobs section (I read the forums rules about not
   soliciting here in the free forums, and I respect that).
 * I am grateful for the WP forums where folks like yourself are willing to help
   the newbys like me, but I’m reaching the point where the hours I’m putting in
   trying things are costing me more in lost productivity than I’d like. By the 
   same token I really do like learning, as it makes me feel more invested as I 
   build out the new site.
 * Best,
    Frank B. Piano World
 *  Thread Starter [PianoWorld](https://wordpress.org/support/users/pianoworld/)
 * (@pianoworld)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8486208)
 * So I decided I would post a job to get a developer who knows what they are doing
   to create the proper function with the right code syntax (everything I tried 
   just seemed to break things) for registering and enqueueing a css and a javscript
   file.
 * But after filling out everything in the post a job section and clicking submit,
   I just get the dreaded “are you sure you want to do this?” message, which of 
   course doesn’t tell you what you might have done wrong.
 * Is there a secret/trick I should know to post?
 * Best,
    Frank B.
 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8486227)
 * I have no idea. 🙂 I’ve never used that site.
 * Usual dialog:
 * Are you sure?
 * <mutters: of course I’m sure>
 * <clicks>
 * Oh, crap!
 *  Thread Starter [PianoWorld](https://wordpress.org/support/users/pianoworld/)
 * (@pianoworld)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8486234)
 * 🙂
    Even more frustrating is that it asks if you are sure, but doesn’t give you
   any option to respond.
 * Posting the request on Upwork as we speak. Have had good luck with developers
   there before.
 * Best,
    Frank B.
 *  Thread Starter [PianoWorld](https://wordpress.org/support/users/pianoworld/)
 * (@pianoworld)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8494464)
 * Ok, problems solved.
    Steve, your suggestions (about enqueueing scripts, and 
   using local WP version of Jquery) helped, so thank you. As did deactivating all
   plug-ins when it was close but still wasn’t working properly. Turned out one 
   of the plug-ins was causing issues.
 * While I did end up hiring a developer it was worth it for the lessons learned.
 * Virtual Piano Chords & Scales now working well.
 * Best,
 * Frank B.

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

The topic ‘WP Header Breaking New Script?’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 2 participants
 * Last reply from: [PianoWorld](https://wordpress.org/support/users/pianoworld/)
 * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/wp-header-breaking-new-script/#post-8494464)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics