Skip to main content

Devsoul Solutions

Download
Menu
Download

Starter Toolkit for Elementor - Complete Documentation.

Version: 1.0.0
Author: Devsoul Solutions
Requires: WordPress 5.0+, Elementor 3.0+

Introduction

Starter Toolkit for Elementor is a modular widget collection plugin that allows you to:

✅ Install one plugin and get access to multiple widgets
✅ Enable/Disable individual widgets to optimize performance
✅ Customize everything — content, styling, animations via Elementor’s visual editor
✅ Easily add new widgets without creating separate plugins

Unlike traditional Elementor addons that load all widgets regardless of usage, Starter Toolkit only loads the widgets you enable, keeping your site fast and efficient.

Installation

  1. Go to WordPress Dashboard → Plugins → Add New
  2. Click Upload Plugin
  3. Choose the starter-toolkit.zip file
  4. Click Install Now and then Activate

After Activation

  • A new menu item “Starter Toolkit” will appear in your WordPress admin sidebar
  • A new widget category “Starter Toolkit” will appear in Elementor editor

Getting Started

Step 1: Check Requirements

Make sure you have:

  • WordPress 5.0 or higher
  • Elementor (free version) installed and activated
  • PHP 7.0 or higher

Step 2: Configure Widgets

  1. Go to Dashboard → Starter Toolkit
  2. You’ll see all available widgets with toggle switches
  3. Enable the widgets you want to use
  4. Click Save Settings

Step 3: Use in Elementor

  1. Edit any page with Elementor
  2. Look for the “Starter Toolkit“ category in the widgets panel
  3. Drag and drop your desired widget
  4. Customize via the Content and Style tabs

Admin Panel Guide

Dashboard Overview

Header Section

  • Title & Subtitle: Plugin name and description
  • Active Counter: Shows how many widgets are currently enabled
  • Total Counter: Shows the total available widgets

Toolbar

  • Enable All: Activate all widgets at once
  • Disable All: Deactivate all widgets
  • Save Settings: Save your changes

Widget Cards

Each widget displays:

  • Icon: Visual identifier
  • Toggle Switch: Enable/disable the widget
  • Name: Widget display name
  • Description: Brief explanation of functionality
  • Status Badge: Active (green) or Inactive (gray)

Managing Widgets

To Enable a Widget:
  1. Click the toggle switch (turns blue)
  2. Click Save Settings
To Disable a Widget:
  1. Click the toggle switch (turns gray)
  2. Click Save Settings

⚡ Performance Tip: Only enable widgets you’re actively using. Disabled widgets won’t load any code on your site.

Using Widgets in Elementor

Adding a Widget

  1. Open Elementor Editor on any page/post
  2. In the left panel, scroll to “Starter Toolkit” category
  3. Drag the widget to your desired location
  4. The widget appears with default content

Editing Content

All widgets have a Content tab where you can:

  • Add/remove/reorder items (via Repeater fields)
  • Edit text content
  • Upload images
  • Add links
  • Configure basic settings

Styling the Widget

All widgets have a Style tab with sections like:

  • Layout: Alignment, spacing, background
  • Typography: Fonts, sizes, colors, weights
  • Colors: All color elements
  • Effects: Shadows, borders, hover states
  • Animations: Transitions, transforms

Responsive Design

Most controls support responsive settings:

  • Click the device icons (desktop/tablet/mobile)
  • Set different values for each breakpoint
  • Preview in Elementor’s responsive mode

Developer Guide

Plugin Architecture

				
					starter-toolkit/
├── starter-toolkit.php          # Main plugin file (core logic)
├── admin/
│   ├── admin-page.php           # Admin dashboard HTML
│   └── admin-style.css          # Admin panel styling
└── widgets/
    └── animated-tooltip-widget.php
    └── [your-future-widgets].php

Main Plugin Class

File: starter-toolkit.php

Key Methods:

				
					Starter_Toolkit::instance()                 // Singleton instance
get_widgets_map()                           // Returns all widget configs
get_enabled_widgets()                       // Returns enabled widgets array
is_widget_enabled($slug)                    // Check if widget is active
register_widgets($widgets_manager)          // Registers active widgets with Elementor
register_categories($elements_manager)      // Creates custom category

Widget Map Structure

Located in starter-toolkit.php:

				
					private $widgets_map = [
    'widget_slug' => [
        'label'       => 'Display Name',      // Shown in admin panel
        'description' => 'Short description', // Help text
        'class'       => 'STK_Class_Name',    // PHP class name
        'file'        => 'filename.php',      // File in /widgets/
        'icon'        => 'eicon-icon-name',   // Elementor icon
        'default'     => true,                // Enabled by default?
    ],
];

Widget File Structure

Every widget must:

  1. Extend \Elementor\Widget_Base
  2. Use STK_ class prefix
  3. Return 'starter-toolkit' category
  4. Use 'starter-toolkit' text domain
  5. Include both render() and content_template() methods

Example Skeleton:

				
					<?php
class STK_My_Widget extends \Elementor\Widget_Base {
    
    public function get_name() {
        return 'my_widget_slug';
    }

    public function get_title() {
        return 'My Widget Name';
    }

    public function get_icon() {
        return 'eicon-code';
    }

    public function get_categories() {
        return [ 'starter-toolkit' ];
    }

    protected function register_controls() {
        // Content & Style controls here
    }

    protected function render() {
        // PHP output for frontend
    }

    protected function content_template() {
        // JS template for live editor preview
    }
}

Troubleshooting

Widget Not Showing in Elementor

Possible Causes:

  1. Widget is disabled:  Go to Starter Toolkit admin and enable it
  2. Elementor cache: Clear Elementor cache:
    • Go to Elementor → Tools → Regenerate CSS
    • Click “Regenerate Files”
  3. Browser cache: Hard refresh (Ctrl+F5 or Cmd+Shift+R)

Admin Panel Not Accessible

Solution:

  1. Check if you have admin privileges
  2. Ensure Elementor plugin is active
  3. Deactivate and reactivate Starter Toolkit

Widget Appears But Has No Content

Solution:

  1. Check if widget has default content in register_controls()
  2. Verify render() method has output code
  3. Check PHP error logs for syntax errors

Styles Not Applying

Solution:

  1. Check if selectors in selectors array are correct
  2. Verify CSS is scoped properly (uses widget ID)
  3. Clear browser cache
  4. Check for CSS conflicts with theme

Changes Not Saving in Admin Panel

Solution:

  1. Check file permissions on /wp-content/plugins/starter-toolkit/
  2. Try deactivating other plugins temporarily
  3. Check browser console for JavaScript errors

FAQ

Is this plugin free?

Yes, Starter Toolkit is completely free right now.

Do I need Elementor Pro?

No, the free version of Elementor works perfectly.

Will disabled widgets slow down my site?

No. Disabled widgets don’t load any code they’re completely ignored.

Can I use this on client sites?

Yes, you can use it on unlimited sites.

Does it work with any theme?

Yes, it works with any WordPress theme that supports Elementor.

Does it work with any theme?

Yes, it works with any WordPress theme that supports Elementor.

Changelog

Version 1.0.0 (Current)

  • Initial release
  • Admin panel with enable/disable toggles
  • Custom widget category
  • Single plugin architecture
  • Full responsive controls
  • Live editor preview support

License

This plugin is licensed under GPL v2 or later.

You are free to:

  • Use commercially
  • Modify
  • Distribute
  • Use privately

Contact

For questions, suggestions, or collaboration: