Getting Started

Welcome to Tofido Code Manager. This guide will walk you through installation, activation, and creating your first snippet. By the end, you will be confident managing custom code in WordPress without touching theme files.

System Requirements

Before installing, ensure your environment meets the following requirements:

  • WordPress: Version 6.2 or higher
  • PHP: Version 8.1 or higher
  • MySQL: Version 5.7 or higher (or MariaDB 10.3+)
  • Browser: Modern evergreen browser for admin interface
Multisite Note

Version 1.0.0 is optimized for single-site WordPress. Basic multisite usage may work with individual site activation. Full network activation support is planned for a future release.

Installation

Method 1: WordPress Admin (Recommended)

Once the plugin is available on WordPress.org:

  1. Log in to your WordPress admin dashboard.
  2. Navigate to Plugins → Add New.
  3. Search for Tofido Code Manager.
  4. Click Install Now, then Activate.

Method 2: Manual Upload

  1. Download the plugin ZIP file from the release page.
  2. Navigate to Plugins → Add New → Upload Plugin.
  3. Select the ZIP file and click Install Now.
  4. Click Activate Plugin after installation completes.

Method 3: FTP Upload

  1. Extract the plugin ZIP file locally.
  2. Upload the tofido-code-manager folder to /wp-content/plugins/ on your server.
  3. Navigate to Plugins in the WordPress admin and click Activate under Tofido Code Manager.

Activation & First Setup

After activation, you will see a new menu item in your WordPress admin sidebar: Code Manager. Click it to open the dashboard.

On first launch, the plugin performs a quick system check to verify:

  • PHP version compatibility
  • WordPress version compatibility
  • Required database table creation
  • Write permissions for asset cache directory

If any issues are detected, a notification will guide you through resolution. Most environments pass all checks automatically.

Creating Your First Snippet

Let us create a simple CSS snippet that changes the background color of your site header.

Step 1: Add New Snippet

Click Add New Snippet in the Code Manager dashboard. You will see the snippet editor interface.

Step 2: Configure Basic Settings

  • Title: Enter Header Background Color
  • Type: Select CSS from the dropdown
  • Status: Leave as Draft for now

Step 3: Write Your Code

In the code editor, enter the following CSS:

CSS 
/* Change site header background */
.site-header {
    background-color: #1B9C85;
    transition: background-color 0.3s ease;
}

Step 4: Set Placement

Under the Placement tab:

  • Location: Select Header
  • Priority: Leave as 10 (default)
  • Load Method: Select External File for caching

Step 5: Configure Display Conditions

Under the Conditions tab:

  • Apply To: Select All Pages
  • Devices: Select All Devices

Saving and Testing

Click Save Snippet. The plugin validates your CSS syntax automatically. If errors are found, they are highlighted in the editor with suggestions.

With the snippet saved as a draft, click Preview to see how it looks on your site. The preview opens in a new tab with your snippet temporarily applied.

Review the changes. If satisfied, return to the editor and change the status from Draft to Published.

Publishing and Verification

Once published, your snippet is live. To verify:

  1. Visit your site frontend and inspect the header element.
  2. Open browser DevTools and check the <head> section for the generated CSS file link.
  3. Confirm the background color has changed to mint green (#1B9C85).
Important

Always test snippets as drafts before publishing. For PHP snippets, use Safe Mode (explained in the Security documentation) to catch fatal errors before they affect your live site.

Next Steps

Now that you have created your first snippet, explore the rest of the documentation:

  • Snippet Types - Learn about all six snippet types and when to use each
  • Security - Understand Safe Mode, capability checks, and dangerous function scanning
  • Features - Discover advanced capabilities like revision history and import/export