Smart Div Injector

Description

Smart Div Injector is a powerful WordPress plugin that allows you to create unlimited injection rules to insert custom HTML, CSS, or JavaScript code into specific div elements on your website based on content type (posts, pages, categories).

Perfect for:

• Adding custom content to specific posts or categories
• Injecting mid-article ads after specific paragraphs
• Inserting CTAs before or after images
• Injecting tracking scripts on targeted pages
• Displaying special banners or notices conditionally
• Inserting custom widgets or components dynamically
• A/B testing different content variations
• Creating multiple injection rules for different scenarios
• Newsletter signup boxes in strategic positions

Features

✅ Unlimited Rules - Create as many injection rules as you need
✅ Multiple Code Variants - Create different versions of code for each rule and switch between them
✅ Quick Edit - Modify rules instantly from the list without opening the full editor
✅ Flexible Targeting - Target the entire website, all posts, category archives, posts by category, or specific pages
✅ Site-Wide Mode - NEW! Apply rules globally across the entire website (perfect for cookie banners, global announcements)
✅ Device Targeting - Choose desktop-only, mobile-only, or both devices for each rule
✅ Content Alignment - Position content with float left, float right, or centered alignment
✅ Advanced Search & Filters - Find rules quickly with search and multiple filters
✅ Smart Pagination - Navigate through rules with customizable items per page (10, 20, 50, 100)
✅ Smart Injection Positions - Standard positions (append, prepend, before, after, replace) + Article-specific positions
✅ Article-Specific Positions - Before/after content, paragraphs, images - no CSS selector needed!
✅ Paragraph Targeting - Insert before or after any specific paragraph number
✅ Image Targeting - Insert before or after the first image in posts
✅ CSS Selector Support - Use any valid CSS selector for standard positions
✅ Script Activation - Automatically activates injected scripts
✅ Rule Management - Add, edit, duplicate, and delete rules with ease
✅ Import / Export CSV - Import rules from CSV (supports fields with commas and spaces via standard CSV quoting) and download a template
✅ Export / Import Excel - Optional: export and import rules as .xlsx (requires composer install in plugin folder, PHP 7.4+)
✅ Enable/Disable Rules - Activate or deactivate rules without deleting them
✅ Modern UI/UX - Beautiful and intuitive admin interface with custom styling
✅ Responsive Design - Fully responsive admin panel that works on all devices
✅ Security First - Respects WordPress capabilities for unfiltered HTML
✅ Developer Friendly - Includes filters for customization
✅ User-Friendly Interface - Clear admin panel with validation warnings
✅ Memory Optimized - Handles sites with thousands of posts efficiently
✅ Multisite Ready - Full support for WordPress Multisite with Network Admin panel

Installation

Manual Installation

1. Download the plugin files
2. Upload the smart-div-injector folder to /wp-content/plugins/
3. Activate the plugin through the 'Plugins' menu in WordPress
4. Go to Settings > Smart Div Injector to configure

Via WordPress Admin

1. Go to Plugins > Add New
2. Search for "Smart Div Injector"
3. Click "Install Now" and then "Activate"
4. Go to Settings > Smart Div Injector to configure

Configuration

Navigate to Smart Div Injector in your WordPress admin menu (main sidebar).

How It Works

The plugin uses a rules-based system. You can create multiple injection rules, each with its own configuration:

1. Create a Rule - Click "Add New Rule" button
2. Configure the Rule - Set up targeting, selector, and code
3. Save the Rule - Click "Save Rule"
4. Manage Rules - View all rules in the main list, edit, duplicate, or delete as needed

Search, Filters & Pagination

When you have many rules, the plugin provides powerful tools to find and manage them efficiently:

Search by Name

• Use the search box to find rules by their name
• Search is case-insensitive and matches partial text
• Example: Searching "banner" will find "Homepage Banner", "Mobile Banner", etc.

Filter by Status

• Tutte (All) - Show all rules regardless of status
• Solo attive (Active Only) - Show only active rules that are running on the frontend
• Solo non attive (Inactive Only) - Show only inactive/disabled rules

Filter by Content Type

• Tutti i tipi (All Types) - Show all content types
• 🌐 Tutto il sito web (Entire Website) - Show rules applied globally to all pages
• 📄 Tutti gli articoli (All Posts) - Show rules targeting all post pages
• 📁 Archivio categoria (Category Archive) - Show rules for category archive pages
• 🏷️ Articoli per categoria (Posts by Category) - Show rules for posts in specific categories
• 📃 Pagina specifica (Specific Page) - Show rules targeting specific pages

Filter by Device

• Tutti i dispositivi (All Devices) - Show all device targets
• 📱💻 Entrambi (Both) - Show rules targeting both desktop and mobile
• 💻 Desktop - Show desktop-only rules
• 📱 Mobile - Show mobile-only rules

Items Per Page

Choose how many rules to display per page:

• 10 items per page (good for detailed review)
• 20 items per page (default, balanced view)
• 50 items per page (more items at once)
• 100 items per page (maximum items for quick scanning)

Using Filters

1. Select your desired filters from the dropdowns
2. Click "Applica Filtri" (Apply Filters) to update the view
3. Click "Reset" to clear all filters and return to the full list
4. Filters persist as you navigate between pages

Results Information

When filters are active, you'll see:

• Number of matching rules found
• Total number of rules available
• A message if no rules match the current filters

Import and template CSV

You can bulk-import rules from a CSV file and download a template with the correct columns.

• Scarica template CSV – Downloads a UTF-8 CSV template with header row and one example row. Use it as a starting point; you can add more rows. Fields that contain commas or line breaks must be quoted in the CSV (most spreadsheet apps do this automatically when exporting).
• Importa CSV – Upload a CSV file with the same columns as the template. Each data row becomes one rule. The template columns are: name, active, match_mode, page_id, category_id, selector, position, paragraph_number, device_target, alignment, variant_name, variant_code. Valid values for match_mode: site_wide, single_posts, category_archive, single_posts_category, page. For position: append, prepend, before, after, replace, before_post, before_content, after_content, before_paragraph, after_paragraph, before_image, after_image. Use UTF-8 encoding for the file.

Export/Import Excel (.xlsx): If PhpSpreadsheet is available (run composer install in the plugin folder), you will see Esporta Excel and Importa CSV / Excel. You can export all rules to a native Excel file (.xlsx) and import from .xlsx as well. The first sheet is used; column layout is the same as the CSV template. Requires PHP 7.4+ for Composer dependencies.

Rule Settings

1. Rule Name

Give your rule a descriptive name (e.g., "Banner on News Articles", "Tracking on Homepage")

2. Active Status

Enable or disable the rule without deleting it. Inactive rules won't run on the frontend.

2b. Code Variants (Multiple Versions)

Create and manage multiple versions of your code within a single rule:

Features:

• Add Multiple Variants: Click "Aggiungi Nuova Variante" to create a new code version
• Name Each Variant: Give descriptive names like "Summer Banner", "Christmas Banner", "Black Friday Ad"
• Switch Active Variant: Only one variant is active at a time - choose which one to display
• View in List: The rules list shows which variant is currently active and how many variants exist
• Independent Code: Each variant has its own complete HTML/JS/CSS code

Use Cases:

• A/B Testing: Create two versions and test which performs better
• Seasonal Content: Have different versions for holidays, seasons, or special events ready to activate
• Regional Variations: Different content for different markets or languages
• Quick Switching: Change between versions without editing code - just activate a different variant
• Backup Versions: Keep old versions as backup while trying new designs

How It Works:

1. When creating/editing a rule, you'll see the "Varianti Codice" section
2. Start with one variant (Variante 1) by default
3. Add more variants with the "+ Aggiungi Nuova Variante" button
4. Each variant has:
   • A name field (required)
   • A code textarea (required)
   • An "Attiva questa" button to make it the active variant
   • A delete button (if there's more than one variant)
5. The active variant is marked with a green "✓ Attiva" badge
6. Only the active variant's code will be injected on the frontend

Example Workflow:

Rule: "Homepage Banner"
├── Variante 1: "Standard Banner" (Active) ← Currently shown
├── Variante 2: "Black Friday Banner" ← Ready to activate
└── Variante 3: "Christmas Banner" ← Ready to activate

When Black Friday arrives, simply click "Attiva questa" on Variante 2 - no code editing needed!

3. Device Target

Choose which devices should display this rule:

• Both (📱💻) - Apply on both desktop and mobile devices (default)
• Desktop Only (💻) - Apply only on desktop/laptop browsers
• Mobile Only (📱) - Apply only on mobile devices and tablets

The plugin uses WordPress's wp_is_mobile() function to detect mobile devices.

3b. Content Alignment

Choose how to position the injected content:

• Nessuno (None) - Natural position without any special alignment (default)
• Float a sinistra (⬅️ Float Left) - Float the content to the left, allowing text to wrap around it on the right
• Float a destra (➡️ Float Right) - Float the content to the right, allowing text to wrap around it on the left
• Centrato (↔️ Centered) - Center the content horizontally on the page

Use Cases:

• Float Left/Right: Perfect for banners or ads that should have text flowing around them, like traditional magazine layouts
• Centered: Ideal for call-to-action boxes, announcements, or featured content that should be prominently displayed
• None: Best when you want the content to follow the natural document flow without affecting surrounding elements

The alignment is applied by wrapping your injected code in a <div> with appropriate inline styles. Float alignments include automatic clearfix to prevent layout issues.

4. Content Type

Choose where to apply the injection:

• 🌐 Entire Website (Tutto il sito web) - NEW! Inject on ALL pages across your entire website (posts, pages, archives, home, etc.)
• All Posts (Tutti gli articoli) - Inject on all single post pages
• Category Archive Page (Pagina archivio categoria) - Inject on the category archive page (e.g., example.com/category/news/)
• Posts by Category (Articoli di una categoria) - Inject only on single posts that belong to a specific category
• Specific Page (Pagina specifica) - Inject only on a selected page

Site-Wide Mode is perfect for global elements like cookie consent banners, GDPR notices, promotional announcements, tracking scripts, or any content that should appear everywhere on your site.

5. Category (when applicable)

If you selected "Category Archive Page" or "Posts by Category", choose which category to target.

6. Page (when applicable)

If you selected "Specific Page", choose which page to target from the dropdown, or enter the Page ID manually.

For sites with many pages: The dropdown shows up to 500 pages. If your page isn't listed, use the manual ID input field.

7. CSS Selector

Enter a valid CSS selector for the target element where the code will be injected.

Examples:

• #main-content - Target element with ID "main-content"
• .post-content - Target elements with class "post-content"
• article > .entry-content - Target with complex selectors
• main .wrap - Target descendant elements

8. Injection Position

Standard Positions (for CSS selectors):

• Append - Insert at the end inside the element
• Prepend - Insert at the beginning inside the element
• Before - Insert before the element
• After - Insert after the element
• Replace - Replace the entire content of the element

Article-Specific Positions (available for "All Posts" and "Posts by Category"):

• Before Post - Insert before the entire post content
• Before Content - Insert at the very beginning of the content
• After Content - Insert at the very end of the content
• Before Paragraph N - Insert before a specific paragraph (you specify the number)
• After Paragraph N - Insert after a specific paragraph (you specify the number)
• Before First Image - Insert before the first image in the content
• After First Image - Insert after the first image in the content

Note: When using article-specific positions, the CSS selector field is not required and will be ignored.

9. Code to Inject

Enter the HTML/CSS/JavaScript code you want to inject. This field accepts any valid HTML markup.

Security Note: Only users with unfiltered_html capability (typically administrators) can save scripts without sanitization.

Usage Examples

Example 1: Add a Banner Before Post Content

Configuration:

• Rule Name: Banner on All Articles
• Active: ✓
• Content Type: All Posts
• Position: Before Content
• Code:

  <div class="custom-banner" style="background: #f0f0f0; padding: 20px; margin-bottom: 20px;">
    <h3>Special Announcement!</h3>
    <p>This is a custom message shown before all article content.</p>
  </div>

This uses the article-specific "Before Content" position, so no CSS selector is needed.

Example 2: Add Banner on Category Archive Page

Configuration:

• Rule Name: News Category Banner
• Active: ✓
• Content Type: Category Archive Page
• Category: News
• CSS Selector: .category-description
• Position: After
• Code:

  <div class="category-banner">
    <h2>Latest News</h2>
    <p>Stay updated with our latest news articles!</p>
  </div>

Example 3: Add Tracking to Posts in a Category

Configuration:

• Rule Name: Tracking for News Posts
• Active: ✓
• Content Type: Posts by Category
• Category: News
• CSS Selector: body
• Position: Append
• Code:

  <script>
    console.log('Tracking code for News category posts');
    // Your tracking code here
  </script>

Example 4: Insert Custom Widget on Specific Page

Configuration:

• Rule Name: Homepage Widget
• Active: ✓
• Content Type: Specific Page
• Page: Home (ID: 2)
• CSS Selector: .main-content
• Position: After
• Code:

  <div class="featured-widget">
    <h4>Featured Content</h4>
    <!-- Your custom widget HTML -->
  </div>

Example 5: Add Custom Styling to Category Posts

Configuration:

• Rule Name: Special Category Styling
• Active: ✓
• Content Type: Posts by Category
• Category: Featured
• CSS Selector: head
• Position: Append
• Code:

  <style>
    .featured-post {
        background: linear-gradient(to right, #ff6b6b, #feca57);
        padding: 20px;
    }
  </style>

Example 6: Inject Ad After 3rd Paragraph

Configuration:

• Rule Name: Mid-Article Ad
• Active: ✓
• Content Type: All Posts
• Position: After Paragraph N
• Paragraph Number: 3
• Code:

  <div class="mid-article-ad" style="margin: 30px 0; padding: 20px; background: #f9f9f9; text-align: center;">
    <p style="font-size: 12px; color: #999; margin-bottom: 10px;">Advertisement</p>
    <!-- Your ad code here -->
    <div class="ad-placeholder" style="background: #ddd; height: 250px; display: flex; align-items: center; justify-content: center;">
        Ad Space 300x250
    </div>
  </div>

This injects the ad after the 3rd paragraph of every post. No CSS selector needed!

Example 7: Call-to-Action Before First Image

Configuration:

• Rule Name: CTA Before Image
• Active: ✓
• Content Type: Posts by Category
• Category: Reviews
• Position: Before First Image
• Code:

  <div class="cta-box" style="background: #2271b1; color: white; padding: 15px; margin: 20px 0; border-radius: 5px;">
    <strong>📸 Before you see the image...</strong>
    <p>Don't forget to subscribe to our newsletter for more reviews!</p>
    <button style="background: white; color: #2271b1; border: none; padding: 10px 20px; border-radius: 3px; cursor: pointer;">
        Subscribe Now
    </button>
  </div>

Automatically inserts a CTA box before the first image in review posts.

Example 8: Mobile-Only Banner

Configuration:

• Rule Name: Mobile Banner
• Active: ✓
• Device Target: 📱 Mobile Only
• Content Type: All Posts
• Position: Before Content
• Code:

  <div class="mobile-app-banner" style="background: #4CAF50; color: white; padding: 15px; margin-bottom: 20px; border-radius: 5px; text-align: center;">
    <strong>📱 Get Our Mobile App!</strong>
    <p style="margin: 10px 0;">Download our app for a better reading experience</p>
    <a href="#" style="background: white; color: #4CAF50; padding: 10px 20px; text-decoration: none; border-radius: 3px; display: inline-block; font-weight: bold;">
        Download Now
    </a>
  </div>

This banner will only appear on mobile devices, promoting your mobile app.

Example 9: Desktop-Only Sidebar Widget

Configuration:

• Rule Name: Desktop Sidebar Widget
• Active: ✓
• Device Target: 💻 Desktop Only
• Content Type: All Posts
• CSS Selector: .sidebar
• Position: Prepend
• Code:

  <div class="desktop-widget" style="background: #f5f5f5; padding: 20px; margin-bottom: 20px; border-radius: 5px;">
    <h3 style="margin-top: 0;">Subscribe to Newsletter</h3>
    <p>Get weekly updates delivered to your inbox</p>
    <input type="email" placeholder="Your email" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 3px;">
    <button style="width: 100%; padding: 10px; background: #2271b1; color: white; border: none; border-radius: 3px; cursor: pointer;">
        Subscribe
    </button>
  </div>

This widget appears only on desktop, where there's more screen space for a sidebar.

Example 10: Floating Ad Banner with Text Wrap

Configuration:

• Rule Name: Floating Ad - Right Side
• Active: ✓
• Device Target: 💻 Desktop Only
• Content Type: All Posts
• Content Alignment: ➡️ Float Right
• Position: After Paragraph 2
• Code:

  <div style="width: 300px; background: #fff; border: 2px solid #e0e0e0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
    <p style="text-align: center; color: #999; font-size: 11px; margin: 0 0 10px 0;">ADVERTISEMENT</p>
    <img src="https://via.placeholder.com/270x200" alt="Ad" style="width: 100%; height: auto; border-radius: 4px;">
    <h4 style="margin: 10px 0 5px 0; font-size: 16px;">Featured Product</h4>
    <p style="margin: 0; font-size: 13px; color: #666;">Check out our latest offering!</p>
  </div>

This creates a floating ad that appears on the right side with text wrapping around it on the left, like traditional print media.

Example 11: Centered Call-to-Action Box

Configuration:

• Rule Name: Centered Newsletter CTA
• Active: ✓
• Device Target: 📱💻 Both
• Content Type: Posts by Category
• Category: News
• Content Alignment: ↔️ Centered
• Position: After Content
• Code:

  <div style="max-width: 600px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
    <h2 style="color: white; text-align: center; margin: 0 0 15px 0; font-size: 28px;">Stay Updated!</h2>
    <p style="color: rgba(255,255,255,0.9); text-align: center; margin: 0 0 25px 0; font-size: 16px;">
        Get the latest news delivered directly to your inbox
    </p>
    <div style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;">
        <input type="email" placeholder="your@email.com" style="flex: 1; min-width: 250px; padding: 12px 20px; border: none; border-radius: 6px; font-size: 15px;">
        <button style="padding: 12px 30px; background: white; color: #667eea; border: none; border-radius: 6px; font-weight: bold; font-size: 15px; cursor: pointer;">
            Subscribe
        </button>
    </div>
  </div>

This creates a prominent, centered call-to-action box that draws attention at the end of news articles.

Example 12: Floating Info Box on the Left

Configuration:

• Rule Name: Article Info Box - Left
• Active: ✓
• Device Target: 💻 Desktop Only
• Content Type: All Posts
• Content Alignment: ⬅️ Float Left
• Position: Before Content
• Code:

  <div style="width: 250px; background: #f8f9fa; border-left: 4px solid #2271b1; padding: 20px; border-radius: 4px;">
    <h4 style="margin: 0 0 10px 0; color: #2271b1; font-size: 16px;">📌 Quick Info</h4>
    <ul style="margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6;">
        <li>Reading time: 5 min</li>
        <li>Last updated: Today</li>
        <li>Category: Tutorial</li>
    </ul>
  </div>

This info box floats on the left side of the article content, with text flowing around it on the right.

Developer Hooks

Filter: sdi_injection_payload

Modify the injection payload before it's injected into the page.

Parameters:

• $payload (array) - Array containing selector, position, and code
• $rule (array) - The complete rule data
• $rule_id (string) - The unique ID of the rule

Example:

add_filter( 'sdi_injection_payload', function( $payload, $rule, $rule_id ) {
    // Modify the code before injection (e.g., add dynamic content)
    $payload['code'] = str_replace( '{{site_name}}', get_bloginfo( 'name' ), $payload['code'] );
    $payload['code'] = str_replace( '{{rule_name}}', $rule['name'], $payload['code'] );

    return $payload;
}, 10, 3 );

Advanced Example - Conditional Modification:

add_filter( 'sdi_injection_payload', function( $payload, $rule, $rule_id ) {
    // Only modify specific rules
    if ( $rule['name'] === 'Dynamic Banner' ) {
        // Add current user info
        $current_user = wp_get_current_user();
        if ( $current_user->ID ) {
            $payload['code'] = str_replace( 
                '{{username}}', 
                $current_user->display_name, 
                $payload['code'] 
            );
        }
    }

    return $payload;
}, 10, 3 );

How It Works

1. Rules Loading - The plugin loads all active rules from the database
2. Condition Check - For each rule, the plugin checks if the current page matches the rule's conditions
3. Payload Collection - All matching rules are collected into an array
4. Script Registration - If there are matching rules, the plugin registers an inline script with all payloads
5. DOM Ready - The script waits for the DOM to be fully loaded
6. Sequential Processing - Each rule is processed in order:
   • The target element is selected using the CSS selector
   • The code is injected in the specified position
   • Any `