Switchboard DOCS
Docs
Get Started Get Lifetime Deal

Code Snippets Manager

Add custom CSS, JavaScript, and HTML code to your site without editing theme files or installing additional plugins. Create reusable snippets that persist through theme changes and can be toggled on or off instantly.

Use Cases

  • Add custom CSS to override theme styles without creating a child theme
  • Insert Google Analytics, Facebook Pixel, or other tracking scripts
  • Add custom JavaScript functionality across your site
  • Inject HTML for badges, announcements, or third-party widgets
  • Keep customizations separate from theme files for easy management

Where to Find It

Navigate to Switchboard → Code Snippets to create, edit, and manage all your code snippets from a dedicated interface.

How It Works

  1. Click “Add New Snippet” to create a snippet
  2. Choose the type: CSS, JavaScript, or HTML
  3. Write or paste your code
  4. Select where it should load (header or footer)
  5. Toggle active/inactive as needed

Snippet Types

CSS Snippets

Custom styles that override or extend your theme’s CSS.

/* Change link colors site-wide */
a {
    color: #0066cc;
}

a:hover {
    color: #004499;
}

CSS snippets are wrapped in <style> tags and output in your chosen location.

JavaScript Snippets

Custom scripts for functionality, analytics, or third-party integrations.

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

JavaScript snippets are wrapped in <script> tags.

HTML Snippets

Raw HTML for widgets, badges, or structural elements.

<div class="announcement-bar">
    Free shipping on orders over $50!
</div>

HTML snippets are filtered for security. Script tags and event handlers are removed. Use JavaScript snippets for scripts.

Snippet Settings

SettingOptionsDescription
TitleTextDescriptive name for the snippet
DescriptionTextOptional notes about what the snippet does
TypeCSS, JS, HTMLWhat kind of code
LocationHeader, FooterWhere to output the code
PriorityNumberLoading order (lower numbers load first, default: 10)
ActiveOn/OffWhether the snippet is currently running

Priority System

Snippets with lower priority numbers load before those with higher numbers:

  • Priority 1-5: Load first (critical styles, fonts)
  • Priority 10: Default priority
  • Priority 15-20: Load later (analytics, tracking)

Use priority to control load order when one snippet depends on another.

Header (wp_head)

Code outputs in the <head> section, before the closing </head> tag.

Best for:

  • CSS styles (prevents flash of unstyled content)
  • Scripts that must load before page content
  • Meta tags and preload directives
  • Analytics that track page load

Code outputs before the closing </body> tag.

Best for:

  • JavaScript that doesn’t need to block rendering
  • Chat widgets and support tools
  • Deferred functionality
  • Scripts that interact with page content

Managing Snippets

Quick Toggle

Use the toggle switch in the snippet list to enable/disable snippets without editing them. Great for:

  • Temporarily disabling a snippet for debugging
  • A/B testing different implementations
  • Seasonal code (holiday themes, promotions)

Organizing Snippets

Give snippets clear, descriptive titles:

  • “Homepage Hero Animation”
  • “Google Analytics 4”
  • “Footer Copyright Override”
  • “Mobile Menu Fix”

This makes it easy to find and manage snippets as your collection grows.

Security

Code snippets are a powerful feature with important security considerations:

  • Admin only: Only users with manage_options capability can create snippets
  • JavaScript validation: JS and HTML snippets require unfiltered_html capability
  • CSS sanitization: Potentially dangerous elements are stripped from CSS
  • No PHP: PHP code is not supported—this is intentional for security

Never paste code from untrusted sources. Malicious JavaScript could compromise your site or steal user data.

Common Snippets

Hide WordPress Admin Bar for Non-Admins

/* CSS Snippet - Header */
.admin-bar .site-header {
    top: 0 !important;
}

Add Google Fonts

/* CSS Snippet - Header */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

Scroll to Top Button

// JS Snippet - Footer
const scrollBtn = document.createElement('button');
scrollBtn.innerHTML = '↑';
scrollBtn.className = 'scroll-to-top';
scrollBtn.onclick = () => window.scrollTo({top: 0, behavior: 'smooth'});
document.body.appendChild(scrollBtn);

window.onscroll = () => {
    scrollBtn.style.display = window.scrollY > 300 ? 'block' : 'none';
};

External Badge/Widget

<!-- HTML Snippet - Footer -->
<div id="trust-badge" style="position: fixed; bottom: 20px; right: 20px;">
    <img src="https://example.com/badge.png" alt="Verified">
</div>

Troubleshooting

Snippet Not Appearing

  1. Check that the snippet is set to “Active”
  2. Verify you saved after making changes
  3. Clear any page caching
  4. Check the correct location (header vs footer)

CSS Not Working

  1. Use browser DevTools to check if styles are loading
  2. Increase specificity or add !important if being overridden
  3. Verify no syntax errors in your CSS

JavaScript Errors

  1. Check browser console (F12) for error messages
  2. Ensure dependencies are loaded (jQuery, etc.)
  3. Wrap code in DOMContentLoaded if accessing DOM elements

FAQ

Can I add PHP code?No. For security reasons, only CSS, JavaScript, and HTML are supported. For PHP functionality, use a code snippets plugin designed for PHP or add code to your theme’s functions.php.
Will snippets survive theme changes?Yes! Snippets are stored in the database, not theme files. They persist through theme switches and updates.
Can I use this instead of a child theme?For simple CSS overrides, yes. For template modifications or PHP functions, you’ll still need a child theme or separate solution.
Is there a limit to how many snippets I can create?No hard limit. However, for performance, consolidate related code into single snippets rather than creating many tiny ones.
Can snippets break my site?Malformed CSS or JavaScript could cause display issues. The toggle feature lets you quickly disable problematic snippets. Unlike PHP snippets, CSS/JS errors won’t cause white screens.
PRO

Get access to all 147 modules with a single license

Upgrade to Pro
Prev
Media Replacement
Next
Hide Admin Bar (By Role)