What is a widget?
A widget consists of three layers — PHP, CSS and JavaScript — that together form an independent, reusable web component.
At Widget-Storm, everything is a widget. A button? Widget. A navigation bar? Widget. This whole page? Composed of widgets. Every widget has three files:
<section id="basic<?= $wgguid;?>" class="widgetstormlayer">
<header><?= $wgparams->headercontent;?></header>
<article><?= $wgparams->articlecontent;?></article>
<footer><?= $wgparams->footercontent;?></footer>
</section>section#basic/*<?= $wgguid;?>*/{
/*<?php
if(isset($wgparams->layercss)) echo $wgparams->layercss;
?>*/
}jQuery('body').on('click', '.widgetstormlayer', function(){
// Widget logic: AJAX loading, animations, events
// Delegated handlers catch every instance
});
The special part: the CSS file can contain PHP! The /*<?php ?>*/ bridge lets you generate CSS dynamically — individual styles per widget instance. The following widget demonstrates this live. Click on it:
Three levels deep, then infinity. Every level is a complete widget — with its own PHP, CSS and JavaScript — loaded live through wgclient.php.
How does the system work?
The path from developer to user website — and back.
The developer creates three files (PHP, CSS, JS) and uploads them, encrypted, to the server through the wghandler. The server stores them in the database. Users embed widgets through their wgclient — a personalized PHP file that acts as the bridge between their website and the Widget-Storm system. On the first request the widget code is stored locally in the CodeVault (wgbuilds/) — after that widgets are loaded straight from the file system, with no network round trip. That makes delivery extremely fast and independent of the central server.
As a user you embed widgets through three simple links:
The system loads each layer separately: CSS for the design, JS for the interaction, PHP for the structure.
As a developer you create three files and upload them:
The wghandler encrypts the files (AES-256-CBC or RIJNDAEL-256) and uploads them to the server. The ##wgstart##name::author::params##wgend## markers make nesting possible: widgets load widgets.
Rendering control: you decide whether widgets are rendered locally from the CodeVault (the default — the fastest option) or fetched live from the server. In batch mode you can synchronize every widget from your local wgbuilds/ directory — and only your own widgets are processed.
For users: embedding widgets
From registration to a finished widget on your website in five steps.
wgclient.php and wghandler.php on your web server — you generate both in the Station (the wghandler once, the wgclient as needed). Then embed widgets through a CSS link, a script tag and a PHP include.<!-- Load CSS (in <head>) -->
<link rel="stylesheet"
href="wgclient.php?wgname=basic&wgauthor=WidgetStormSystem&wgmode=css&wgparams=..."
type="text/css">
<!-- Load JavaScript (before </body>) -->
<script src="wgclient.php?wgname=basic&wgauthor=WidgetStormSystem&wgmode=js&wgparams=..."></script>
<!-- Render PHP (in <body>) -->
<?php include "wgclient.php";
$wg->get("basic", "WidgetStormSystem", $params, "php"); ?>For developers: creating widgets
From idea to finished widget in four steps.
mein_widget.php, mein_widget.css and mein_widget.js. Use $wgparams for parameters and $wgguid for UID scoping.wgbuilds/ directory at once.The /*<?php ?>*/ syntax is the PHP-in-CSS bridge. It allows PHP code inside CSS files, executed at render time.
Widgets can load other widgets — through markers:
The server resolves these markers recursively: the CSS and JS of the nested widgets are appended, the PHP is executed inline. This is how complex compositions are built from simple building blocks.
Try it out
Edit the parameters and watch the result in real time.
The live editor below demonstrates the core principle: change the text and CSS, and the widget re-renders in real time — through the same wgclient.php endpoint that external websites use too.
This is the Widget-Storm principle: each layer is loaded separately. The live editor posts parameters to /wgclient.php and receives rendered HTML and CSS back. Server-side rendering is possible — but normally your wgclient stores the widget files locally on your web space, so everything is loaded straight from there. Faster, more independent.
Features & possibilities
What sets the Widget-Storm system apart.
/*<?php ?>*/ is activated at render time. Dynamic styles per instance.##wgstart##...##wgend## markers. Recursive, unlimited, automatic.
Each of these feature cards is a wg_card widget — composed into a grid, reusable on any page.
Open widgets
Every tutorial widget is publicly available. Use them on your own website.
Everything on this page? These are widgets. Every single element — buttons, cards, code displays, tabs, steps, diagrams — is a self-contained widget that you can use on your website.
<!-- CSS -->
<link rel="stylesheet"
href="wgclient.php?wgname=wg_badge&wgauthor=WidgetStormSystem&wgmode=css&wgparams=..."
type="text/css">
<!-- PHP -->
<?php include "wgclient.php";
$wg->get("wg_badge", "WidgetStormSystem", '{"text":"New","variant":"success"}', "php"); ?>