I need to embed processing code in my Wordpress

Hi there! I need to insert a processing code in wordpress, but I’m going crazy and I can’t do it. Does anyone know how I can do it?


1 Like


Welcome to forums.

The way I have solved it was to circumvent Wordpress. If anybody knows how to solve it better I’m interested to know too.

  • So I’ve created a folder for for HTML-files and subfolder for Javascript files under the root of HTTP-server. Java based processing should work in similar manner. I wanted to try p5xjs and to make things a bit easier.
  • On my website I have created a redirection to the folder above. So on my website meditations.harrikemppainen.com is directed to https://harrikemppainen.com/meditations/.
  • for each script there is a HTML-file and related processing javascript file. NOTE! html file needs to have .shtml filename extension.

HTML itself is very basic

`<?xml version="1.0" encoding="UTF-8?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homage to HC Berg</title>
<script src="[https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js](view-source:https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js)"></script>
<script language="javascript" type="text/javascript" src="[js/homage_to_hcberg.js](view-source:http://harrikemppainen.com/meditations/js/homage_to_hcberg.js)"></script>
<style> body { padding: 0; margin: 0; } </style>
<body> </body>
1 Like

Some related resources (for putting p5.js sketches in wordpress, not Processing):

The wiki entry on embedding using iframes and/or widgets:

Wordpress plugins / blocks:

Past related discussions:


1 Like

Thanks for all, but I couldn’t resolve it. I’m a graphic designer, and I’m not a java expert. When I introduce the code in codepen, it says that there is a SyntaxError: Unexpected token ‘{’. Parse error. When I try the code in Processing source code editor everything is ok.

Kind regards

1 Like

Ah. You are trying to put processing on your website, not p5.js, Your processing code won’t work in codepen or the p5.js editor, because it is a Java dialect, not JavaScript. Your browser has no way to run it.

If you are trying to create new web-native sketches, use p5.js instead.

If your Processing sketches are simple and you want to run their code as-is, the best way is to use processing.js, which translates them into JavaScript behind-the-scenes.

OpenProcessing.org let’s you create portfolio of embeddable sketches as part of membership – that is definitely the easiest option. https://www.openprocessing.org/. Otherwise you can add processing.js yourself to your Wordpress site to make each sketch run.

1 Like

Thanks again! but I don’t want any frame, and I need a free option. Do you know where I can found it?

One free option is the last one that I mentioned:


sorry, I do not understand. How do I embed it by my own?

Click on Quick Start, and read the instructions. For example,


If you have read and attempted to follow the instructions and still get stuck, describe the error or problem and ask for help here!

1 Like

@jeremydouglass @GoToLoop
Sorry, I couldn’t answer earlier. But the truth is that I am not being able to integrate it into the wordpress. This is the web: http://cndae.com.ar. Now the last code you sent is at the end. I uploaded the files: .pde and minified processing.min.js.
Thanks for all

On your HTML I could only spot 2 places w/ “.pde” references:

  1. <div class="et_pb_code_inner"><iframe src="http://cndae.com.ar/wp-content/uploads/2020/04/dibuja.pde"
  2. <canvas data-processing-sources=dibuja.pde></canvas> </div>

The URL http://cndae.com.ar/wp-content/uploads/2020/04/dibuja.pde seems inaccessible.

But inside my browser’s source tab that “.pde” showed up w/ HTML content!

If you prefer hosting the “.pde” sketch inside an <iframe> tag you should take a look at here:

And here:

The 4 <iframe> result:

1 Like

Thanks! but I don’t have the same result. I tried with it too:

<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>
<script defer src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js></script>
<iframe src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.jsl></iframe>

I don’t understand, in the element: script I need to add the processing.min.js and in iframe my .pde file? because it render like this:


An <iframe> tag is a way to embed a child HTML file into the main 1:

B/c that creates a separate context, all dependencies like libraries, and assets like images, need to be loaded from within the <iframe>'s HTML file.

That’s why I’ve posted those links to “index.html” files, so you could see how they’re used for <iframe> tags, both as parent & nested HTML roles.

1 Like
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>
<script defer src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js></script>
<iframe src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js></iframe>

I tried it, but it doesn’t work. I know, I’m not a programming engineer. I can’t believe it is so difficult.

I’ve already showed & told you that an <iframe> tag is for HTML files:

But again you’re instead trying to load a JS file inside an <iframe> tag:

I think I am understanding. But I need help. I have to create a complete html file, do I upload it to media? or directly embed it on the wordpress page. But later, how do I embed the .pde and .js files?