0

I have found some code I want to use to a single page in my wordpress site, but I cannot find the way to do it. I am not a developer, but a newbie.

I have html and css ready, but I don't know how to run this javascript code to a page with id 2922, every time the page loads.

$(function () {
var parent = $("#shuffle");
var divs = parent.children();
while (divs.length) {
    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});

Thanks for your help, Thodoris

Improve this question
2
  • codex.wordpress.org/Using_Javascript Commented Feb 11, 2016 at 10:27
  • I can't make it work. :/ Commented Feb 11, 2016 at 10:41

3 Answers 3

Reset to default
1

You can do this from jQuery. In your script add condition to check if body has class of that page id is same as your page-id-2922, if yes then run the code.

I have updated your script, try using it:

$(function () {

    if( $('body').hasClass('page-id-2922') == true ){
        var parent = $("#shuffle");
        var divs = parent.children();
        while (divs.length) {
            parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
        }
    }

});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Where exactly to put this code? How to do this from jQuery, as you said?
@ThodorisKonsoulas - just use this in your any custom js file you write. & it will work, It doesnt need php code & It is the standard practice to write code instead using multiple language for a single functionality.
0

You can write this code in footer.php[site/wp-content/your-theme/footer.php]

<?php if(get_the_ID()== 2922){ ?>
 <script type='text/javascript'>
        jQuery(function () {
            var parent = jQuery("#shuffle");
            var divs = parent.children();
            while (divs.length) {
                parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
            }
        });
    </script>

or read this https://www.tipsandtricks-hq.com/how-to-add-javascript-in-a-wordpress-post-or-page-1845

Improve this answer

2 Comments

The script is working! Thanks @Ram! I've used different "if", because yours isn't working. The final code: <?php if ( is_page( 3318 ) ) : ?> <script type='text/javascript'> jQuery(function () { var parent = jQuery("#shuffle"); var divs = parent.children(); while (divs.length) { parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); } }); </script> <?php endif; ?> (ID is different because I created a new page).
Script wasn't working below <head>, but it worked above </head>.
0

You can add it into the single.php with a conditional like so:

<?php if ( is_page(3318) ) : ?>
    <script type='text/javascript'>
        $(function () {
            var parent = $("#shuffle");
            var divs = parent.children();
            while (divs.length) {
                parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
            }
        });
    </script>
<?php endif; ?>

It will add the escript on the page only if it is the single post with ID 3318.

EDIT: added right answer and changed to the correct ID.

Improve this answer

14 Comments

Thanks for your help. I have tested your script but nothing happened. Here is the page: fomo.gr/test-page-2. There is no random order for images.
Are you sure the ID is 2911? Did you check if the script gets outputted into the page? Your page looks to have a different ID, so it won't add the script
I put the correct ID (3318), but still nothing. My page uses the theme's "template-fullwidth.php". Maybe try there the above code?
Yes. Or as others suggested put it in the footer or header files, those files load for every page/post.
Nothing again. No random order. :( Maybe the "is_single(3318)" isn't working?
|