Deep Embed with iFrame and WordPress Utilizing Canvas and Particles.js
Recently, I wanted to do a little touch-up on my website. The goal was to add a particles.js
I was able to configure the parameters more, according to the contrasting colors and style of my site’s blueprint background. My goal with the particles was to have a sort of “pick-up sticks” feel as far as the particles’ length and the numbers go, and also a contrasting orange for the stroked-base area of the particles to contrast the blueprint background.
Inside the CodePen CSS panel:
I changed the background-color and background-image settings so that my blueprint background image could seamlessly merge with the particles.js elements without overlap of any kind.
Once I had gone through all of the parameters of the particles.js library and chosen my preferred styles and parameters, and finished my CSS customization work, I was ready for integration of the new design into my site. I wanted to have the exact same working code I had been using at CodePen. So I went to the bottom-right area of the CodePen interface and pressed the Embed Button. From there I downloaded a zipped version of my project.
The next step was to get this zipped code embedded into my website’s front page via WordPress and FTP. The first thing I did was create a new directory on my webserver.
The next step was to extract all files from my zipped project folder and upload them into
my brand new directory—and inside, also create a CSS and JS directory to upload the corresponding files into.
If you do not have FTP access to your WordPress server, you can use this great WordPress plugin solution.
Once I installed the plugin, I proceeded to create a new directory on my server, and then upload the remaining extracted files into the brand new directory—and inside, also create a CSS and JS directory to upload the corresponding files into.
Now came the tricky part: How to embed this code into WordPress
This part had been troublesome for me in the past, trying to wrestle with the WordPress WYSIWYG editor with no desired results to show for it, even though I was embedding code directly from working models, both live online and from my native machine—not to mention working CodePen examples, too.
With some digging online, I found numerous sources which spoke of an iFrame solution.
Could they lead to the ugly solution to a beautiful problem? For this project, YES!
It was the old iFrame tag I had not used to embed content in many years that was now the solution to my HTML5 Canvas woes inside of WordPress. Wow.
<div id="iframeHolder" style="text-align: center;">
Lastly, I added a Div called iframeHolder so I could style the iFrame and its border too.
Here is the extra CSS code I embedded using the plugin below:
right: 128px; /* to offset right margin*/
border:.1px solid rgba(118, 156, 191, 0); /* styled .1 px blue opacity 0 (to match blueprint bg)*/
Now for embedding those rascally codes into your WordPress pages
Once installed, I took the above CSS code and added it to Easy Code Manager’s code panel.
Then I assigned the code only to the front page in the Easy Code Manager’s
Assignments page panel, and saved the setting as css_blueprintparticles.