Update March 2021: I polished and published the plugin. Find out more here: p5.js WordPress Legacy Update or head straight to the GitHub.
This custom plugin allows me to embed p5.js projects in my WordPress posts/pages using a shortcode!
I use it in posts like AnAbstractHug, Pixel Summer Storm, and more!
As always if you're interested in one of my plugins, please contact me! I haven't released this officially yet because the code is unpolished, but if you're interested I can give it another pass!
The Grand Story
I started trying with a plugin called ProcessingJS for WordPress by Rolf van Gelder - Which was for ProcessingJS and not p5js! p5js scripts seem to require a blank document, with p5js and the script placed in the header.
My answer was an iframe, which lets you embed a mini-webpage into another page - this way, multiple p5js scripts can be added to posts!
I couldn't find a way to specify the contents of an iframe in-line in php, because iframes embed pre-existing content. I created a php template file for all p5js scripts called p5js-iframe.php for this.
Because the iframe was an independent document, I couldn't tell it directly what scripts to include, so I passed the script file locations via GET request / query string in the source url:
<!-- the iframe source url with file locations passed -->
iframe src="p5js-iframe.php?p5js=/wp-content/plugins/p5js-wp/js/p5.min.js&src=/media/AnAbstractHug.js"<!-- the php document translating those into script embeds -->
<script type="text/javascript" src="<?php echo $_GET['p5js']; ?>"></script>
<?php if (isset($_GET['src'])) { ?>
<script type="text/javascript" src=<?php echo $_GET['src']; ?>></script>This means I can't embed the script contents directly in the post. I can't pass the script to the iframe directly because urls have a max length on some platforms, so it might work inconsistently. This means I need to pass the link to an external file into the iframe for it to reference. I upload these like you would an image, and it seems to work fine. It's much cleaner than trying to edit the code inside the post anyhow.
Thanks for reading and I hope you found it interesting!
