Export HTML5 to a Wordpress page with out plugin or iframe

erik2019S

I like to have a html5 game to work in one of my Wordpress page temple. No plugin or iframe. Anyone know how to do this?

alison209

erik2019S
Yes, it's possible to add an HTML5 to a WordPress page without using a plugin or iframe.

First, you need to create your HTML5. Once your file is ready, export it as an HTML5 file. Now,you need to upload your files to your WordPress site. You can do this by logging into your WordPress click on dashboard > Media Library > Add New button to upload your files. When your uploading is done, you need to create a new WordPress page where you want to display the file.

To embed your files you need to add the HTML code to your WordPress page. Open the HTML file in a text editor, copy the code, and paste it into the HTML editor. Once you have added the HTML code for your file, save and publish your WordPress page.

cybereality

You'd need to be able to import custom HTML and Javascript (plus the game files) onto the server and then display them on the page. Godot uses standard HTML5, so no plugins are needed. The iframe would make the coding easier though. See this page: https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html#serving-the-files

erik2019S

Yes, but how to place this in an other place then the root and NOT in an iframe?

cybereality

It's just an html page, you can put it anywhere you want on your server. I haven't tried to integrate into wordpress yet, but you should be able to add html code into a page. That seems pretty straight-forward.

erik2019S

Yes, all sounds like that. But in fact I can’t put it anywhere else then the root. I can’t figure it out where I enter the new path, if the files is not please at the root.

cybereality

You would upload them in the interface for Wordpress. You can make a new folder, I think it goes into wp-uploads. I haven't tried it, but that should work.

erik2019S

That will not work. The path for the files godot needs is called like this “src=“xxx.xx” at the root of the domain. And if I do like you say it needs to change to src=“ wp-content/uploads/2021/10/xxx.xx”

And I don’t know how to change the path

cybereality

So yes, you would need to change the path in the HTML file. But it can be any path on your server. You can also use relative paths, which I think would work better (and then you can reuse the same template for different blog posts). If I have some time later today I can test on my server, it should be a simple thing.

erik2019S

Please, I so hope you get some time to help me. Becourse I have tested this for so long now. And can’t get it to work.

cybereality

Okay, so I got it working. But I believe you do need to use an iframe, or at least that is going to be the easiest way without editing a lot of files. You can't upload the Godot HTML5 export into WordPress, because Javascript (and other files) are not allowed. So you will need to export from Godot, and then copy all those files it gives you to your server somehow. You could use the file manager in cPanel, or sFTP if you prefer. Put them in their own folder. Then in WordPress, click on the block that is called embed, and add this code in there:

<iframe src="https://YourServer.com/YourGame/Game.html" style="width:1024px; height:600px; border:none;" title="Godot Game"></iframe>

That will work.

Jacquicen

What worked for me was uploading my HTML5 game files to a folder in wp-content/uploads on my WordPress site. After that, I went into the WordPress editor, switched to the Text view, and added my HTML and JavaScript code right there. Just make sure to point to the game files using the correct path. If you’re still stuck, I found that looking into local services for web design really helped me get everything running smoothly. In my case, it was Sacramento WordPress web design, and I think you can try to reach them, too.