How to Build a WordPress Plugin with Svelte: A Step-by-Step Guide

Combining WordPress with Svelte allows developers to create fast, reactive, and modern admin interfaces or front-end components. Svelte compiles components into highly efficient JavaScript, making it a great choice for WordPress plugins that require dynamic functionality without heavy frameworks.

In this guide, you’ll learn how to build a WordPress plugin using Svelte, from initial setup to deployment.

Why Use Svelte with WordPress?

• Performance: Svelte compiles to vanilla JS, reducing runtime overhead.
• Reactivity: Easily manage state without complex frameworks.
• Small Bundle Size: Faster load times compared to React or Vue.
• Seamless Integration: Works well with WordPress REST API or custom endpoints.

Prerequisites

Before starting, ensure you have:

• A local WordPress development environment (e.g., Local by Flywheel, XAMPP).
• Node.js & npm/yarn installed.
• Basic knowledge of PHP, JavaScript, and Svelte. Our YouTube channel; https://www.youtube.com/@easythemestore

Step 1: Set Up a Basic WordPress Plugin

1. Navigate to wp-content/plugins/ in your WordPress installation.
2. Create a new folder for your plugin (e.g., svelte-wordpress-plugin).
3. Inside the folder, create a PHP file (e.g., svelte-plugin.php) with the following:

<?php
/*
Plugin Name: Svelte WordPress Plugin
Description: A custom WordPress plugin built with Svelte.
Version: 1.0
Author: Your Name
*/

// Enqueue scripts and styles
function svelte_plugin_assets() {
    wp_enqueue_script(
        'svelte-plugin-js',
        plugins_url('/dist/build/bundle.js', __FILE__),
        array(),
        '1.0',
        true
    );
    wp_enqueue_style(
        'svelte-plugin-css',
        plugins_url('/dist/build/bundle.css', __FILE__),
        array(),
        '1.0'
    );
}
add_action('admin_enqueue_scripts', 'svelte_plugin_assets');

// Add a menu page in WordPress admin
function svelte_plugin_menu() {
    add_menu_page(
        'Svelte Plugin',
        'Svelte Plugin',
        'manage_options',
        'svelte-plugin',
        'svelte_plugin_page'
    );
}
add_action('admin_menu', 'svelte_plugin_menu');

// Render the Svelte app container
function svelte_plugin_page() {
    echo '<div id="svelte-app"></div>';
}

Step 2: Initialize a Svelte Project

1. Inside your plugin folder, run:

   npm init vite@latest svelte-app -- --template svelte
   cd svelte-app
   npm install

2. Modify vite.config.js to ensure proper build paths:

   import { defineConfig } from 'vite'
   import { svelte } from '@sveltejs/vite-plugin-svelte'
   
   export default defineConfig({
       plugins: [svelte()],
       build: {
           outDir: '../dist/build',
           emptyOutDir: true,
           rollupOptions: {
               input: 'src/main.js',
               output: {
                   entryFileNames: 'bundle.js',
                   assetFileNames: 'bundle.css',
               },
           },
       },
   })

3. Update src/App.svelte with a simple component:

   <script>
       let name = "WordPress";
   </script>
   
   <main>
       <h1>Hello, {name}!</h1>
       <p>This is a Svelte component inside a WordPress plugin.</p>
   </main>
   
   <style>
       h1 {
           color: #2271b1;
       }
   </style>

4. Modify src/main.js to mount the app in WordPress:

   import App from './App.svelte'
   
   const app = new App({
       target: document.getElementById('svelte-app'),
   })
   
   export default app

Step 3: Build & Test the Plugin

1. Run the build command:

   npm run build

   This generates bundle.js and bundle.css in /dist/build/.

2. Activate the plugin in WordPress:

• Go to Plugins → Installed Plugins.
• Find “Svelte WordPress Plugin” and click Activate.

1. Test the plugin:

• Navigate to “Svelte Plugin” in the WordPress admin menu.
• You should see your Svelte component rendered!

Step 4: Extending Functionality (Optional)

Using WordPress REST API

Fetch data from WordPress in your Svelte component:

<script>
    let posts = [];
    
    async function fetchPosts() {
        const response = await fetch('/wp-json/wp/v2/posts');
        posts = await response.json();
    }
    
    fetchPosts();
</script>

<ul>
    {#each posts as post}
        <li>{post.title.rendered}</li>
    {/each}
</ul>

Adding Shortcode Support

Extend your plugin to work in the frontend:

// Add to svelte-plugin.php
function svelte_plugin_shortcode() {
    return '<div id="svelte-frontend-app"></div>';
}
add_shortcode('svelte_plugin', 'svelte_plugin_shortcode');

Final Thoughts

By integrating Svelte with WordPress, you can build fast, interactive plugins with minimal overhead. This approach is perfect for:

• Custom admin dashboards
• Dynamic front-end components
• Real-time data displays

To further enhance your plugin, consider:

• Adding state management (Svelte stores)
• Optimizing bundle size with code splitting
• Implementing WordPress hooks for deeper integration

Now you’re ready to create powerful WordPress plugins with Svelte! 🚀