Snippet Types

Tofido Code Manager supports six distinct snippet types, each optimized for specific use cases. Choosing the right type ensures proper validation, safe execution, and optimal performance.

CSS Snippets

CSS snippets are the most common type. They inject custom styles into your WordPress site with full support for caching, minification, and conditional loading.

Best For

  • Customizing theme appearance
  • Adding responsive breakpoints
  • Overriding plugin styles
  • Critical CSS for above-the-fold content

Example: Custom Button Styles

CSS 
/* Primary button customization */
.btn-primary {
    background: linear-gradient(135deg, #1B9C85, #2DD4BF);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 156, 133, 0.4);
}

Load Methods

  • External File: Generates a cached CSS file. Best for performance.
  • Inline: Embeds directly in HTML. Use for critical CSS or small snippets.

JavaScript Snippets

JavaScript snippets add interactivity and functionality. They support jQuery (if loaded by theme), vanilla JS, and external dependencies.

Best For

  • Custom animations and interactions
  • Third-party service integration
  • DOM manipulation
  • Event tracking (Google Analytics, etc.)

Example: Smooth Scroll to Anchor

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

Script Attributes

When using external file mode, you can specify:

  • defer - Execute after HTML parsing
  • async - Execute as soon as loaded
  • type="module" - ES module support

HTML Snippets

HTML snippets output raw markup directly. They are ideal for embed codes, tracking pixels, and structured data injection.

Best For

  • Google Analytics or Meta Pixel codes
  • Schema.org structured data
  • Third-party widget embeds
  • Custom meta tags

Example: Schema.org LocalBusiness

HTML 
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Your Business Name",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "City",
    "addressRegion": "ST",
    "postalCode": "12345"
  }
}
</script>

PHP Snippets

PHP snippets execute server-side logic. They are the most powerful type and therefore include the most safety controls.

Best For

  • Custom WordPress hooks and filters
  • Dynamic content generation
  • Custom shortcodes
  • Database queries

Example: Custom Excerpt Length

PHP 
// Customize excerpt length to 30 words
add_filter('excerpt_length', function($length) {
    return 30;
}, 999);
Security Warning

PHP snippets execute with full WordPress capabilities. Always use Safe Mode before publishing. Never run PHP snippets from untrusted sources. The dangerous function scanner will warn you about risky functions, but review all code carefully.

Safe Mode

Before publishing a PHP snippet, enable Safe Mode to test execution in an isolated environment. If a fatal error occurs, the snippet is automatically disabled and you receive a detailed error report. See the Security documentation for details.

Universal Snippets

Universal snippets combine multiple languages in a single managed unit. They are perfect for complex features that require CSS, JavaScript, and HTML working together.

Best For

  • Announcement banners with styling and behavior
  • Cookie consent implementations
  • Custom forms with validation
  • Interactive widgets

Structure

A Universal snippet contains separate editors for:

  • CSS (automatically placed in <head> or external file)
  • JavaScript (automatically placed before closing </body> or external file)
  • HTML (placed at the configured location)

All three components share the same display conditions and placement rules.

Text Snippets

Text snippets output plain text without any markup processing. They are ideal for directives, meta values, and text-based configuration.

Best For

  • Custom robots.txt directives
  • Meta description templates
  • Plain text headers
  • Custom HTTP headers

Example: Custom Robots Directive

Text 
User-agent: *
Allow: /
Disallow: /wp-admin/
Sitemap: https://example.com/sitemap.xml

Choosing the Right Type

Use Case Recommended Type Why
Custom styles CSS Automatic minification, caching, syntax validation
Interactive features JavaScript Dependency management, defer/async support
Tracking codes HTML Raw output, placement flexibility
Custom logic PHP Full WordPress API access, Safe Mode
Complex widgets Universal Combined CSS + JS + HTML management
Text directives Text No markup processing, exact output