wordpress run javascript code on every post

Question

I am developing a website and I created a js script that creates side menu for me.

It reads all the headings and creates scroll menu.

It works perfectly the problem that I am facing now is that I have to call the js function on every post page. Since I'll have lots of posts on my web page this could be a bit time consuming. Any way to make my script load automatically every time a post is being shown on web page?

My code if anyone is interested is bellow:

   

function create_navigation() {
        allid = []; //tabela z vsemi id ji, ki morajo biti v meniju
        elements = document.getElementsByTagName("h1");
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].id != "") {
                allid.push(elements[i].id)
            }
        }

        elements = document.getElementsByTagName("h2");
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].id != "") {
                allid.push(elements[i].id)
            }
        }


        for (var i = 0; i < allid.length; i++) {
            var table = document.getElementById("qweqwe");
            var row = table.insertRow(i);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = "<a href=\"#" + allid[i] + "\" class=\"_ps2id _mPS2id-h mPS2id-highlight mPS2id-highlight-first mPS2id-highlight-last\" data-ps2id-offset=\"\">" + document.getElementById(allid[i]).innerHTML +
                    "</a>";
        }
    }

Currently I call the function create_navigation on every post page that I want it to appear.

Also is this the correct way of doing this? I am kinda inexperienced in Wordpress and had time coming with better idea of dynamically creating side menu.

edit php code is bad, Wordpress is built in the way you can make such changes w/o code edit. If you edit php code you will start to have issues while updating WP itself. Build extension if you want to edit php. — Lukas Liesis
– Lukas Liesis, Commented Jan 5, 2017 at 7:53

mMoovs · Accepted Answer · 2017-01-05 08:15:57Z

1

The best solution would be to add this code to the themes JS file. That way it's loaded on every page load.

If there isn't a JS file in the theme, just create one:

1.Create file, ie. scripts.js

2.Place it in themefolder/js/

3.Add this to themes functions.php (located in theme root folder)

function theme_scripts() {
    wp_enqueue_script( 'theme-js', get_theme_file_uri( '/js/scripts.js' ), array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

answered Jan 5, 2017 at 8:15

mMoovs

9349 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lukas Liesis · Accepted Answer · 2017-01-05 07:55:31Z

0

If you use theme which allows adding custom code, just use those options.

If not, you can simply use html block on sidebar and add your script there.

Go to http://Your-site.com/wp-admin/widgets.php and add simple HTML widget to sidebar, then add your js inside it and save. Make sure your sidebar is visible on every page though. Or just place widget in different location, which is visible on every page.

answered Jan 5, 2017 at 7:55

Lukas Liesis

26.6k12 gold badges123 silver badges124 bronze badges

2 Comments

Kristjan Over a year ago

I used your 2nd idea and it works perfectly! Thanks!

Kristjan Over a year ago

Oh sorry. Forgot to hehe.

Collectives™ on Stack Overflow

wordpress run javascript code on every post

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related