Snippets - Files

SleekByte automatically discovers and enqueues all PHP, CSS, and JavaScript files within your snippet folder. This file-based approach gives you complete flexibility in organizing your code while maintaining automatic loading behavior.

Automatic file discovery

Once a snippet.json file exists in a folder, SleekByte scans the entire directory structure and automatically handles:

.php files - Executed during the specified hook (default: wp)
.css files - Enqueued as stylesheets
.js files - Enqueued as scripts

Flexible organization

You can organize files however makes sense for your project. Here are some common patterns:

Simple structure

custom-login

index.php

script.js

snippet.json

style.css

Feature-based organization

site-enhancements

admin

admin-styles.css

dashboard.php

settings.php

frontend

enhancements.php

interactions.js

public-styles.css

includes

helpers.php

utilities.php

snippet.json

Asset-based organization

woocommerce-extras

assets

css

cart.css

checkout.css

shop.css

cart-enhancements.js

checkout-validation.js

includes

cart-functions.php

checkout-hooks.php

email-templates.php

templates

cart-item.php

checkout-form.php

index.php

snippet.json

Default loading behavior

Without any configuration in snippet.json, all discovered files load with these defaults:

PHP files: Execute during wp hook
CSS files: Enqueue on frontend with no dependencies
JS files: Enqueue on frontend with no dependencies
Context: Frontend only
Conditions: No conditions (always load)

Customizing file loading

You can override the default behavior for specific files using the files object in snippet.json:

Different hooks for PHP files

            {
      "name": "Multi-Hook Example",
      "files": {
        "early-setup.php": {
          "hook": "after_setup_theme"
        },
        "post-type.php": {
          "hook": "init"
        },
        "admin/dashboard.php": {
          "hook": "admin_init",
          "context": ["admin"]
        },
        "frontend/widgets.php": {
          "hook": "widgets_init"
        },
        "cleanup.php": {
          "hook": "wp_footer"
        }
      }
    }
  
                    
                Copy

Context-specific assets

            {
      "name": "Context Example",
      "files": {
        "includes/core.php": {},
        "admin/settings.php": {
          "context": ["admin"]
        },
        "assets/css/admin.css": {
          "context": ["admin"],
        },
        "assets/css/frontend.css": {
          "context": ["frontend"]
        },
        "assets/js/editor.js": {
          "context": ["block-editor"]
        }
      }
    }
  
                    
                Copy

Dependencies and module loading

            {
      "name": "Dependencies Example",
      "files": {
        "assets/base.css": {},
        "assets/enhanced.css": {
          "dependencies": ["custom-base-styles"]
        },
        "assets/interactive.js": {
          "dependencies": ["jquery", "wp-api"]
        },
        "assets/modern.js": {
          "module": true,
          "dependencies": []
        }
      }
    }
  
                    
                Copy

File loading order

SleekByte processes files in this order:

Discovery: Scans directory for PHP, CSS, and JS files
Configuration: Applies snippet.json settings to each file
Conditions: Evaluates loading conditions
Context: Determines appropriate loading context
Enqueuing: Registers files with WordPress

Advanced examples

Complex WooCommerce integration

advanced-woo

blocks

block-editor.js

block-styles.css

product-showcase.php

checkout

checkout-enhancements.js

checkout-styles.css

custom-fields.php

validation.php

emails

custom-templates.php

email-styles.css

vendor

stripe

gateway.php

stripe-elements.js

index.php

snippet.json

With corresponding configuration:

            {
      "name": "Advanced WooCommerce Integration",
      "conditions": [
        [
          {
            "parameter": "postType",
            "operator": "equals",
            "value": "product"
          }
        ]
      ],
      "files": {
        "blocks/product-showcase.php": {
          "hook": "init"
        },
        "blocks/block-styles.css": {
          "context": ["block-editor"],
          "hook": "enqueue_block_editor_assets"
        },
        "blocks/block-editor.js": {
          "context": ["block-editor"],
          "dependencies": ["wp-blocks", "wp-editor"]
        },
        "checkout/custom-fields.php": {
          "conditions": [
            [
              {
                "parameter": "requestUri",
                "operator": "contains",
                "value": "checkout"
              }
            ]
          ]
        },
        "checkout/checkout-styles.css": {
          "conditions": [
            [
              {
                "parameter": "requestUri",
                "operator": "contains",
                "value": "checkout"
              }
            ]
          ]
        },
        "emails/email-styles.css": {
          "hook": "woocommerce_email_header",
          "context": ["frontend"]
        },
        "vendor/stripe/stripe-elements.js": {
          "dependencies": [],
          "module": true,
          "conditions": [
            [
              {
                "parameter": "postType",
                "operator": "equals",
                "value": "product"
              }
            ]
          ]
        }
      }
    }
  
                    
                Copy

Non-enqueued files

Files that don't match the supported extensions (.php, .css, .js) are ignored by SleekByte but can still be included in your snippet folder for organization:

documentation-example

docs

screenshot.png

usage.md

tests

test-functions.php

index.php

README.md

snippet.json

styles.css

In this example:

✅ index.php, styles.css are automatically enqueued
✅ tests/test-functions.php is automatically enqueued
❌ README.md, usage.md, screenshot.png are ignored (not PHP/CSS/JS)

Best practices

Organize by feature
Group related PHP, CSS, and JS files together by functionality rather than file type.

Use descriptive names
File names should clearly indicate their purpose: checkout-validation.js vs script.js.

Leverage nested folders
Don't hesitate to create deep folder structures - SleekByte handles any nesting level.

Configure when needed
Start with automatic discovery, then add snippet.json configuration only when you need specific loading behavior.

Test loading order
Use different hooks for PHP files that need to run at specific times in the WordPress lifecycle.

The file-based approach gives you maximum flexibility while maintaining the simplicity of automatic discovery and enqueueing.