Adding interactive elements to Wordpress

Hi
What I would like to know is how to add small animations jquery plugins to spice up my page like I do easily in plain html pages.

I cant find any complete guide on how to add custom javascript to a SPECIFIC page in a theme. Also adding the custom javascript in a no conflict like (jQuery.noConflict?) mode would be awesome - because all the WP themes has a lot of javascript that could be conflicting right? Or educate me here on how to solve conflicting scripts?

I would like to add this script to my “Salient” theme :
https://codepen.io/justincavery/pen/qHfrl:

This is what it contains :

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>RWD SVG Line Drawing</title>

    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
    
    <link rel="stylesheet" href="css/normalize.css">      
    
    
  </head>

  <body>

    <div id="RWDis-logo">  
  
</div>


 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/jquery.lazylinepainter-1.4.1.js'></script>

        <script src="js/index.js"></script>

    
    
  </body>
</html>

/* 
 * Lazy Line Painter - Path Object 
 * Generated using 'SVG to Lazy Line Converter'
 * 
 * http://lazylinepainter.info 
 * Copyright 2013, Cam O'Connell  
 *  
 */ 
 
var pathObj = {
    "RWDis-logo": {
        "strokepath": [
            {
                "path": "M238.2,402.6c-2.3-170.7,2.9-362.7,2.9-362.7   l49.4-7.1l74.1-10.6l17.7,445.9",
                "duration": 143
            },
            {
                "path": "M 241.2,39. L 255.3,60.6 373.9,44.2  ",
                "duration": 143
            },
            {
                "path": "M 364.7,22. L 389.6,83.8 410.6,471.8    412.2,486.8  ",
                "duration": 243
            },
            {
                "path": "M305.6,235.5c0,0,43.4-4.9,53.4,44.2   c0,0,2.1,51.4-53.4,54.4c0,0-47.3,2.6-49.6-45.5C255.9,288.6,255.3,241.9,305.6,235.5z",
                "duration": 143
            },
            {
                "path": "M294.1,334.3c0.2,23.8,0.3,47.5,0.5,71.3",
                "duration": 143
            },
            {
                "path": "M 322.8 424.7 L 320.6 332.8",
                "duration": 143
            },
            {
                "path": "M 290.6 32.9 L 292.6 236.8",
                "duration": 143
            },
            {
                "path": "M 315.4 29.3 L 318.7 235.4",
                "duration": 143
            },
            {
                "path": "M 255.3 60.6 L 252.7 406.4",
                "duration": 143
            },
            {
                "path": "M 303 52.1 L 292.6 33.9",
                "duration": 165
            },
            {
                "path": "M 325 48.9 L 317 30.6",
                "duration": 198
            },
            {
                "path": "M 391.8,12 L 367,81.1 240.6,95.2    261.2,129.5  ",
                "duration": 132
            },
            {
                "path": "M 366.9,13 L 349.8,91.8 263,101.5    263,181.5 352.3,170.8 349.1,92.7  ",
                "duration": 100
            },
            {
                "path": "M 355.7,263. L 353.6,197.5 263.1,205.6    262.3,260.6  ",
                "duration": 176
            },
            {
                "path": "M 263 406 L 263 315",
                "duration": 143
            },
            {
                "path": "M 356.9 295.6 L 360.6 454.2",
                "duration": 153
            },
            {
                "path": "M 291.6 290.6 L 322.8 275.2",
                "duration": 143
            },
            {
                "path": "M 299.5 278.5 L 329.7 319.7",
                "duration": 153
            },
            {
                "path": "M 95.4,473. L 97.4,433.4 299.5,422.6    301.5,471.4  ",
                "duration": 99
            },
            {
                "path": "M 105.2,415. L 286.1,407.2 291.6,406.9    301.5,420.7 333.9,436.7 312.9,417.4 294.6,408.2  ",
                "duration": 99
            },
            {
                "path": "M97.2,436.7l-8.7-3.3c0.3-1,19-17.8,19-17.8",
                "duration": 199
            },
            {
                "path": "M 358.4 358.4 L 263.1 363.6",
                "duration": 129
            },
            {
                "path": "M 263.1 389.9 L 358.4 387.2",
                "duration": 199
            },
            {
                "path": "M 376 50.3 L 388.5 470.5",
                "duration": 199
            },
            {
                "path": "M 383.4 68.5 L 401.4 473.5",
                "duration": 199
            }
        ],
        "dimensions": {
            "width": 1500,
            "height": 1500
        }
    }
}; 


var pathOl = {
    "map": {
        "strokepath": [
            {
                "path": "M238.2,402.6c-2.3-170.7,2.9-362.7,2.9-362.7   l49.4-7.1l74.1-10.6l17.7,445.9",
                "duration": 143
            },
            {
                "path": "M 241.2,39. L 255.3,60.6 373.9,44.2  ",
                "duration": 143
            },
            {
                "path": "M 364.7,22. L 389.6,83.8 410.6,471.8    412.2,486.8  ",
                "duration": 243
            },
            {
                "path": "M305.6,235.5c0,0,43.4-4.9,53.4,44.2   c0,0,2.1,51.4-53.4,54.4c0,0-47.3,2.6-49.6-45.5C255.9,288.6,255.3,241.9,305.6,235.5z",
                "duration": 143
            },
            {
                "path": "M294.1,334.3c0.2,23.8,0.3,47.5,0.5,71.3",
                "duration": 143
            },
            {
                "path": "M 322.8 424.7 L 320.6 332.8",
                "duration": 143
            },
            {
                "path": "M 290.6 32.9 L 292.6 236.8",
                "duration": 143
            },
            {
                "path": "M 315.4 29.3 L 318.7 235.4",
                "duration": 143
            },
            {
                "path": "M 255.3 60.6 L 252.7 406.4",
                "duration": 143
            },
            {
                "path": "M 303 52.1 L 292.6 33.9",
                "duration": 165
            },
            {
                "path": "M 325 48.9 L 317 30.6",
                "duration": 198
            },
            {
                "path": "M 391.8,12 L 367,81.1 240.6,95.2    261.2,129.5  ",
                "duration": 132
            },
            {
                "path": "M 366.9,13 L 349.8,91.8 263,101.5    263,181.5 352.3,170.8 349.1,92.7  ",
                "duration": 100
            },
            {
                "path": "M 355.7,263. L 353.6,197.5 263.1,205.6    262.3,260.6  ",
                "duration": 176
            },
            {
                "path": "M 263 406 L 263 315",
                "duration": 143
            },
            {
                "path": "M 356.9 295.6 L 360.6 454.2",
                "duration": 153
            },
            {
                "path": "M 291.6 290.6 L 322.8 275.2",
                "duration": 143
            },
            {
                "path": "M 299.5 278.5 L 329.7 319.7",
                "duration": 153
            },
            {
                "path": "M 95.4,473. L 97.4,433.4 299.5,422.6    301.5,471.4  ",
                "duration": 99
            },
            {
                "path": "M 105.2,415. L 286.1,407.2 291.6,406.9    301.5,420.7 333.9,436.7 312.9,417.4 294.6,408.2  ",
                "duration": 99
            },
            {
                "path": "M97.2,436.7l-8.7-3.3c0.3-1,19-17.8,19-17.8",
                "duration": 199
            },
            {
                "path": "M 358.4 358.4 L 263.1 363.6",
                "duration": 129
            },
            {
                "path": "M 263.1 389.9 L 358.4 387.2",
                "duration": 199
            },
            {
                "path": "M 376 50.3 L 388.5 470.5",
                "duration": 199
            },
            {
                "path": "M 383.4 68.5 L 401.4 473.5",
                "duration": 199
            }
        ],
        "dimensions": {
            "width": 1500,
            "height": 1500
        }
    }
}; 


/* 
 * INDEX.JS Lazy Line Painter - Path Object 
 * Generated using 'SVG to Lazy Line Converter'
 * 
 * http://lazylinepainter.info 
 * Copyright 2013, Cam O'Connell  
 *  
 */ 


 

 
/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#RWDis-logo').lazylinepainter( 
 {
    "svgData": pathObj,
    "drawSequential":true,
    "delay":700,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"

}).lazylinepainter('paint'); 
 });/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#map').lazylinepainter( 
 {
    "delay":2000,
    "svgData": pathOl,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });/* 
 Setup and Paint your lazyline! 
 */ 



 
 $(document).ready(function(){ 
 $('#undefined').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#undefined').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });

 
 
/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#RWDis-logo').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });

I just cant make it work and not sure what best practice is. I have tried different wp-plugins like “Scrips n Styles”. I have tried Advanced Custom Post types (could not find a complete guide).
I found this similar question but not sure how this works : http://wordpress.stackexchange.com/questions/66921/adding-custom-javascript-to-skeleton-child-theme

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.