Skip to main content

Getting Started with Flexcode

Image to be inserted in the near future: Screenshot of the Flexcode main dashboard showing the snippet list and main controls

What is Flexcode?​

Flexcode is a powerful WordPress plugin that allows you to easily add custom HTML, CSS, and JavaScript code to your website without editing theme files. Whether you need to add tracking scripts, customize your site's appearance, or implement interactive features, Flexcode provides a safe and organized way to manage all your custom code.

info

Flexcode is designed for both beginners and advanced users. You don't need to be a coding expert to use it effectively, but having basic knowledge of HTML, CSS, and JavaScript will help you get the most out of the plugin.

Key Benefits​

  • No Theme Editing Required: Add custom code without modifying your theme files
  • Organized Code Management: Keep all your snippets in one place
  • Selective Loading: Control exactly where your code appears
  • Safe Implementation: Prevent site-breaking errors with built-in safeguards
tip

Using Flexcode instead of editing theme files means your customizations won't be lost when you update your theme. This is a much safer approach to customizing your WordPress site!

Installation and Setup​

Installing Flexcode​

  1. From WordPress Repository (Limited version):

    • Navigate to Plugins → Add New in your WordPress dashboard
    • Search for "Flexcode"
    • Click Install Now, then Activate

    Suggested animation: Short GIF showing the installation process

  2. Manual Installation (Paid version):

    • Download the Flexcode ZIP file from your user dashboard (plugins.iridesk.com/dashboard)
    • Go to Plugins → Add New → Upload Plugin
    • Choose the ZIP file and click Install Now
    • After installation completes, click Activate Plugin

Initial Configuration​

After activation, you'll find the Flexcode menu in your WordPress admin sidebar under the "Iridesk" parent menu.

Image to be inserted in the near future: Screenshot highlighting the Flexcode menu location in the WordPress admin

warning

Make sure you have administrator privileges to access and use Flexcode. Users with lower permission levels may not see the Flexcode menu in their WordPress dashboard.

Understanding Snippet Types​

Flexcode supports three types of code snippets:

HTML Content​

HTML content allows you to add custom content, elements, or structures to your pages.

Common uses:

  • Custom notification banners
  • Contact information blocks
  • Embedded forms
  • Custom layouts
info

HTML snippets are injected into your page's DOM. The exact placement depends on your theme's structure and the hooks Flexcode uses to insert content.

CSS Files​

CSS files let you customize the appearance of your site without editing theme files.

Common uses:

  • Custom colors and fonts
  • Layout adjustments
  • Mobile-specific styles
  • Element visibility control
tip

When writing CSS, use specific selectors to ensure your styles target exactly the elements you want to modify. This helps prevent unintended styling changes to other parts of your site.

JavaScript Files​

JavaScript files enable interactive features and functionality.

Common uses:

  • Analytics tracking codes
  • Interactive elements
  • Form validations
  • Third-party integrations
danger

JavaScript errors can potentially break functionality on your site. Always test your JavaScript code thoroughly before deploying it to your live site.

Your First Snippet​

Let's create a simple notification banner to appear at the top of your site:

  1. Navigate to Flexcode
  2. Select Global from the page selector at the top (to make it appear on all pages)
  3. Enter the following code in the HTML content box:
<div class="notification-banner">
  📢 Welcome to our website! Check out our latest products.
</div>
  1. Now add a CSS file for styling:
    • Click Add File
    • Name it "notification_banner.css"
    • Enter the following code:
.notification-banner {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  color: #495057;
  font-size: 14px;
  padding: 10px 15px;
  text-align: center;
  width: 100%;
}
  1. Click Deploy Changes

Image to be inserted in the near future: Screenshot of the Flexcode interface with the example code

Visit your site to see the notification banner in action!

note

After clicking "Deploy Changes," it might take a few seconds for your changes to appear on your site. If you don't see them immediately, try refreshing the page or clearing your browser cache.

Page-Specific Snippets​

You can also create snippets that only appear on specific pages:

  1. Navigate to Flexcode
  2. Select the specific page from the page selector at the top (e.g., "Contact")
  3. Add your HTML content and/or files
  4. Click Deploy Changes

This way, your code will only load on the selected page, improving performance and organization.

tip

Using page-specific snippets not only improves your site's performance but also makes your code easier to manage and target. You'll know exactly where each snippet is being used.

Adding Different File Types​

Adding CSS Files​

  1. Navigate to Flexcode
  2. Select the page where you want the CSS to apply from the page selector
  3. Click Add File and name it with a .css extension (e.g., "styles.css")
  4. Enter your CSS code
  5. Click Deploy Changes
info

CSS files added through Flexcode are automatically enqueued in WordPress, which means they'll be properly loaded in the <head> section of your HTML.

Adding JavaScript Files​

  1. Navigate to Flexcode
  2. Select the page where you want the JavaScript to run from the page selector
  3. Click Add File and name it with a .js extension (e.g., "script.js")
  4. Enter your JavaScript code
  5. Click Deploy Changes

Image to be inserted in the near future: Screenshot showing the Add File button and file naming

Example: Creating a Complete Feature​

Let's create a simple "Back to Top" button that appears when scrolling down:

  1. Navigate to Flexcode

  2. Select Global from the page selector

  3. Click Add File and name it "back-to-top.js"

  4. Enter the following JavaScript code:

// Set loading type to "deferred" for this file

// Create the button element
const backToTopBtn = document.createElement('button');
backToTopBtn.innerHTML = '&uarr;';
backToTopBtn.className = 'back-to-top';
backToTopBtn.title = 'Back to Top';
document.body.appendChild(backToTopBtn);

// Show/hide the button based on scroll position
window.addEventListener('scroll', function() {
  if (window.pageYOffset > 300) {
    backToTopBtn.classList.add('show');
  } else {
    backToTopBtn.classList.remove('show');
  }
});

// Scroll to top when clicked
backToTopBtn.addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
  1. Click Add File again and name it "back-to-top.css"
  2. Enter the following CSS code:
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #333;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, background-color 0.3s;
  z-index: 999;
}

.back-to-top.show {
  opacity: 0.7;
}

.back-to-top:hover {
  opacity: 1;
  background-color: #555;
}
  1. Click Deploy Changes

Suggested animation: GIF showing the back-to-top button in action

tip

The z-index: 999; ensures your back-to-top button appears above other elements on the page. If your theme has elements with high z-index values, you might need to increase this number.

note

The button only appears after scrolling down 300 pixels. You can adjust this threshold by changing the value in the if (window.pageYOffset > 300) condition.

Best Practices​

Organization​

  • Use descriptive file names: Name your files according to their purpose (e.g., "header-styles.css" instead of "style1.css")
  • Group related files: Keep related CSS and JS files together in the same snippet
  • Use page-specific targeting: Only load code on pages where it's needed
info

A good naming convention makes it much easier to find and manage your snippets as their number grows. Consider including both the feature name and file type in your filenames (e.g., "hero-section-styles.css").

Performance​

  • Minimize file size: Keep your code as concise as possible and use the auto minification checkbox
  • Use deferred/async loading for JavaScript: This ensures your JavaScript runs after the DOM is loaded or asynchronously while the page loads
  • Test your snippets: Always check that your code works as expected on different devices and browsers
warning

Large or poorly optimized code snippets can slow down your site. Be especially careful with JavaScript that runs on every page load.

Troubleshooting​

Common Issues​

  • Code not appearing: Make sure you've clicked "Deploy Changes"
  • JavaScript not working: Check the browser console for errors
  • CSS not applying: Verify your selectors are correct and specific enough
danger

If your site encounters a "White Screen of Death" or a fatal error because of Flexcode, it will automatically try and deactivate itself to prevent further issues. Alternatively, you can manually deactivate Flexcode by adding ?flexcode=off to the end of your site's URL.

Solutions​

  • Use browser developer tools to inspect and debug
  • Start with simple snippets and gradually add complexity
  • Test on different browsers and devices
tip

Most browsers have developer tools that can help you debug issues. Press F12 or right-click and select "Inspect" to open these tools. The "Console" tab will show JavaScript errors, and the "Elements" tab lets you inspect your HTML and CSS.