Documentation

📋 Overview

Simple Custom Code is a powerful WordPress plugin that allows you to easily add custom CSS, JavaScript, and HTML code snippets to your website without editing theme files. Perfect for adding analytics codes, custom styling, tracking scripts, or any custom functionality to your WordPress site.

🎨 CSS Support

Add custom styles to modify your site's appearance

⚡ JavaScript Support

Add custom scripts and functionality

📝 HTML Support

Insert custom HTML code anywhere

🔄 Easy Management

Organize and manage all code snippets in one place

📦 Installation

Free Version (simple-custom-code)

Step 1: Download the plugin from simplecustomcode.com

Step 2: Log in to your WordPress admin dashboard

Step 3: Navigate to Plugins → Add New → Upload Plugin

Step 4: Click Choose File and select the downloaded ZIP file

Step 5: Click Install Now and then Activate Plugin

Pro Version (simple-custom-code-pro)

After purchasing the Pro version, you'll receive the plugin file via email. Follow the same installation steps as above using the Pro version ZIP file.

🚀 Getting Started

Once activated, you can access Simple Custom Code from your WordPress admin sidebar under Custom Codes.

Main Interface

The plugin provides a clean, organized interface for managing all your custom code snippets:

Column	Description
Type	Shows the code type (HTML, CSS, or JS) with color-coded badges
Status	Indicates if the snippet is Active or Inactive
Title	The name of your code snippet for easy identification
Details	Shows loading method (Automatically/Frontend/Site), location, and priority
Author	The user who created the snippet
Date	When the snippet was created
Modified	Last modification date

✨ Creating Code Snippets

Adding a New Snippet

You can create three types of code snippets using the buttons at the top:

Add CSS Code - For custom stylesheets
Add JS Code - For JavaScript functionality
Add HTML Code - For custom HTML content

CSS Code Example

Use Case: Customize your site's styling without modifying theme files

/* Example: Change header background color */ .site-header { background-color: #667eea; color: white; }

JavaScript Code Example

Use Case: Add custom functionality, tracking codes, or interactive elements

// Example: Google Analytics tracking (function() { // Your tracking code here console.log('Custom JS loaded'); })();

HTML Code Example

Use Case: Insert custom HTML blocks, widgets, or third-party embed codes

<div class="custom-banner"> <h2>Welcome to Our Site</h2> <p>Special offer this week!</p> </div>

⚙️ Managing Code Snippets

Filtering and Searching

The plugin provides powerful filtering options to help you find snippets quickly:

Date Filter: View snippets by creation date
Type Filter: Filter by HTML, CSS, or JS
Loading Method Filter: Sort by how snippets are loaded
Status Filter: Show only active or inactive snippets
Search Box: Search snippets by title or content

Bulk Actions

You can perform actions on multiple snippets at once:

Select the checkboxes next to snippets you want to modify
Choose an action from the Bulk actions dropdown
Click Apply

Snippet Details

Each snippet displays important information:

Loading Method Icons:
- ⚙️ Automatically - Loads on all pages
- 📍 Frontend (Site) - Loads only on frontend
Priority Number: Determines loading order (10 is default)
EXT Badge: Indicates external file loading method

🎯 Editing and Managing Code Snippets

Code Editor Interface

When you create or edit a snippet, you'll see a comprehensive editor with multiple sections:

1. Code Content Section

The main code editor where you write your CSS, JavaScript, or HTML code.

Format Code

Automatically formats and beautifies your code for better readability

Generate with AI

AI-powered code generation to help create snippets quickly

Code Type Tabs

Switch between CSS, JS, and HTML views with color-coded buttons

Line Numbers

Easy reference with numbered lines in the code editor

2. Code Settings Panel

The right sidebar contains all configuration options for your snippet:

File Location

In the Simple Custom Code plugin, you can specify or modify the file location where your custom CSS, JS, or HTML snippet will be stored. In the Edit CSS Code screen, the File Location field displays the full path to the generated file within your WordPress installation. To change the file location, simply edit the filename at the end of the path (for example, replace test-filename with your preferred name). After entering the desired filename, click Save next to the field to confirm the change. The system will automatically update the file path, ensuring that your code is saved to the new location within the /wp-content/uploads/simple-custom-code/ directory. This feature helps organize and manage multiple code snippets efficiently while keeping them safely stored in your uploads directory.

Status

Active: Snippet is live and running on your site
Inactive: Snippet is saved but not executing

Toggle snippets between Active and Inactive states without deleting them. This is useful for testing, seasonal content, or troubleshooting conflicts.

Linking Type

External File: Code is saved as a separate file and linked to your site
Inline: Code is embedded directly in the HTML

Loading Method

Choose where and how your code snippet should load on your website.

Automatically: Code loads on all pages (frontend and backend)
Manually: Load code via shortcode or action hook (advanced users)

Manual Type Options

When "Manually" is selected, you can choose:

Shortcode: Insert code using a shortcode like
Action Hook: Load code at specific WordPress action hooks for precise control

Code Position

Head: Loads in the <head> section (recommended for CSS and critical JS)
Footer: Loads before the closing </body> tag (recommended for most JS)

Loading Locations

Choose where your code should be active:

Frontend (Site): Public-facing pages
Backend (Admin): WordPress admin dashboard
Login Page: WordPress login screen
Block Editor: Gutenberg block editor

Priority

Controls the loading order of snippets (default is 10). Lower numbers load first.

⚠️ Important: If you have dependencies between snippets, ensure they load in the correct order using priority values. For example, if snippet B requires snippet A, set A's priority to 5 and B's priority to 10.

Minify Code

Automatically compress your code to reduce file size and improve loading speed.

Optimized Loading

Yes: Code loads with optimized delivery methods
No: Standard loading

CSS Preprocessor

Select a CSS preprocessor if you're writing SCSS or LESS code:

None: Standard CSS
SCSS: Sassy CSS syntax
LESS: Leaner Style Sheets

3. Loading Conditions

Set powerful conditional rules to control exactly where your code loads. This feature allows you to target specific pages, posts, or URL patterns.

Condition Types

Condition	Description	Example
Contains	Loads on URLs containing the specified text	"shop" loads on any page with "shop" in URL
Equals	Loads only on exact URL match	"/about" loads only on the about page
Starts With	Loads on URLs beginning with specified text	"/product/" loads on all product pages
Ends With	Loads on URLs ending with specified text	".html" loads on all HTML pages
Does Not Contain	Loads on all pages except those with specified text	"admin" excludes admin-related pages

Adding Multiple Conditions

You can add multiple loading conditions to create complex targeting rules:

Click "Add Condition" to add a new rule
Select the condition type from the dropdown
Enter the URL pattern or text to match
Click "Remove" to delete a condition

Examples:
• Contains "shop" - Loads on pages with "shop" in the URL (e.g., yoursite.com/shop, yoursite.com/my-shop)
• Starts with "/about" - Loads only on pages starting with /about (e.g., yoursite.com/about)
• Starts with "/product/" - Loads on all product pages

4. File Location

When using "External File" as the linking type, the plugin shows the physical file location on your server. You can click the "Edit" button to modify the file path if needed.

Saving Your Snippet

After configuring your snippet:

Review all settings in the Code Settings panel
Verify your loading conditions are correct
Click the "Publish" button (for new snippets) or "Update" button (for existing snippets)

⚠️ Pro Tip: Always test your snippets on a staging site first, especially when using complex loading conditions or custom hooks.

⚙️ Plugin Settings

Access the plugin settings from the WordPress sidebar: Custom Codes → Settings

General Settings

Configure general plugin settings to customize your code editing experience.

Editor Template

Default: Standard editor appearance
Select the editor template for code editing based on your preference

Access Role

⚠️ Security Important: Select the minimum user role required to access Simple Custom Code for adding and editing custom code. Access to settings will always require administrative privileges.

Administrator: Only site administrators can manage code snippets (recommended)
Editor: Editors and above can manage snippets
Author: Authors and above can manage snippets

Show Code Warnings and Errors

✅ Enable code warnings in the editor
Shows syntax errors and warnings in real-time as you write code
Helps prevent errors before publishing

Autocomplete in the Editor

✅ Enable code autocomplete in the editor
Provides intelligent code suggestions while typing
Speeds up coding with automatic completion of functions, properties, and syntax

Code Loading Details

☐ Disable loaded codes comments in the source of the page
By default, the plugin adds HTML comments to identify which snippets are loaded
Check this option to remove these comments from your page source

AI Integration

Use the power of OpenAI to improve your productivity. Enter your API key, select an AI model, and start generating code using the power of AI.

Setting Up OpenAI

Create an account on OpenAI website
Make a payment of at least $5 on the OpenAI platform
Generate an OpenAI API key
Paste it in the Open AI Key field below and Save changes

Open AI Key

Enter your OpenAI API key to enable AI-powered code generation features.

Open AI Model

GPT-4.1: Latest and most advanced model
GPT-4: Powerful model for complex code generation
GPT-3.5-turbo: Faster, cost-effective option

💡 AI Features: Once configured, you'll see a "Generate with AI" button in the code editor that can help you create code snippets based on natural language descriptions.

Cache Settings

Configure cache settings to improve performance. Caching can significantly speed up your site by storing generated code files.

Cache Mode

✅ Enable cache mode
When enabled, codes will be cached for better performance
Recommended for production sites with high traffic

Cache Type

CSS and JavaScript: Cache both CSS and JS snippets (recommended)
CSS Only: Cache only CSS code
JavaScript Only: Cache only JavaScript code
HTML: Cache HTML snippets

Select which types of code should be cached based on your site's needs.

Cache Method

File: Cached code is saved as physical files (faster, recommended)
Database: Cached code is stored in the WordPress database

Select how cached code should be loaded. File-based caching typically offers better performance.

Cache Optimized Loading

CSS and JavaScript: Apply optimized loading to both types
CSS Only: Optimize only CSS loading
JavaScript Only: Optimize only JavaScript loading

Choose which code types should use optimized loading methods.

Saving Settings

After configuring your settings, click the "Save Changes" button at the bottom of the page to apply your changes.

⚠️ Cache Note: If you enable caching and later modify your code snippets, the cache will automatically update. However, if you experience issues, you may need to clear your site's cache or disable cache mode temporarily.

💡 Best Practices

Naming Conventions

Use descriptive titles like "Google Analytics Tracking" instead of "Code 1"
Include the purpose in the name: "Homepage Banner CSS"
Add version numbers if you iterate: "Contact Form JS v2"

Code Organization

Keep snippets focused on a single purpose
Add comments in your code to explain functionality
Use the status filter to separate production and test code

Performance Tips

Only activate snippets you're currently using
Use appropriate loading methods (don't load frontend code in admin)
Minimize the number of active snippets when possible
Test snippets before activating on production sites

Safety Guidelines

⚠️ Always backup your site before adding new code snippets!

Test new snippets on a staging site first
Deactivate snippets if your site behaves unexpectedly
Keep track of what each snippet does
Review and clean up unused snippets regularly

📚 Common Use Cases

Analytics & Tracking

Add Google Analytics, Facebook Pixel, or other tracking codes using HTML or JS snippets in the site header.

Custom Styling

Override theme styles, adjust colors, fonts, and spacing without editing theme files.

Third-Party Integrations

Embed chat widgets, social media feeds, or any third-party service code.

Custom Functionality

Add JavaScript features like smooth scrolling, custom animations, or interactive elements.

Site-Wide Banners

Display promotional banners, notifications, or announcements across your site.

Schema Markup

Add structured data for better SEO using HTML snippets.

🔧 Troubleshooting

Snippet Not Working?

Verify the snippet status is set to Active
Check that the loading method is appropriate (Frontend/Backend/Automatically)
Review your code for syntax errors
Check browser console for JavaScript errors
Ensure there are no conflicts with other plugins or theme code

Site Loading Slowly?

Review the number of active snippets
Optimize code for performance
Use appropriate loading methods (don't load unnecessary code)
Consider combining related snippets

Conflicts with Other Plugins?

Deactivate snippets one by one to identify conflicts
Adjust priority settings to change load order
Wrap JavaScript code in proper scope to avoid global conflicts