javascript not working in page or post

Goto your themes folder and open functions.php

add this:

function bjerreandersen_load_js() {

wp_register_script('bjerreandersen', get_template_directory_uri() . '/js/hidden.js', array('jquery'), false, true);
wp_enqueue_script('bjerreandersen');

}

add_action( 'wp_enqueue_scripts', 'bjerreandersen_load_js' );

Then you need to copy hidden.js from ‘https://bjerreandersen.dk/kom/hidden.js‘ to ‘wp-content/themes/good-bones/js’

And that should do it ??

Your script is not loading. WP does things a little differently than traditional html/js type sites.

Thanks for the answer Keith!

I’ve copied hide.js (formerly known as hidden) to good-bones’ javascript folder, that has a little longer path than the one you suggested … and I changed that path in the code you gave me as well and added it in the end of functions.php (does this means it will load on every page/post, btw?)

I have also included the stylesheet for the script (which seems to be important for the visual part) to my custom CSS-file instead of loading it seperatly. Which seems to work.

But still something else is not working. I guess I’m confused what exactly needs to be included in hide.js and what can/should/must be let out.

Right now hide.js looks like this

<script type="text/javascript">
            $(function () {
                $('#intro').each(function () {
                    $('span.romance-toggle').on('click', function () {
                        var _this = $(this);
                        if (_this.hasClass('clicked')) {
                            $('#romance-' + _this.attr('rel')).hide();
                            _this.toggleClass('clicked');
                        } else {
                            $('#romance-' + _this.attr('rel')).fadeIn(500);
                            _this.toggleClass('clicked');

                        }
                    });
                });

            });
        </script>

…and on the page (/test4) I’ve only got the styled text itself. Should I make a reference to a bigger java-library at some point or…?

Glad it worked! Yes, it will load on every page but you can add conditional tags such as:

<?php
if ( is_home() ) {
    function bjerreandersen_load_js() {

wp_register_script('bjerreandersen', get_template_directory_uri() . '/js/hidden.js', array('jquery'), false, true);
wp_enqueue_script('bjerreandersen');

}

add_action( 'wp_enqueue_scripts', 'bjerreandersen_load_js' );
}

In this example it would ONLY load on the homepage ??

What you are trying to use is called jQuery UI – which includes the ‘hide’ effect. This is not included by default with WP. Google hosts it on their CDN so adding this to your functions.php file in your theme folder will do the trick ??

wp_register_script('jquery', ' <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>', array(), '1.10.3'); // Google CDN jQuery UI
    	wp_enqueue_script('jquery');

This code simply tells WP to load it up. The code you already have tells it to fire when needed but because you did not tell WP to load jQuery UI it didn’t do anything ??

@bjerreandersen, Are you using no-conflict wrappers?

Are you accessing your browser’s console log so that you get an actual error message ?

@keith Ok – I tried that as well. But it still doen’t work, I’m afraid.

I’m a total newbie in Javascript, so would really appreciate a walktrough – which code to put where? What exactly should go in hide.js, what should be put in the actual WP-page, the script is going to work on (I only need it on one page for now…). The code that is working outside WP is in its entirety:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></script>
        <script type="text/javascript">
            $(function () {
                $('#intro').each(function () {
                    $('span.romance-toggle').on('click', function () {
                        var _this = $(this);
                        if (_this.hasClass('clicked')) {
                            $('#romance-' + _this.attr('rel')).hide();
                            _this.toggleClass('clicked');
                        } else {
                            $('#romance-' + _this.attr('rel')).fadeIn(500);
                            _this.toggleClass('clicked');

                        }
                    });
                });

            });
        </script>

I’ve already tried to use that code inside the WP-page itself. But no matter what I tried, it ended up adding some invisible <p>-tags, that screwed up the code. So if it’s supposed to be in the page, and not just called, how do I prevent those p-tags?

@andrew: according to Firebug, there are no actual errors, as far as I can see… But I guess the wrappers could make a difference, if everything else is set correctly. So far, it didn’t do the trick :-l

thank you in advance!

Bjerre, I think the part you missed was this:
Then you need to copy hidden.js from ‘https://bjerreandersen.dk/kom/hidden.js&#8217; to ‘wp-content/themes/good-bones/js’

Aack! I wasn’t finished typing! Let’s try again.

I don’t think you can put the javascript code directly in the admin side of the page or post. I think you have to put it in a separate file which will go inside the js folder. And then in the functions.php file, you give the instructions how to find that file.

Apologies if this is wrong — I’m trying to figure out how to put javascript in myself.

It’s great to learn new stuff but if you just want to get it done and be on your way you could try this plugin Collapse-O-Matic ??

@keith thank’s a lot for the advice – the plugin is a bit slower and a little less smooth than the script, but at least it works!

Now its live on bjerreandersen.dk/cv – it’s the beginning of my resume, in fact ??

(I’ll dig into javascript another time – would be great, though, if WP had a more step-by-step like guide in the codex instead of some description, that you’ll almost only understand if you’re that smart that you don’t need to …)

f