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

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