[NathanParticipant]

I have some JS that I want to be the background of my website. Where do I put the HTML/CSS/JS?

You can view the code & demo here: http://codepen.io/anon/pen/MKZMRO

Basically I want it to be static in position but full-page, and I also want to be able to add a fullscreen image that is semi-transparent (also static) that can layer on top of the JS.

Thanks so much!

[LelyModerator]

Hi Nathan,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then add the following on your child theme’s function.php file:

function particle_js() { ?>

<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<?php }

add_action( 'wp_head', 'particle_js' );
function particle_js_html() { ?>

<div id="particles-js"></div>
<script>
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 1341.5509907748635
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.66,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 1,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 0.66,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 4,
        "size_min": 0.3,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 100,
      "color": "#ffffff",
      "opacity": 0.1,
      "width": 0.7
      
    },
    "move": {
      "enable": true,
      "speed": 0.2,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": true,
        "rotateX": 600,
        "rotateY": 600
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "bubble"
      },
      "onclick": {
        "enable": false,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 250,
        "size": 0,
        "duration": 2,
        "opacity": 0,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
  stats.begin();
  stats.end();
  if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
    count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
  }
  requestAnimationFrame(update);
};
requestAnimationFrame(update);;
</script>

<?php }

add_action( 'wp_footer', 'particle_js_html' );

Also add the CSS on Appearance > Customize > Custom > CSS

Hope this helps.

[NathanParticipant]

Cool, one step closer. This adds it to the footer (and I guess the header) but doesn’t make it the background of my website. I want all my content to be on top of this. What’s the last step?

[NathanParticipant]

Actually I think part of the problem may be that the background color won’t set to “transparent”. I can’t figure out what’s causing it either, even with Chrome Dev tools.

[FriechModerator]

Hi There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks!

[NathanParticipant]

This reply has been marked as private.

[RadModerator]

Hi Nathan,

The given login is incorrect. But I did some check, with the code. Have you tried changing the background color to transparent through that code? It’s not connected to customizer, there is no way it can be changed through customizer’s option.

And that code isn’t working, I’m not sure which background you’re referring. Is it the background added through customizer, or background added by that code?

If it’s just background image, then you can simply edit each of your page or posts, and add a background like from the screenshot.

The code is not really working as it throws issue, maybe conflicting to other scripts. Or, maybe it’s cache. Please clear your caching and disable them. Cache is no use during development as you will always clear them just to see your made changes. It’s just causes more issues during development.

Thanks.

[NathanParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

In that case, please add this code to your child theme’s functions.php replacing all of the above.

add_action('wp_footer', 'particle_background', 9999 );

function particle_background () { if ( get_post_meta( get_the_ID(), 'enable_particles', true ) == "true" ) : ?>

<style>

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000;
  background-image: url("http://www.widebluesound.com/wp-content/uploads/2016/02/background-stars.png");
  background-repeat: repeat-x;
  background-size: 65%;
  background-position: 0% 0%;
}

/* ---- stats.js ---- */

.count-particles {
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}

/* hide background that set by customizer */
.backstretch {
display: none !important;
}
</style>

<div id="particles-js"></div>

<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script>

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 125,
      "density": {
        "enable": true,
        "value_area": 1341.5509907748635
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": .75,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 2,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 1,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 10,
        "size_min": 0.3,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 65,
      "color": "#ffffff",
      "opacity": 0.2,
      "width": .66
      
    },
    "move": {
      "enable": true,
      "speed": 0.4,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": true,
        "rotateX": 500,
        "rotateY": 500
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "bubble"
      },
      "onclick": {
        "enable": false,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 250,
        "size": 0,
        "duration": 2,
        "opacity": 0,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
  stats.begin();
  stats.end();
  if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
    count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
  }
  requestAnimationFrame(update);
};
requestAnimationFrame(update);;

</script>

<?php endif; }

This may still require enhancement since we can’t just compare it to the rendered output in codepen. It has no content, compared to the pages that have complex elements and z-indexes.

Then, you can edit any of your target page and add custom field named enable_particles with value of true. Any page or post that has this custom field will use particle background, instead of global.

Thanks!

[NathanParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

It should be custom field with name of enable_particles and value of true.

No need to touch and move the code, unless you’ll need to change your javascript and CSS. This should stay intact,

add_action('wp_footer', 'particle_background', 9999 );

function particle_background () { if ( get_post_meta( get_the_ID(), 'enable_particles', true ) == "true" ) : ?>

<code><! -- your code here --></code>

<?php endif; }

I can’t guarantee if this will work, this is just the first step since you wish to implement it to a specific page. Fixing the javascript and other stuff are different, once you did, I’ll check if it’s possible to solve or you may consult it to your developer.

Thanks.

[NathanParticipant]

This reply has been marked as private.

[LelyModerator]

Hi Nathan,

Please remove the following code from Appearance > Customize > Custom > CSS:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-9537275-10', 'auto');
  ga('send', 'pageview');

</script>

Above is a javascript code not a CSS. That code should go to Appearance > Customize > Custom > Javascript:. When you move it on Custom > Javascript <script> tag is not necessary.
Add it like below:

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-9537275-10', 'auto');
  ga('send', 'pageview');

Then on your test page:http://www.widebluesound.com/wp-admin/post.php?post=715&action=edit on the upper left part, click Screen Options > Check Custom Fields.
Then, you can edit any of your target page and add custom field named enable_particles with value of true. Any page or post that has this custom field will use particle background, instead of global.

Hope this helps.

[NathanParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Nathan,

To make it work, please change the entire code in your child theme’s functions.php file with this.

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Additional Functions
// =============================================================================

// JS for WBS Particle Background
function my_custom_head_output() { if ( get_post_meta( get_the_ID(), 'enable_particles', true ) == "true" ) :
  ?>
<style>

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000;
  background-image: url("http://www.widebluesound.com/wp-content/uploads/2016/02/background-stars.png");
  background-repeat: repeat-x;
  background-size: 65%;
  background-position: 0% 0%;
}

/* ---- stats.js ---- */

.count-particles {
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}

/* hide background that set by customizer */
.backstretch {
display: none !important;
}
</style>
  <?php
  endif;
}

add_action( 'wp_head', 'my_custom_head_output', 99999 );

add_action('wp_footer', 'particle_background', 9999 );

function particle_background () { if ( get_post_meta( get_the_ID(), 'enable_particles', true ) == "true" ) : ?>

<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script>

particlesJS("body", {
  "particles": {
    "number": {
      "value": 125,
      "density": {
        "enable": true,
        "value_area": 1341.5509907748635
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": .75,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 2,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 1,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 10,
        "size_min": 0.3,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 65,
      "color": "#ffffff",
      "opacity": 0.2,
      "width": .66
      
    },
    "move": {
      "enable": true,
      "speed": 0.4,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": true,
        "rotateX": 500,
        "rotateY": 500
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "bubble"
      },
      "onclick": {
        "enable": false,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 250,
        "size": 0,
        "duration": 2,
        "opacity": 0,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
  stats.begin();
  stats.end();
  if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
    count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
  }
  requestAnimationFrame(update);
};
requestAnimationFrame(update);;

</script>

<?php endif; }

As this is a custom development, further customizations from here is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. https://theme.co/community/custom-development/

Thanks

[Author]

Posts