Theme Settings Works with All Your Favorite Modern Frameworks

Theme Settings framework is designed to work seamlessly with any modern CSS framework or WordPress starter theme. Whether you prefer Tailwind’s utility-first approach, Bootstrap’s component library, Bulma’s modern CSS, or Underscores’ minimalist foundation, Theme Settings integrates smoothly without conflicts.

This guide provides quick integration steps for each popular framework, helping you combine the power of Theme Settings with your preferred development tools.

Why Framework Compatibility Matters

Modern WordPress development relies on proven frameworks to accelerate development and ensure consistency. Theme Settings enhances these frameworks by adding a professional admin interface without interfering with your existing workflow.

Benefits of Framework Integration:

• ✅ Keep using tools you know
• ✅ No learning curve for your CSS framework
• ✅ Theme Settings handles admin UI
• ✅ Framework handles frontend styling
• ✅ Clean separation of concerns
• ✅ Faster development overall

Theme Settings is framework-agnostic, meaning it doesn’t force any specific CSS approach. You choose what works best for your project.

WordPress Core Integration

Theme Settings is built specifically for WordPress, making core integration seamless and automatic.

Native WordPress Features

Automatic Integration:

• ✅ WordPress hooks and filters
• ✅ Admin menu system
• ✅ Options API
• ✅ Media library
• ✅ Navigation menus
• ✅ Customizer compatibility (optional)

Quick Setup

Step 1: Install Theme Settings

// functions.php
require_once get_template_directory() . '/themesettings/theme-settings.php';

Step 2: Configure Settings

// themesettings/settings-config.php
return [
    'general' => [
        'title' => 'General Settings',
        'sections' => [
            'branding' => [
                'fields' => [
                    'site_logo' => [
                        'type' => 'media',
                        'label' => 'Site Logo',
                    ],
                ],
            ],
        ],
    ],
];

Step 3: Use in Templates

// header.php
$logo = ts_get_option('site_logo');
if ($logo) {
    echo '<img src="' . esc_url($logo) . '" alt="Logo">';
}

That’s it! Theme Settings is now fully integrated with WordPress.

Tailwind CSS Integration

Tailwind CSS is a utility-first CSS framework perfect for rapid UI development. Theme Settings complements Tailwind by managing dynamic values that utility classes can’t handle alone.

Why Tailwind + Theme Settings?

Tailwind excels at static styling, while Theme Settings manages dynamic user preferences like colors, spacing, and typography that users can change via admin panel.

Perfect Use Case:

• Tailwind: Layout structure and utility classes
• Theme Settings: User-customizable colors, fonts, spacing

Quick Integration

Step 1: Install Tailwind in Your Theme

# In your theme directory
npm install -D tailwindcss
npx tailwindcss init

Step 2: Configure Tailwind

// tailwind.config.js
module.exports = {
  content: [
    './**/*.php',
    './assets/js/**/*.js',
  ],
  theme: {
    extend: {},
  },
}

Step 3: Create Dynamic CSS from Theme Settings

// functions.php
function mytheme_dynamic_tailwind_css() {
    // Get user settings
    $primary_color = ts_get_option('primary_color', '#2563eb');
    $font_size = ts_get_option('base_font_size', 16);
    $container_width = ts_get_option('container_width', 1200);
    
    // Output as CSS variables for Tailwind
    ?>
    <style id="theme-settings-tailwind">
        :root {
            --color-primary: <?php echo esc_attr($primary_color); ?>;
            --font-size-base: <?php echo esc_attr($font_size); ?>px;
            --container-max-width: <?php echo esc_attr($container_width); ?>px;
        }
    </style>
    <?php
}
add_action('wp_head', 'mytheme_dynamic_tailwind_css');

Step 4: Extend Tailwind Config with CSS Variables

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
      },
      fontSize: {
        base: 'var(--font-size-base)',
      },
      maxWidth: {
        container: 'var(--container-max-width)',
      },
    },
  },
}

Step 5: Use in Templates

<!-- Using Tailwind classes with dynamic values -->
<div class="max-w-container mx-auto bg-primary text-base">
    <h1 class="text-2xl font-bold text-primary">
        <?php echo ts_get_option('site_title'); ?>
    </h1>
</div>

Tailwind + Theme Settings Best Practices

What to Control via Theme Settings:

• ✅ Brand colors (primary, secondary, accent)
• ✅ Typography (font families, base size)
• ✅ Container widths
• ✅ Spacing scale (if customizable)
• ✅ Border radius defaults

What to Keep in Tailwind:

• ✅ Layout utilities (flex, grid)
• ✅ Responsive breakpoints
• ✅ Static design tokens
• ✅ Component structures

Bootstrap Integration

Bootstrap provides a comprehensive component library. Theme Settings manages settings while Bootstrap handles the UI framework.

Quick Integration

Step 1: Add Bootstrap to Theme

// functions.php
function mytheme_enqueue_bootstrap() {
    // Bootstrap CSS
    wp_enqueue_style(
        'bootstrap',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
        [],
        '5.3.0'
    );
    
    // Bootstrap JS
    wp_enqueue_script(
        'bootstrap',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',
        ['jquery'],
        '5.3.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_bootstrap');

Step 2: Override Bootstrap Variables

// functions.php
function mytheme_bootstrap_customization() {
    $primary = ts_get_option('primary_color', '#0d6efd');
    $secondary = ts_get_option('secondary_color', '#6c757d');
    $font_family = ts_get_option('body_font', 'Arial, sans-serif');
    ?>
    <style id="bootstrap-theme-settings">
        :root {
            --bs-primary: <?php echo esc_attr($primary); ?>;
            --bs-secondary: <?php echo esc_attr($secondary); ?>;
            --bs-body-font-family: <?php echo esc_attr($font_family); ?>;
        }
    </style>
    <?php
}
add_action('wp_head', 'mytheme_bootstrap_customization', 5);

Step 3: Use Bootstrap Components with Theme Settings

<!-- header.php -->
<nav class="navbar navbar-expand-lg" style="background-color: var(--bs-primary);">
    <div class="container">
        <?php
        $logo = ts_get_option('site_logo');
        if ($logo) :
        ?>
            <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
                <img src="<?php echo esc_url($logo); ?>" alt="Logo" height="40">
            </a>
        <?php endif; ?>
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse">
            <?php
            wp_nav_menu([
                'theme_location' => 'primary',
                'menu_class'     => 'navbar-nav ms-auto',
                'container'      => false,
            ]);
            ?>
        </div>
    </div>
</nav>

Step 4: Configure Theme Settings for Bootstrap

// settings-config.php
'bootstrap_colors' => [
    'title' => 'Bootstrap Colors',
    'fields' => [
        'primary_color' => [
            'type'    => 'color',
            'label'   => 'Primary Color',
            'default' => '#0d6efd',
        ],
        'secondary_color' => [
            'type'    => 'color',
            'label'   => 'Secondary Color',
            'default' => '#6c757d',
        ],
    ],
],

Bootstrap + Theme Settings Strategy

Theme Settings Controls:

• Brand colors (BS variables)
• Typography choices
• Container widths
• Component toggles (enable/disable features)

Bootstrap Handles:

• Layout grid
• Component markup
• Responsive utilities
• JavaScript behaviors

Bulma Integration

Bulma is a modern CSS framework based on Flexbox. Integration is similar to Bootstrap but uses Bulma’s variable system.

Quick Integration

Step 1: Add Bulma

// functions.php
function mytheme_enqueue_bulma() {
    wp_enqueue_style(
        'bulma',
        'https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css',
        [],
        '0.9.4'
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_bulma');

Step 2: Customize Bulma Variables

// functions.php
function mytheme_bulma_customization() {
    $primary = ts_get_option('primary_color', '#00d1b2');
    $family = ts_get_option('body_font', 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif');
    ?>
    <style id="bulma-theme-settings">
        :root {
            --bulma-primary: <?php echo esc_attr($primary); ?>;
            --bulma-family-primary: <?php echo esc_attr($family); ?>;
        }
        
        /* Override Bulma classes */
        .has-background-primary {
            background-color: var(--bulma-primary) !important;
        }
        
        .has-text-primary {
            color: var(--bulma-primary) !important;
        }
        
        body {
            font-family: var(--bulma-family-primary);
        }
    </style>
    <?php
}
add_action('wp_head', 'mytheme_bulma_customization', 5);

Step 3: Use Bulma Components

<!-- header.php with Bulma -->
<nav class="navbar has-background-primary">
    <div class="container">
        <div class="navbar-brand">
            <?php
            $logo = ts_get_option('site_logo');
            if ($logo) :
            ?>
                <a class="navbar-item" href="<?php echo esc_url(home_url('/')); ?>">
                    <img src="<?php echo esc_url($logo); ?>" alt="Logo">
                </a>
            <?php endif; ?>
            
            <a class="navbar-burger" data-target="navMenu">
                <span></span>
                <span></span>
                <span></span>
            </a>
        </div>
        
        <div id="navMenu" class="navbar-menu">
            <div class="navbar-end">
                <?php
                wp_nav_menu([
                    'theme_location' => 'primary',
                    'container'      => false,
                    'menu_class'     => '',
                    'items_wrap'     => '%3$s',
                ]);
                ?>
            </div>
        </div>
    </div>
</nav>

Bulma Best Practices

Use Theme Settings for:

• Primary color customization
• Typography selection
• Layout width settings
• Section spacing

Use Bulma for:

• Component structure (navbar, hero, cards)
• Grid system (columns)
• Helper classes (spacing, typography)
• Responsive utilities

Underscores (_s) Integration

Underscores is WordPress’s official starter theme. It’s a minimal foundation, making Theme Settings integration particularly clean.

Quick Integration

Step 1: Download Underscores Visit underscores.me and generate your starter theme.

Step 2: Add Theme Settings

# Copy themesettings folder to your _s theme
your-theme/
├── themesettings/
├── inc/
├── template-parts/
└── functions.php

Step 3: Initialize Theme Settings

// functions.php (add after existing code)

/**
 * Theme Settings Integration
 */
require_once get_template_directory() . '/themesettings/theme-settings.php';

Step 4: Configure Settings for Underscores

// themesettings/settings-config.php
return [
    'layout' => [
        'title' => 'Layout Settings',
        'sections' => [
            'general' => [
                'fields' => [
                    'container_width' => [
                        'type'    => 'number',
                        'label'   => 'Container Width',
                        'default' => 1200,
                        'unit'    => 'px',
                    ],
                    'sidebar_position' => [
                        'type'    => 'select',
                        'label'   => 'Sidebar Position',
                        'options' => [
                            'left'  => 'Left',
                            'right' => 'Right',
                            'none'  => 'No Sidebar',
                        ],
                        'default' => 'right',
                    ],
                ],
            ],
        ],
    ],
    'typography' => [
        'title' => 'Typography',
        'sections' => [
            'fonts' => [
                'fields' => [
                    'body_font' => [
                        'type'    => 'typography',
                        'label'   => 'Body Font',
                        'default' => 'Open Sans',
                    ],
                    'heading_font' => [
                        'type'    => 'typography',
                        'label'   => 'Heading Font',
                        'default' => 'Montserrat',
                    ],
                ],
            ],
        ],
    ],
];

Step 5: Modify Underscores Templates

// header.php - Replace default logo
<?php
$logo = ts_get_option('site_logo');
if ($logo) :
?>
    <a href="<?php echo esc_url(home_url('/')); ?>">
        <img src="<?php echo esc_url($logo); ?>" alt="<?php bloginfo('name'); ?>">
    </a>
<?php else : ?>
    <h1 class="site-title">
        <a href="<?php echo esc_url(home_url('/')); ?>">
            <?php bloginfo('name'); ?>
        </a>
    </h1>
<?php endif; ?>

Step 6: Add Dynamic Styles

// functions.php
function underscores_theme_settings_css() {
    $body_font = ts_get_option('body_font', 'Open Sans');
    $heading_font = ts_get_option('heading_font', 'Montserrat');
    $container_width = ts_get_option('container_width', 1200);
    $primary_color = ts_get_option('primary_color', '#007bff');
    ?>
    <style id="underscores-theme-settings">
        body {
            font-family: '<?php echo esc_attr($body_font); ?>', sans-serif;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: '<?php echo esc_attr($heading_font); ?>', sans-serif;
        }
        
        .site-content {
            max-width: <?php echo esc_attr($container_width); ?>px;
        }
        
        a {
            color: <?php echo esc_attr($primary_color); ?>;
        }
    </style>
    <?php
}
add_action('wp_head', 'underscores_theme_settings_css');

Step 7: Enqueue Google Fonts

// functions.php
function underscores_enqueue_google_fonts() {
    $body_font = ts_get_option('body_font', 'Open Sans');
    $heading_font = ts_get_option('heading_font', 'Montserrat');
    
    $fonts = [];
    if ($body_font) $fonts[] = $body_font;
    if ($heading_font && $heading_font !== $body_font) $fonts[] = $heading_font;
    
    if (!empty($fonts)) {
        $font_url = 'https://fonts.googleapis.com/css2?family=' . 
                    implode('&family=', array_map('urlencode', $fonts)) . 
                    '&display=swap';
        
        wp_enqueue_style('google-fonts', $font_url, [], null);
    }
}
add_action('wp_enqueue_scripts', 'underscores_enqueue_google_fonts');

Underscores + Theme Settings Workflow

Perfect Division:

• Underscores: Base structure, functions, WordPress integration
• Theme Settings: User-configurable options, admin interface
• Your CSS: Custom styling on top of Underscores base

This combination gives you a solid foundation with professional customization.

Multi-Framework Setup

You can even combine multiple frameworks for different purposes.

Example: Tailwind + Bootstrap Icons

// functions.php
function mytheme_enqueue_multi_framework() {
    // Tailwind for utility classes
    wp_enqueue_style(
        'tailwind',
        get_template_directory_uri() . '/assets/css/tailwind.css',
        [],
        '1.0.0'
    );
    
    // Bootstrap Icons for icon library
    wp_enqueue_style(
        'bootstrap-icons',
        'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css',
        [],
        '1.11.3'
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_multi_framework');

Use in Templates:

<div class="flex items-center gap-4">
    <i class="bi bi-envelope text-2xl"></i>
    <span class="text-base font-medium">
        <?php echo ts_get_option('contact_email'); ?>
    </span>
</div>

Integration Checklist

For Any Framework:

• ✅ Install Theme Settings in theme directory
• ✅ Require in functions.php
• ✅ Configure settings in settings-config.php
• ✅ Add framework CSS/JS files
• ✅ Create dynamic CSS function
• ✅ Output CSS variables in wp_head
• ✅ Use ts_get_option() in templates
• ✅ Test all settings work correctly

Framework-Specific:

• ✅ Tailwind: Extend config with CSS variables
• ✅ Bootstrap: Override BS variables
• ✅ Bulma: Customize Bulma classes
• ✅ Underscores: Modify template parts

Best Practices

General Integration Rules:

1. Separate Concerns

   • Framework: Static structure and utilities
   • Theme Settings: Dynamic user preferences

2. Use CSS Variables

   • Bridge between Theme Settings and frameworks
   • Easy to update without recompiling

3. Avoid Conflicts

   • Don’t override framework core
   • Use CSS specificity carefully
   • Namespace custom classes

4. Performance

   • Minify framework CSS
   • Load only needed components
   • Cache dynamic CSS output

5. Maintainability

   • Document integration points
   • Keep framework updates separate
   • Version control your customizations

Conclusion

Theme Settings works seamlessly with WordPress, Tailwind CSS, Bootstrap, Bulma, Underscores, and virtually any other modern framework. The framework-agnostic design ensures you can use the tools you prefer without limitations.

Key Advantages:

• ✅ No conflicts - Clean integration with any framework
• ✅ CSS Variables - Easy bridge for dynamic values
• ✅ Flexibility - Use multiple frameworks together
• ✅ Simplicity - Minimal setup required
• ✅ Best Practices - Proper separation of concerns

Choose Your Stack:

• Minimalist: Underscores + Theme Settings
• Utility-First: Tailwind + Theme Settings
• Component-Rich: Bootstrap + Theme Settings
• Modern CSS: Bulma + Theme Settings
• Hybrid: Mix frameworks as needed

The beauty of Theme Settings is that it adapts to your workflow, not the other way around. Pick your favorite framework, add Theme Settings, and build professional WordPress themes faster.

“Great tools work together seamlessly—
Theme Settings integrates with frameworks you already love.”

---

Ready to integrate?

1. Choose your preferred framework
2. Follow the quick setup for that framework
3. Configure Theme Settings fields
4. Start building with dynamic options
5. Enjoy the best of both worlds