Embed Html5 App into wordpress

huronsen
(@huronsen)

4 years, 12 months ago
Hi there!

I’m trying to embed an html/javascript application into my website.
I do this my first time and bought an with a bit of description how to do it.
I thought it’s easier but I don’t get it to work.

That’s the tutorial which comes with the app:
https://support.vebto.com/help-center/articles/10/13/50/getting-started

What i did to embed it was creating a new plugin folder in FDP-Manager. And put all the Plugin-Files in it, like described.
And made an .php file, in which I defined a shortcode, so i can place the app wherever i want on my webpage.
Underneath i put the code, which they provide for embeding the plugin.
My code ist:
```
<script>
<?php
/**
* Plugin Name: My_first_embed
* Plugin URI: www.my_first_embed.doesntmatter
* Description: My_first_embed
* Version: 1.0
* Author: Me
* Author URI: 
**/
?>
add_shortcode( 'shortcode_name', function () {

	$out = '<p>[editor]</p>';

	return $out;
} );
add_action( 'wp_head', function () { ?>

<html>
    <head>
        <link rel="stylesheet" href="pixie/styles.min.css">
    </head>
    <body>
        <pixie-editor></pixie-editor>
    
        <script src="pixie/scripts.min.js"></script>
    
        <script>
            var pixie = new Pixie({
                onLoad: function() {
                    console.log('Pixie is ready');
                }
            });
        </script>
    </body>
 </html>
```
First the plugin worked, but it was not loading, than i changed the code to, because i thought that it should be enough… but id didn’t woked either:
```
<pixie-editor></pixie-editor>
    
        <script src="pixie/scripts.min.js"></script>
    
        <script>
            var pixie = new Pixie({
                onLoad: function() {
                    console.log('Pixie is ready');
                }
            });
        </script>
```
So any suggestions? 🙂
i appreciate every contribution!

thank you
cheers
Huronsen
- This topic was modified 4 years, 12 months ago by Steven Stern (sterndata).

Viewing 4 replies - 1 through 4 (of 4 total)

Joy
(@joyously)

4 years, 12 months ago

Remove the leading <script> from your PHP file.
Remove the ?> before add_shortcode.
Remove the HTML that isn’t <head> related from the wp-head action function.
Add the closing bracket for the wp-head function. <?php }
Thread Starter huronsen
(@huronsen)

4 years, 12 months ago
Thank you!

I’m now stuck with this:
```
function designer() {    
    ?>
    </html>
    <head>
        <link rel="stylesheet" href="pixie/styles.min.css">
    </head>
    <body>
        <pixie-editor></pixie-editor>
        <script src="pixie/scripts.min.js"></script>
           <script>
            var pixie = new Pixie({
                onLoad: function() {
                    console.log('Pixie is ready');
                }
            });
        </script>
    </body>
    </html>
    <?php
}
function shortcodes_designer(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('editor', 'shortcodes_designer');

?>
```
now, i dont get an error, but just the shortcode is displaying and nothing works.
i’m not shure if i have to open ports on the server for it to function?

Thank you!
Cheers
- This reply was modified 4 years, 12 months ago by huronsen.
- This reply was modified 4 years, 12 months ago by huronsen.
Joy
(@joyously)

4 years, 12 months ago

Is that the entire contents of your file? I can’t follow what you are doing.

A shortcode goes in the content area of a page, so you can’t be putting all the <html> and <head> and <body> tags. Those are output by the theme.

Your new code seems to be targeting the editor, when before it seemed that you wanted a front end result.
There is no action in WP called ‘editor’, so what are you trying to do?
You don’t need to use add_shortcode on an action. It can be called straight, like you had before.
Perhaps you should do some reading at https://developer.wordpress.org/
deanjansen1
(@deanjansen1)

4 years, 12 months ago
scripts.min.js and styles.min.css doesn’t seem like your loading those two files correctly.

you will need to put those in your plugin folder and include them using the full url.
Look below how to include the CSS and JS.

JS
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

CSS
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
- This reply was modified 4 years, 12 months ago by deanjansen1.
- This reply was modified 4 years, 12 months ago by deanjansen1.
- This reply was modified 4 years, 12 months ago by deanjansen1.
- This reply was modified 4 years, 12 months ago by deanjansen1.