A complete guide to building a fully functional add-on for the Cointacted Social Terminal

This tutorial walks you through creating a full-featured add-on plugin from scratch, including:

• folder structure
• plugin header
• enqueue scripts
• add commands
• add metadata
• add settings page
• add REST endpoint
• override commands
• optional custom CSS
• best practices

By the end, you’ll have a real, working add-on plugin.

---

1. Create Your Add-On Folder #

Inside /wp-content/plugins/, create a new folder:

cst-my-addon

Inside it, create:

cst-my-addon/
│ cst-my-addon.php
│
├─ js/
│   addon.js
│
└─ css/
    addon.css

---

2. Create Your Main Plugin File #

Create cst-my-addon.php:

<?php
/*
Plugin Name: Cointacted Social Terminal – My Add-On
Description: Example add-on showing how to extend the Cointacted terminal.
Version: 1.0.0
Author: Your Name
*/

if ( ! defined('ABSPATH') ) exit;

// Enqueue frontend scripts
add_action('wp_enqueue_scripts', function() {

    // Only load if terminal JS is available
    wp_enqueue_script(
        'cst-my-addon',
        plugin_dir_url(__FILE__) . 'js/addon.js',
        ['cointacted-social-terminal-js'],
        '1.0',
        true
    );

    wp_enqueue_style(
        'cst-my-addon-css',
        plugin_dir_url(__FILE__) . 'css/addon.css',
        [],
        '1.0'
    );
});

This ensures the add-on loads after the terminal.

---

3. Add Your Add-On Commands (addon.js) #

Inside /js/addon.js:

// Example command
CointactedSocialTerminalTerminal.registry.addonhello = function(input) {
    cointacted_social_terminal_append_line(
        "Hello from My Add-On!",
        "success"
    );
};

// Add metadata
CointactedSocialTerminalTerminal.commands_meta.addonhello = {
    group: "ADDON",
    description: "Example command from My Add-On.",
    alias: ["ahello"]
};

Now you can type:

addonhello

or

ahello

AND the command will show in:

• help
• help addon
• help search hello

---

4. Add a Settings Page in WP Admin (optional) #

Add this to your main plugin file:

add_action('admin_menu', function() {
    add_submenu_page(
        'cointacted-social-terminal', // parent menu
        'My Add-On Settings',
        'My Add-On',
        'manage_options',
        'cst-my-addon-settings',
        function() {
            ?>
            <div class="wrap">
                <h1>My Add-On Settings</h1>
                <p>Settings for My Add-On go here.</p>
            </div>
            <?php
        }
    );
});

This places your add-on under:

WP Admin → Cointacted → My Add-On

---

5. Add a REST Endpoint (for API-powered commands) #

Add:

add_action('rest_api_init', function() {
    register_rest_route('cstaddon/v1', '/hello', [
        'methods'  => 'GET',
        'callback' => function() {
            return ['message' => 'Hello from REST!'];
        },
        'permission_callback' => '__return_true',
    ]);
});

Then create a command that calls it (in addon.js):

CointactedSocialTerminalTerminal.registry.resthello = async function() {
    const res = await fetch('/wp-json/cstaddon/v1/hello');
    const json = await res.json();

    cointacted_social_terminal_append_line(json.message, "success");
};

CointactedSocialTerminalTerminal.commands_meta.resthello = {
    group: "ADDON",
    description: "Hello from REST API.",
};

Usage:

resthello

---

6. Override a Built-In Command (optional) #

Example: override welcome.

const oldWelcome = CointactedSocialTerminalTerminal.registry.welcome;

CointactedSocialTerminalTerminal.registry.welcome = function(input) {
    cointacted_social_terminal_append_line("This is the overridden welcome!", "success");
    oldWelcome(input);
};

---

7. Add Custom Output Type (with CSS) #

Inside /css/addon.css:

.cointacted-social-terminal__line--addon {
    color: #00cc77;
    font-weight: bold;
}

Then use it:

cointacted_social_terminal_append_line("Add-on output", "addon");

---

8. Listen to Terminal Events (for advanced add-ons) #

Inside addon.js:

document.addEventListener('cointacted_social_terminal_output', (e) => {
    if (e.detail.type === "wallet") {
        console.log("Wallet Updated:", e.detail.text);
    }
});

Great for:

• reward tracking
• analytics
• interactive UX
• Web3-based behavior

---

9. Optional: Add Custom Icons, Popups, UI Enhancements #

Add-ons can trigger:

• alerts
• modals
• notifications
• custom animations

Example:

CointactedSocialTerminalTerminal.registry.win = function() {
    alert("You won!");
    cointacted_social_terminal_append_line("🎉 Congratulations!", "success");
};

---

10. Best Practices for Add-Ons #

✔ Always depend on cointacted-social-terminal-js #

✔ Wrap code in DOM ready if needed #

✔ Add metadata for help integration #

✔ Use REST routes for backend communication #

✔ Use events for dynamic UI behavior #

✔ Don’t override core commands unless necessary #

✔ Namespace your commands (e.g., addon_ prefix) #

✔ Separate logic into JS, CSS, PHP cleanly #

---

Summary #

This tutorial showed how to build a complete add-on with:

✔ commands #

✔ aliases #

✔ metadata #

✔ settings page #

✔ REST API #

✔ command overrides #

✔ custom output types #

✔ event listeners #

✔ best practices #

This is a production-ready add-on structure, identical to how your future official add-ons (Social Mining, EVM, Solana) will be built.