Gridly Design Overlay

Gridly Design Overlay adds a front-end grid overlay that helps developers and site builders check responsive layout alignment while working on WordPress sites.
The plugin includes a settings page under Settings where administrators can configure:
<ul>
<li>Overlay visibility.</li>
<li>Overlay color.</li>
<li>Overlay opacity.</li>
<li>Desktop grid container width.</li>
<li>Desktop, tablet, and mobile columns.</li>
<li>Desktop, tablet, and mobile gaps.</li>
<li>Desktop, tablet, and mobile side spacing.</li>
</ul>
Tablet settings apply from 480px through 1024px. Mobile settings apply up to 479px.

Adds a responsive grid overlay to help check WordPress layouts during development.

Blincks

Structure Viewer is a WordPress file explorer and AI context builder for developers — browse, inspect, view source code, and export the complete file structure of any installed plugin or theme, directly from your WordPress admin dashboard.
No FTP, no cPanel, no server access needed. Open any file, read its source code with syntax highlighting, search across your entire codebase, and export the full file tree as TXT, JSON, XML, PDF, or clipboard copy — all without leaving WordPress.
And if you work with any AI coding tool — ChatGPT, Claude, Cursor, Copilot, Gemini, or anything else — Structure Viewer is the missing first step. Export your plugin’s complete structure as ready-to-use AI context in one click, and give your AI the full codebase map before you ask it anything.
—
<h4>🤖 Built for AI-Assisted Development</h4>
Modern coding workflows look different than they did two years ago. You’re working alongside an AI, and your AI works better when it has structural context. Structure Viewer is designed for exactly that workflow:
<ul>
<li>Tree-format exports purpose-built for LLM context windows — clean ASCII, no markdown noise, token-efficient</li>
<li>Works with any AI tool — ChatGPT, Claude, Cursor, Copilot, Gemini, Perplexity, or any other chat or coding assistant</li>
<li>One-click clipboard copy — emoji tree format that pastes into any AI chat with perfect alignment</li>
<li>Filter before you export — exclude <code>node_modules</code>, <code>vendor</code>, build artifacts, or anything you don’t want bloating your context</li>
<li>Read source inline — open any file in the browser modal, copy the snippet you need, paste into your AI conversation</li>
<li>Auto-redact secrets — opt-in masking of API keys, tokens, passwords, AWS / Stripe / GitHub keys, JWTs and PEM private keys before content leaves the server — paste into any AI tool without leaking credentials</li>
<li>Pro: Comparator — diff two versions of a plugin and feed only the changed lines to your AI for targeted code review</li>
<li>Pro: FlatPack — extract just the PHP, just the JS, or just the CSS from any plugin and hand the AI a focused codebase</li>
<li>WP-CLI exports — script structure dumps directly into your AI agent’s working directory</li>
</ul>
Stop pasting one file at a time. Give the AI the whole map first, then ask better questions.
—
<h4>🗂️ File Explorer</h4>
See exactly what is inside every plugin and theme:
<ul>
<li>Interactive tree view — expandable folders with icons for every file type (PHP, JS, CSS, images, JSON, XML, and more)</li>
<li>Searchable item picker — switch between All Plugins, individual plugins, All Themes, and individual themes instantly</li>
<li>Live tree search — type to filter files in real time, jump between matches with next/prev navigation</li>
<li>All-mode plugin filter — when viewing All Plugins or All Themes, the live search filters the plugin or theme list by name so you can find the one you want fast</li>
<li>File type tag strip — one click to show only PHP files, only CSS, only images — whatever you need</li>
<li>File size and modification dates — see when each file was last changed, toggle on/off</li>
<li>Recently Viewed panel — jump back to any file or folder you have already opened</li>
</ul>
<h4>📄 File Viewer</h4>
Click any file to read it right there in your browser:
<ul>
<li>Inline modal with syntax highlighting for all common languages</li>
<li>File metadata: size, line count, last modified timestamp</li>
<li>Auto-redact secrets badge — shown in the modal when redaction is active so you know the displayed content has been sanitised</li>
<li>Fullscreen mode for reading long files without scrolling the page</li>
<li>One-click download — get any file with the correct MIME type and original filename preserved</li>
</ul>
<h4>🔍 Search</h4>
Find any file across your entire plugin or theme in seconds:
<ul>
<li>Real-time search — results appear as you type, no page reloads</li>
<li>Extension search — prefix with a dot to filter by type: <code>.php</code>, <code>.js</code>, <code>.css</code>, <code>.json</code></li>
<li>File type dropdown for quick narrowing</li>
<li>Results show full relative path, file size, and last modified date</li>
</ul>
<h4>📤 Export</h4>
Share or document your plugin structures in any format:
<ul>
<li>TXT — clean ASCII tree, perfect for documentation, tickets, and AI context windows</li>
<li>JSON — nested structure with file sizes and timestamps for programmatic use</li>
<li>XML — standardized hierarchical format</li>
<li>PDF — formatted document with header, page numbers, and automatic page breaks</li>
<li>Clipboard — one-click emoji tree copy for pasting into Slack, Notion, or GitHub</li>
</ul>
<h4>📊 Dashboard</h4>
Your WordPress file ecosystem at a glance:
<ul>
<li>Stat tiles for total plugins, active/inactive split, total themes, and total files indexed</li>
<li>Largest plugins table — instantly see which plugins are heaviest with file count and size bars</li>
<li>WordPress environment strip: WP version, PHP version, active theme, site URL</li>
</ul>
<h4>⚙️ Settings</h4>
Make it yours:
<ul>
<li>Dark mode / Light mode — toggle instantly from the plugin header or apply via Settings; rendered server-side with no flash on load</li>
<li>Accent color picker — Emerald (default), Violet, Blue, Amber, or Rose</li>
<li>Auto-redact secrets on export (new in 2.2.2) — opt-in toggle that masks credentials in viewed and downloaded file content</li>
<li>Exclude hidden files, system directories, and custom patterns (<code>node_modules</code>, <code>.git</code>, <code>vendor</code>)</li>
<li>Settings auto-save with instant confirmation toast</li>
</ul>
<h4>💻 WP-CLI</h4>
Automate structure exports from the command line:
<pre><code>wp structure-viewer export plugin <folder-name>
wp structure-viewer export theme <folder-name>
wp structure-viewer list plugins
wp structure-viewer list themes
</code></pre>
—
<h4>🚀 Structure Viewer Pro</h4>
Unlock two powerful Pro tools for developers who need to go deeper.
🔀 Comparator — Know Exactly What Changed
Ever updated a plugin and wondered what actually changed? Comparator shows you a precise, color-coded, line-by-line diff between any two versions — so you can audit updates, review customizations, and catch unwanted changes before they cause problems.
<ul>
<li>Compare two plugin ZIPs side by side</li>
<li>Compare an installed plugin or theme against any uploaded ZIP</li>
<li>Compare two individual files for a targeted spot-check</li>
<li>Added lines in green, removed in red, changed lines clearly highlighted</li>
<li>Works on large plugins and minified CSS/JS files — auto-tokenizes before diffing</li>
<li>Expand/collapse per-file diff blocks to focus on what matters</li>
</ul>
📦 FlatPack — Extract Only What You Need
Need just the CSS from a plugin? Or all the PHP files for a code review? FlatPack extracts any plugin or theme ZIP and flattens it into a single, clean download — no nested folders, no hunting through directory trees.
<ul>
<li>Upload any plugin or theme ZIP and see all its files in a live preview instantly</li>
<li>Filter by PHP, CSS and JS, images, or any custom extension — preview updates live</li>
<li>Only the filtered files are included in the output ZIP</li>
<li>Smart collision-safe naming: duplicate basenames get a folder prefix automatically</li>
<li>Download a single flat ZIP in seconds</li>
</ul>
Upgrade to Pro from within the plugin — Settings → License → Upgrade to Pro.
—
<h4>🔒 Security</h4>
Security is not an afterthought. Every request to Structure Viewer is protected:
<ul>
<li>Nonce verification on all AJAX endpoints</li>
<li><code>manage_options</code> capability required — administrators only, no public access</li>
<li>Path traversal prevention — file paths resolved with <code>realpath()</code> and verified</li>
<li>Input sanitized with <code>wp_unslash()</code> + <code>sanitize_text_field()</code> before use</li>
<li>All output escaped before rendering</li>
<li>Auto-redact secrets (opt-in) — strips API keys, tokens, passwords, AWS / Stripe / GitHub / Google / Slack keys, JWTs, and PEM private keys from viewed and downloaded file content</li>
<li>Pro upload directories protected with <code>.htaccess</code> deny rules</li>
</ul>
<h4>⚡ Performance</h4>
Structure Viewer is invisible to your site’s frontend:
<ul>
<li>Assets load only on the Structure Viewer admin page — zero impact on your site</li>
<li>Dashboard stats cached with a 6-hour transient</li>
<li>Lazy tree loading — only trees you expand are scanned</li>
<li>FlatPack preview filtering is entirely client-side — no extra AJAX round-trips</li>
<li>No external HTTP requests at runtime</li>
</ul>

Structure Viewer – File Explorer & AI Context Builder

Plugin & theme file explorer for developers. Browse, inspect, view source code, and export file structures as ready-to-use AI context.

Gridly Design Overlay vs Structure Viewer – File Explorer & AI Context Builder