Created
June 9, 2025 05:46
-
-
Save devkabir/a97e2b9631efac46621c5262efc33313 to your computer and use it in GitHub Desktop.
Displays IDs of all child elements inside #seid-parent directly on each element using Tailwind CSS. No external files.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Plugin Name: Show Element IDs (MU - Inline) | |
| * Description: Displays IDs of all child elements inside #seid-parent directly on each element using Tailwind CSS. No external files. | |
| */ | |
| add_action('plugins_loaded', function () { | |
| add_action('admin_enqueue_scripts', function () { | |
| // Enqueue Tailwind from CDN | |
| wp_enqueue_script('tailwindcdn', 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'); | |
| }); | |
| add_action('admin_footer', function () { | |
| ?> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", () => { | |
| const parent = document.querySelector("#defender"); // Adjust this ID as needed | |
| console.log(`parent: ${parent}`); | |
| if (!parent) return; | |
| const elementsWithId = parent.querySelectorAll("[id]"); | |
| const bgColors = [ | |
| "bg-red-200 text-red-800", | |
| "bg-blue-200 text-blue-800", | |
| "bg-green-200 text-green-800", | |
| "bg-yellow-200 text-yellow-800", | |
| "bg-purple-200 text-purple-800", | |
| "bg-pink-200 text-pink-800", | |
| "bg-indigo-200 text-indigo-800", | |
| ]; | |
| elementsWithId.forEach((el, index) => { | |
| if (el.id === "defender") return; // Skip the parent container itself | |
| const badge = document.createElement("span"); | |
| badge.textContent = `#${el.id}`; | |
| badge.className = `absolute top-0 m-1 px-2 py-0.5 text-xs font-medium rounded ${bgColors[index % bgColors.length] | |
| } z-50`; | |
| el.style.position = "relative"; | |
| el.appendChild(badge); | |
| }); | |
| }); | |
| </script> | |
| <?php | |
| }); | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment