# Importing shader .glsl files to Wordpress

**URL:** <https://discourse.processing.org/t/importing-shader-glsl-files-to-wordpress/31821>\
**Category:** Coding Questions\
**Created:** [August 21, 2021, 8:05am UTC](https://discourse.processing.org/t/importing-shader-glsl-files-to-wordpress/31821 "2021-08-21T08:05:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CraigO](https://avatars.discourse-cdn.com/v4/letter/c/9de0a6/32.png) [@CraigO](https://discourse.processing.org/u/CraigO)\
**Post date:** [August 21, 2021, 8:05am UTC](https://discourse.processing.org/t/importing-shader-glsl-files-to-wordpress/31821/1 "2021-08-21T08:05:07Z")

</div>

Hey,

I have shader files in my p5 project running and displaying perfectly on my local server. The files are preloaded via loadShader because I can access the file path.

However, shader .glsl file paths are not accessible via the Wordpress page editor – only HTML, CSS and Javascript. So, I converted the shader files to variables with temperate literals so they can be read by createShader().

The shaders are working but an error displays in the console as follows:

![C-2000](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/41ff7e7b192621551dea0a43954ae5c339a773f9.png)

And, accordingly, the canvas does not display fullscreen (as it does on my local server).

I’m sure this is not a CSS issue since the error in the console exits and refers to “Cannot read property ‘width’ of undefined”. Is there something I’m missing regarding createShader() ?

Alternatively, is there a better way to import shader .glsl files into a p5 project on Wordpress. The code must be accessible via the Body Script on the Wordpress page editor eg. must be readable by Javascript… then I could continue to use loadShader?

Thanks, Craig

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [August 21, 2021, 7:58pm UTC](https://discourse.processing.org/t/importing-shader-glsl-files-to-wordpress/31821/2 "2021-08-21T19:58:12Z")

</div>

Hi! Welcome to the forum!

I’m afraid that the image is scaled and I can’t read it at all 😅 could you post it with the original resolution?

Meanwhile I can only guess what it is happening. I did a gig to inject p5.js in a wordpress site before, and I know this is not straightforward mainly because of the timing of the elements to be loaded. If you make a simple sketch without glsl - for example just a blank canvas (the default on the web editor), would it still give the same error? Or is it specific to `createShader`?

---

<div class="post-metadata">

**Author:** ![CraigO](https://avatars.discourse-cdn.com/v4/letter/c/9de0a6/32.png) [@CraigO](https://discourse.processing.org/u/CraigO)\
**Post date:** [August 21, 2021, 9:57pm UTC](https://discourse.processing.org/t/importing-shader-glsl-files-to-wordpress/31821/3 "2021-08-21T21:57:03Z")

</div>

Hey micuat,

Thanks for your reply… firstly, I’d prefer to use loadShader within p5 on Wordpress but just haven’t found a way to load the glsl files through the page editor. Also, I’ve extensively searched for a suitable Wordpress plugin – none found.

About your question, on the Wordpress page a simple sketch without glsl (eg. blank canvas only) does not give the same error. The issue seems specific to my code (with the glsl added via temperate literals) and/or when it is calling `createShader`.

Here’s the screenshots again…

 ![C-3003](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/ba1c7a37b38efc41becd814ceeb1beaebbd5a5ad.png)

Any further thoughts? Thanks, Craig