WP Header Breaking New Script?

  • PianoWorld

    (@pianoworld)


    9 years, 5 months ago

    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

    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)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 5 months ago

    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/

    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”. 🙂

    Thread Starter PianoWorld

    (@pianoworld)

    9 years, 5 months ago

    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)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 5 months ago

    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

    Thread Starter PianoWorld

    (@pianoworld)

    9 years, 5 months ago

    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

    (@pianoworld)

    9 years, 5 months ago

    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)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 5 months ago

    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

    (@pianoworld)

    9 years, 5 months ago

    🙂
    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

    (@pianoworld)

    9 years, 5 months ago

    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.