javascript – where to add in loop-page.php?

  • mag

    #7221

    This is long story – I hope someone can find the time to give me guidance.

    My friend likes the sliding door theme which has a horizontal accordion menu. After using it for awhile she said she would like for the sliders to only show on pages and not posts.

    I tried to figure out where all the references to the code are located and I am stumped.

    You are probably thinking… this isn’t the sliding door forum. I was there for hours.

    Since I like graphene so much I told her I could probably make a page that looks identical to hers with Graphene and her request would probably be possible by editing a child theme or perhaps by using plugins or widgets and hooks.

    Well so far it is a no go

    I’ve tried all the accordion plugins I could find and all had issues.

    I found a standalone script that is a perfect match and it will work if I use a javascript friendly widget but for some reason it only shows on the FRONT PAGE. And no, I’m not using the front page optional widget area. I tried moving the script and images to every folder in the account as well – no help.

    I tried add to the javascript snippet to loop-page.php (child theme) and it either causes half the page to disappear or the slider shows too low in the content.

    The script I want to use is at http://www.scriptocean.com/accordion.html

    The wizard generates a javascript file and an html example with a snip of code.

    I’ve tried many hook locations and if the slider shows it is only on the front page.

    On the other pages there is an error

    ReferenceError: ac1init_doc is not defined

    I would really like it if I could figure out how to edit the loop-page.php so it shows up before the content under the header.

    Thanks for following along!

    Admin

    Syahir Hakim

    #37495

    Firstly, you don’t need to edit the loop-page.php file to add the script. You can add all the scripts using the child theme’s functions.php file.

    How are you adding the HTML part of the slider?

    mag

    #37496

    Oh my gosh, you are so nice to reply. Thank you! I’ve been reading a lot tonight about the loading queue and registration of scripts but it is definitely over my head. I know enough about php to be dangerous.

    The html file that is generated by the wizard simply has the following code in it.

    <script src="acac1.js" type="text/javascript"></script><script>ac1init_doc('',0);</script>

    I’ve been trying to use it in the following Action hook widget areas:

    graphene_before_content

    graphene_before_content-main

    The accordion slider shows on the front page which is a static page but no where else. The other pages load very slowly like they are trying to load the script … The area before the widget firs then a delay and the area below… but no widget shows.

    The widget used to insert the html code is called Enhanced Text and is supposed to support scripts etc.

    I also have a widget installed to insert php.

    Thanks again for answering my post.

    mag

    #37497

    This what I found that I think might be relevant:

    add_action('init', 'register_my_script');
    add_action('wp_footer', 'print_my_script');

    function register_my_script() {
    wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
    }

    function print_my_script() {
    global $add_my_script;

    if ( ! $add_my_script )
    return;

    wp_print_scripts('my-script');
    }

    reference:http://scribu.net/wordpress/optimal-script-loading.html

    Admin

    Syahir Hakim

    #37498

    This line:

    <script src="acac1.js" type="text/javascript"></script>

    shows that you’re trying to load the acac1.js file, but as you might expect, that’s not the correct way to do it.

    First off, where is that acac1.js file located on your server?

    mag

    #37499

    Right now it is in the graphene-child folder. I have tried it in nearly every folder along with the images. It works when in the site root and when in the theme root. and even works in other locations if I add the path and make sure the images are in the same folder. But no matter where I place it , it only works on the home page. The other pages show an error. I’ve googled the error and the script – no help.

    ReferenceError: ac1init_doc is not defined

    Admin

    Syahir Hakim

    #37500

    Hang on, let’s do this one by one. So you’ve placed the acac1.js file in your child theme’s folder. Create a functions.php file in your child theme and add this code:

    <?php
    /**
    * Enqueue custom scripts
    */
    function my_enqueue_scripts(){
    if ( ! is_admin() ) {
    wp_enqueue_script( 'acac1', get_stylesheet_directory_uri() . '/acac1.js', array(), false );
    }
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

    mag

    #37501

    You are a genius! Thank YOU!

    The change in the functions.php initially broke the front page accordion too.

    and then it was also reporting the error that was on the other page.

    ReferenceError: ac1init_doc is not defined

    So I went back into the wizard that builds the script/html.

    Instead of using the option of “no folder’ I defined a folder and uploaded the entire folder to the child theme root and used the generated html IE:

    <script src="FOLDERLOCATION/acac1.js" type="text/javascript"></script><script>ac1init_doc('FOLDERLOCATION',0);</script>

    Then I revised the paths in the functions.php and the widget. It works perfectly and isn’t choking on load.

    Here is a link… it might not be there very long since I will probably delete after matching her current site.

    Wanted to get the accordion out of the way.

    http://ourfamilysrecipes.com/pic

    Here is her original site using the sliding door theme.

    http://paulainchina.com

    Personally, I’d like to see the images linking to something.- she doesn’t want that. Maybe a lightbox might be nice.

    THANK YOU AGAIN!

    I am amazed at how versatile this theme is. I wish I had more coding knowledge to take advantage of everything it has to offer.

    I have another question related to templates – I’ll make a new thread.

    mag

    #37502

    So sorry but I have another question.

    The new idea is to have more sliders on different pages.

    I added another script etc. and tried to add it to the functions.php but I am getting the error again. The first script listed is still working fine.

    I tired to add another en-queue line directly under the first one.

    I searched documentation using snippets of code and there are various examples and it seemed to be that I was doing it correctly but I must not be resolving things correctly – bad punctuation somewhere.

    Any advice will be greatly appreciated.

Viewing 9 posts - 1 through 9 (of 9 total)

  • You must be logged in to reply to this topic.