Embedding HTML, CSS, and JavaScript in WordPress: Building a Custom Plugin Tutorial

Creating a custom plugin to embed your HTML, CSS, and JavaScript application in WordPress is a robust and flexible solution. Here’s how you can create a plugin to achieve this:

Step-by-Step Guide to Create a Custom Plugin

1. Create the Plugin Folder and File:
   • Navigate to wp-content/plugins directory in your WordPress installation.
   • Create a new folder named your-app.
   • Inside this folder, create a PHP file named your-app.php.
2. Add Plugin Header and Enqueue Scripts:
   • Open your-app.php and add the following code to register your plugin and enqueue the necessary styles and scripts.
3. Create the CSS file:
   In the your-app folder, create a file named style.css and add your CSS code:
4. Create the JS file:
   In the your-app folder, create a file named script.js and add your JavaScript code:

<?php
/*
Plugin Name: Your App
Description: A custom plugin to embed in your app.
Version: 1.0
Author: Your Name
*/

// Enqueue CSS and JS
function image_upload_app_enqueue_scripts() {
    wp_enqueue_style('your-app-style', plugin_dir_url(__FILE__) . 'style.css');
    wp_enqueue_script('your-app-script', plugin_dir_url(__FILE__) . 'script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'image_upload_app_enqueue_scripts');

// Shortcode to display the app
function your_app_shortcode() {
    ob_start();
    ?>
    <div id="custom-app">
        <div class="app-container">
            <img src="<?php echo plugin_dir_url(__FILE__); ?>my-image.jpg" alt="Main Image" class="main-image">
            <div class="point" id="point1" data-index="1"></div>
            <div class="point" id="point2" data-index="2"></div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('my_app', 'your_app_shortcode');

Add the Image File:

• Place the image file my-image.jpg in the your-app folder.

Activate the Plugin:

• Go to the WordPress admin dashboard.
• Navigate to Plugins > Installed Plugins.
• Find the your App plugin and click Activate.

Use the Shortcode:

• In any post or page where you want to display the image upload app, add the shortcode [my_app].

Example Usage in a Post or Page

• Edit or create a new post/page in WordPress.
• Insert the shortcode [my_app] where you want the app to appear.
• Publish or update the post/page.