# I need to embed processing code in my Wordpress

**URL:** <https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944>\
**Category:** Coding Questions\
**Created:** [May 16, 2020, 4:16pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944 "2020-05-16T16:16:26Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![cndae](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@cndae](https://discourse.processing.org/u/cndae)\
**Post date:** [May 16, 2020, 4:16pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/1 "2020-05-16T16:16:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [May 16, 2020, 5:34pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/2 "2020-05-16T17:34:19Z")

</div>

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](http://meditations.harrikemppainen.com) is directed to [https://harrikemppainen.com/meditations/](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

```auto
`<?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>`

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 16, 2020, 8:20pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/3 "2020-05-16T20:20:38Z")

</div>

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

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

- [https://github.com/processing/p5.js/wiki/Embedding-p5.js](https://github.com/processing/p5.js/wiki/Embedding-p5.js)

Wordpress plugins / blocks:

> **[Responsive P5JS for WP](https://wordpress.org/plugins/responsive-p5js-for-wp/)**
>
> Embed your P5JS sketches in posts and pages in a responsive way

> **[p5.js Block](https://wordpress.org/plugins/wp-p5js-block/)**
>
> Run p5.js in your WordPress site with this Gutenberg block.

Past related discussions:

[https://discourse.processing.org/search?q=%22%20wordpress%22](https://discourse.processing.org/search?q=%22%20wordpress%22)

---

<div class="post-metadata">

**Author:** ![cndae](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@cndae](https://discourse.processing.org/u/cndae)\
**Post date:** [May 16, 2020, 9:37pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/4 "2020-05-16T21:37:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 16, 2020, 11:15pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/5 "2020-05-16T23:15:42Z")

</div>

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](http://OpenProcessing.org) let’s you create portfolio of embeddable sketches as part of membership – that is definitely the easiest option. [https://www.openprocessing.org/](https://www.openprocessing.org/). Otherwise you can add processing.js yourself to your Wordpress site to make each sketch run.

---

<div class="post-metadata">

**Author:** ![cndae](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@cndae](https://discourse.processing.org/u/cndae)\
**Post date:** [May 17, 2020, 2:00am UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/6 "2020-05-17T02:00:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 17, 2020, 2:02am UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/7 "2020-05-17T02:02:54Z")

</div>

One free option is the last one that I mentioned:

> [@jeremydouglass](#):
>
> Otherwise you can add processing.js yourself to your Wordpress site to make each sketch run.

> **[GitHub - processing-js/processing-js: A port of the Processing visualization...](https://github.com/processing-js/processing-js)**
>
> A port of the Processing visualization language to JavaScript. - GitHub - processing-js/processing-js: A port of the Processing visualization language to JavaScript.

---

<div class="post-metadata">

**Author:** ![cndae](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@cndae](https://discourse.processing.org/u/cndae)\
**Post date:** [May 17, 2020, 2:19am UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/8 "2020-05-17T02:19:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 17, 2020, 2:35am UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/9 "2020-05-17T02:35:06Z")

</div>

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

[http://processingjs.org/articles/p5QuickStart.html#creatingpjswebpage](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!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 17, 2020, 2:56am UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/10 "2020-05-17T02:56:17Z")

</div>

> [@Can i import my stuff into wallpaper engine?](https://discourse.processing.org/t/can-i-import-my-stuff-into-wallpaper-engine/153/5):
>
> This is the most basic “index.html” template for running “.pde” sketches under Pjs: \<script defer src=http://CDN.JSDelivr.net/processing.js/latest\>\</script\> \<canvas data-processing-sources=sketch.pde\>\</canvas\> Just replace the “sketch.pde” w/ the actual name of your “.pde” file. Here’s an online example: angel[https://GoSubRoutine.GitHub.io/Grumbo/Grumbo\_Adventure\_OOP/Grumbo\_Adventure/](https://GoSubRoutine.GitHub.io/Grumbo/Grumbo_Adventure_OOP/Grumbo_Adventure/) And its corresponding “index.html” file: For multiple “.pde” files for the same sketch, just place …

---

<div class="post-metadata">

**Author:** ![cndae](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@cndae](https://discourse.processing.org/u/cndae)\
**Post date:** [May 31, 2020, 11:50pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/11 "2020-05-31T23:50:28Z")

</div>

@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](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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 1, 2020, 7:40pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/12 "2020-06-01T19:40:30Z")

</div>

> [@cndae](#):
>
> I uploaded the files: .pde

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](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:

> <https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/master/index.html>

And here:

> <https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/master/pjs_java/index.html>

The 4 `<iframe>` result:  
[GoSubRoutine.GitHub.io/Ball-in-the-Chamber](http://GoSubRoutine.GitHub.io/Ball-in-the-Chamber)

---

<div class="post-metadata">

**Author:** ![cndae](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@cndae](https://discourse.processing.org/u/cndae)\
**Post date:** [June 4, 2020, 2:18am UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/13 "2020-06-04T02:18:11Z")

</div>

> [@GoToLoop](#):
>
> `<script defer src=frameResize.js></script>`

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

```auto
<!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:

 ![Captura de Pantalla 2020-06-03 a la(s) 23.17.24](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1751407e113cdd2abe9daac5e5f50121c3dc9279.png)

Thanks!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 4, 2020, 9:23am UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/14 "2020-06-04T09:23:43Z")

</div>

> [@cndae](#):
>
> … I need to add the processing.min.js and in iframe my .pde file?

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](http://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.

---

<div class="post-metadata">

**Author:** ![cndae](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@cndae](https://discourse.processing.org/u/cndae)\
**Post date:** [June 5, 2020, 5:52pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/15 "2020-06-05T17:52:51Z")

</div>

```auto
<!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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 5, 2020, 6:06pm UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/16 "2020-06-05T18:06:19Z")

</div>

> [@cndae](#):
>
> `<iframe src=http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js></iframe>`

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

> [@GoToLoop](#):
>
> 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.

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](http://cndae.com.ar/wp-content/uploads/2020/04/processing.min.js)

---

<div class="post-metadata">

**Author:** ![cndae](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@cndae](https://discourse.processing.org/u/cndae)\
**Post date:** [June 13, 2020, 1:46am UTC](https://discourse.processing.org/t/i-need-to-embed-processing-code-in-my-wordpress/20944/17 "2020-06-13T01:46:18Z")

</div>

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?