Adding Custom CSS & JavaScript

Personalizing your community to match your brand is essential. FluentCommunity offers powerful and flexible ways to add custom CSS (for design and styling) and JavaScript (for extra functionality).

This guide will walk you through the two primary methods for adding custom code, helping you choose the best one for your needs.

1. Using the Built-in Editor (Easy & Recommended): Perfect for quick, simple changes directly within the FluentCommunity settings.
2. Using a Snippet Plugin (Advanced Control): Ideal for organizing larger code blocks or for developers who need more flexibility.

Method 1: The Built-in Editor #

For over 90% of customization needs, this is the safest and straightforward method. It doesn’t require any extra plugins and your changes are easy to manage.

Steps: #

1. Navigate to your WordPress Dashboard → FluentCommunity → Portal Settings.
2. Click on the Customizations tab.
3. Scroll down until you find the “Custom Snippets” section.

Adding Custom CSS #

Paste your styling rules directly into the Custom CSS box.

Important:

Do NOT include the <style> or </style> tags here. Just the raw CSS code.

 Example — Add CSS in the Custom CSS box:

CSS

/* Make the main header blue with white text */

.fc-portal-header {

   background: #1e73be;

   color: white;

}

Adding Custom JavaScript #

Paste your script directly into the Custom JavaScript box.

Note: Unlike the CSS box, for JavaScript, you SHOULD include the full <script> and </script> tags.

 Example — Add JS in the Custom JS box:

HTML
<script>

    console.log("FluentCommunity portal is ready!");

</script>

Finally, click the “Save Custom CSS & JS” button to apply your changes.

Method 2: Using a Snippet Plugin #

This method is for users who want to keep their code more organized or need to implement more complex logic. It involves using FluentCommunity’s developer “hooks” (add_action).

The Most Important Rule for Snippets #

When you use a FluentCommunity hook like add_action(…), you are using PHP code. Therefore, you must always create a PHP Snippet, even if your goal is to add CSS or JS inside it. This is the most common point of confusion.

Adding Custom CSS with a Snippet Plugin #

1. Create a new snippet in your chosen plugin (e.g., FluentSnippets).
2. Set the snippet type to PHP.
3. Paste the following PHP code structure. Your CSS rules go inside the <style> tags.

 Example — PHP Snippet for adding CSS:

PHP
add_action('fluent_community/portal_head', function() {

    ?>

    <style>

        /* Add all your custom CSS rules here */

        .fc-portal-header {

            background: #1e73be;

            color: #fff;

        }

    </style>

    <?php

});

Adding Custom JavaScript with a Snippet Plugin #

Similarly, you’ll use a PHP Snippet to hook your JavaScript into the page footer for best performance.

1. Create a new PHP Snippet.
2. Paste the following code structure. Your JS code goes inside the <script> tags.

 Example — PHP Snippet for adding JavaScript:

PHP
add_action('fluent_community/portal_footer', function() {

    ?>

    <script>

        // Add your custom JavaScript here

        console.log("Custom JS loaded for FluentCommunity!");

    </script>

    <?php

});

Which Method Should You Use? #

• Use the Built-in Editor if: You are a beginner or need to make quick, simple style changes. This is the recommended method.
• Use a Snippet Plugin if: You are a developer or an advanced user who needs to organize a lot of code, link external files, or add conditional logic.

Troubleshooting #

• CSS/JS doesn’t work? → The first thing to always do is clear your browser cache and any caching plugins on your site.
• Site looks broken after adding a snippet? → Deactivate the last snippet you added. The problem is likely a small typo in your code.
• Code in snippet not working? → Double-check that you created a PHP Snippet and that your custom code is placed correctly inside the <style> or <script> tags.