FluentCommunity Customizer User Manual

Introduction

FluentCommunity Customizer is a powerful WordPress plugin that enhances your FluentCommunity installation by providing extensive customization options for layout, appearance, and content integration. This manual will guide you through all features and help you create the perfect community layout for your needs.

Core Features

Community Layout Controls

The plugin offers three main areas of layout control:

  1. Side Bar (Spaces Area)
  • Position left or right
  • Option to hide completely
  • Affects the entire community layout
  1. Top Menu Bar
  • Show or hide the entire menu bar
  • Customizable component positioning
  • Responsive design maintenance
  1. Content Header Bars
  • Toggle visibility
  • Maintains content hierarchy
  • Affects all community pages

Menu Component Positioning

Each menu component can be independently positioned:

  1. Community Logo
  • Left, center, or right positioning
  • Hide option available
  • Maintains brand visibility
  1. Community Menu
  • Flexible positioning (left, center, right)
  • Hide option for minimal layouts
  • Automatic spacing adjustment
  1. Profile Menu
  • Independent positioning
  • Automatic submenu alignment
  • User-friendly accessibility

Theme Integration Components

Header Integration

  • Use [show_header] shortcode
  • Seamless theme header incorporation
  • Automatic height adjustment
  • WordPress admin bar compatibility

Custom Sidebar Content

  • Add widgets, shortcodes, or HTML
  • Custom title option
  • Responsive video embedding
  • Sticky positioning

Footer Integration

  • Use [show_footer] shortcode
  • Theme footer incorporation
  • Custom content placement
  • Flexible positioning

Strategic Implementation Guide

For Membership Sites

  • Position the Spaces menu on the left for traditional navigation
  • Keep the top menu bar visible for essential functions
  • Add membership-specific content in the sidebar
  • Use custom CSS for branding alignment

For Learning Communities

  • Consider right-side Spaces placement for focused content
  • Utilize sidebar for course navigation
  • Add progress tracking widgets
  • Implement custom CSS for learning-oriented design

For Social Communities

  • Maximize screen space with hidden Spaces menu
  • Emphasize the top menu bar for navigation
  • Use sidebar for community highlights
  • Add custom CSS for social engagement elements

Custom CSS Implementation

The plugin includes a dedicated Custom CSS section for advanced customization. Example implementations:

/* Adjust Main Menu Width to 100% only on community pages (Kadence) */
body.community-customizer .site-container {
    max-width: 100%;
}

/* Enhance menu visibility */
.fcom_top_menu {
    background: #f8f9fa !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Improve sidebar readability */
.fcom_side_custom_content {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

Troubleshooting

Common issues and solutions:

  1. Menu Alignment Issues
  • Check position settings
  • Verify custom CSS specificity
  • Inspect browser console for conflicts
  1. Content Integration Problems
  • Verify shortcode placement
  • Check WordPress theme compatibility
  • Review header/footer template structure
  1. Responsive Design Concerns
  • Test on multiple devices
  • Verify custom CSS media queries
  • Check theme responsive breakpoints

Best Practices

  1. Layout Organization
  • Maintain consistent positioning
  • Consider user navigation patterns
  • Test layouts across devices
  1. Content Integration
  • Use clear section titles
  • Implement responsive media
  • Maintain content hierarchy
  1. Performance Optimization
  • Minimize custom CSS
  • Optimize media content
  • Regular testing and updates

Support and Resources

  • Plugin Documentation: [https://wplaunchify.com/docs/fluentcommunity-customizer/]
  • Support Tickets: [https://wplaunchify.com/support/]
  • Community Forums: [https://wplaunchify.com/community/]

FluentCommunity Customizer Developer Reference

Modal Popup Trigger & Remote Code

This is the first edition of the code (since 1.5.8) and will likely go further with features. For now, here are the steps:

  • Copy this entire block into your Fluent Community Customizer Sidebar Area
  • Create a Kadence Page or Element with the Kadence Modal Block
  • In that block, name the Modal Trigger button to be “myModal” (note: you can do multiple buttons and modals if you change matching trigger name in both and use two snippets
  • You can use the remote trigger link provided, or create your own with the proper data-modal-remote-trigger=”myModal” (or use your unique modal trigger id)
  • Use the optional CSS on the Kadence Page or Element to hide the default modal trigger button (see code below, which must go on the page or element)
Paste Into Fluent Community Customizer Sidebar Area
<!-- Remote trigger link (outside the iframe) -->
<a class="button" href="#" data-modal-remote-trigger="myModal">Open Modal</a>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Flag to track whether the iframe container is currently visible
  var containerVisible = false;
  
  document.addEventListener('click', function(e) {
    // Check for a remote trigger click outside the iframe
    var trigger = e.target.closest('[data-modal-remote-trigger]');
    if (trigger) {
      e.preventDefault();
      
      // Select the container for the iframe (.fc-embed-container)
      var container = document.querySelector('.fc-embed-container');
      if (!container) {
        console.error('Unable to find .fc-embed-container');
        return;
      }
      
      // Toggle the container's display based on the current state
      if (!containerVisible) {
        container.style.display = 'block';
      } else {
        container.style.display = 'none';
      }
      
      // Select the iframe inside .fc-embed-container
      var iframe = document.querySelector('.fc-embed-container iframe');
      if (iframe && iframe.contentDocument) {
        // Find the button inside the iframe that opens the modal
        var modalButton = iframe.contentDocument.querySelector('[data-modal-open="myModal"]');
        if (modalButton) {
          modalButton.click();
        } else {
          console.warn('Modal trigger button not found inside the iframe.');
        }
      } else {
        console.error('Unable to access the iframe content.');
      }
      
      // Toggle our visibility flag
      containerVisible = !containerVisible;
    }
  });
});
</script>
<!-- CSS to hide the modal button inside the iframe -->
<style>
.fc-embed-container {
    display: none;
}
</style>
CSS To Hide Default Modal Button (put after modal block in Kadence Layout)
<style>
/* Hides the default modal trigger button when using Kadence Modal Block. Place after modal block in layout */
button[data-modal-open="myModal"] {
  visibility: hidden!important;
}
</style>

Hook Reference

Actions

// Portal Header Integration
add_action('fluent_community/portal_head', 'your_function');

// Portal Footer Integration
add_action('fluent_community/portal_footer', 'your_function');

// Sidebar Extension
add_action('fluent_community/after_sidebar_wrap', 'your_function');

Filters

// Modify Plugin Settings
add_filter('fluentcommunity_get_settings', 'your_filter_function');

// Extend Menu Styles
add_filter('fluentcommunity_get_menu_styles', 'your_filter_function');

CSS Classes and IDs

Layout Components

/* Main Container */
#fluent_com_portal {}

/* Top Menu */
.fcom_top_menu {}
.top_menu_left {}
.top_menu_center {}
.top_menu_right {}

/* Spaces Area */
.spaces {}
.space_navigation {}

/* Content Area */
.feed_layout {}
.feeds.fcom_single_layout {}

/* Custom Sidebar */
.fcom_side_custom {}
.fcom_side_custom_content {}
.space_section_title {}

Interactive Elements

/* Profile Menu */
.fcom_user_context_menu_items {}
.fcom_profile_sub_menu {}
.fcom_profile_block {}
.fcom_profile_avatar {}

/* Header Elements */
.fhr_content_layout_header {}

JavaScript Integration

Height Adjustment API

// Event Listeners
window.addEventListener("load", setHeaderHeight);
window.addEventListener("resize", setHeaderHeight);
window.addEventListener("DOMContentLoaded", setHeaderHeight);

// CSS Variable
document.documentElement.style.setProperty("--header-height", `${height}px`);

PHP Functions

Settings Management

// Get All Settings
fluentcommunity_get_settings();

// Save Settings
fluentcommunity_save_settings();

// Register New Settings
register_setting('fluentcommunity_settings', 'your_setting_name');

Menu Styling

fluentcommunity_get_menu_styles($position, $order);

Shortcodes

Header Integration

[show_header]

Footer Integration

[show_footer]

Constants

FLUENTCOMMUNITY_CUSTOMIZER_VERSION
FLUENTCOMMUNITY_CUSTOMIZER_PLUGIN_DIR
FLUENTCOMMUNITY_CUSTOMIZER_PLUGIN_URL

Extension Examples

Add Custom Sidebar Widget

add_action('fluent_community/after_sidebar_wrap', function() {
    echo '<div class="fcom_side_custom">';
    echo '<h4 class="space_section_title">Custom Widget</h4>';
    echo '<div class="fcom_side_custom_content">';
    // Your widget content here
    echo '</div>';
    echo '</div>';
});

Modify Menu Styles

add_filter('fluentcommunity_get_menu_styles', function($styles, $position, $order) {
    if ($position === 'center') {
        $styles .= 'background-color: #f0f0f0;';
    }
    return $styles;
}, 10, 3);

Custom Header Integration

add_action('fluent_community/portal_head', function() {
    echo '<div class="custom-header">';
    // Your header content
    echo '</div>';
});

Best Practices

  1. CSS Modifications
  • Use !important sparingly
  • Follow mobile-first approach
  • Maintain specificity hierarchy
  1. JavaScript Integration
  • Use event delegation
  • Respect existing event listeners
  • Handle responsive breakpoints
  1. PHP Extensions
  • Verify nonce checks
  • Sanitize inputs
  • Escape outputs
  • Use WordPress coding standards

Similar Posts