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?
Thanks
1 Like
Hi,
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">
<head>
<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>
</head>
<body> </body>
</html>`
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:
https://discourse.processing.org/search?q=%22%20wordpress%22
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,
http://processingjs.org/articles/p5QuickStart.html#creatingpjswebpage
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:
<div class="et_pb_code_inner"><iframe src="http://cndae.com.ar/wp-content/uploads/2020/04/dibuja.pde"<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:
GoSubRoutine.GitHub.io/Ball-in-the-Chamber
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:
Thanks!
An <iframe> tag is a way to embed a child HTML file into the main 1:
Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe
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:
http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js
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?