Snippet Types

Tofido Code Manager supports six distinct snippet types. Choosing the right type ensures proper validation, safe execution, and optimal performance.

CSS Snippets

The most common type. Inject custom styles with automatic minification and caching.

Best for

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

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: Cached CSS file. Best for performance.
Inline: Embedded in HTML. Use for critical CSS or small snippets.

JavaScript Snippets

Add interactivity with dependency management and script attribute control.

Best for

Custom animations and interactions
Third-party service integration
DOM manipulation
Event tracking

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

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

HTML Snippets

Raw markup output for embed codes, tracking pixels, and structured data.

Best for

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

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

Execute server-side logic with the most comprehensive safety controls.

Best for

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

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 from untrusted sources.

Safe Mode

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

Universal Snippets

Combine CSS, JavaScript, and HTML in a single managed unit with shared targeting rules.

Best for

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

Structure

CSS - automatically placed in <head> or external file
JavaScript - placed before </body> or external file
HTML - placed at the configured location

Text Snippets

Plain text output without markup processing.

Best for

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

Text

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

Choosing the Right Type

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