sleek logo sleek ai/ logo sleek motion/ logo sleek pixel/ logo sleek view/ logo

White Label

White-labeling allows you to rebrand the SleekWP plugins, presenting them as your own to your clients or users. This is perfect for agencies and developers looking to offer a seamlessly integrated and branded experience within the WordPress admin area.

How It Works

The white-labeling functionality is controlled via a WordPress filter: sleekwp/whiteLabel. By adding this filter, you can provide an array of settings that define your custom branding, including names, logos, and even admin menu icons.

Implementing White-Labeling

To white-label the SleekWP plugins, you'll add a filter to your theme's functions.php file or a custom plugin. This filter should return an array with your desired branding configuration.

            add_filter( "sleekwp/whiteLabel", function () {
        return [
            "enabled" => true,
            "app"     => [
                "type"   => "total", // Can be "total" or "parts"
                "colors" => [
                    "primary" => "217 100% 47.6%", // Example HSL for primary color accent
                    // Add other color overrides here, e.g., "background" => "0 0% 98%"
                ],
                "logo"   => [
                    "total" => [ // Used when type is "total"
                        "logoUrl" => "https://your-brand.com/images/logo-full.svg",
                    ],
                    "parts" => [ // Used when type is "parts"
                        "logoUrl" => "https://your-brand.com/images/logo-square.svg",
                    ],
                ],
                "names"  => [
                    "total" => [ // Used when type is "total"
                        "plugins" => [
                            "ai"     => "Your AI Name",
                            "motion" => "Your Animation Tool",
                            "pixel"  => "Your Design Suite",
                            "view"   => "Your Data Manager",
                        ],
                    ],
                    "parts" => [ // Used when type is "parts"
                        "prefix"  => "YourBrand", // e.g., "YourBrandAI", "YourBrandAnimate"
                        "plugins" => [
                            "ai"     => "AI",
                            "motion" => "Animate",
                            "pixel"  => "Design",
                            "view"   => "Layers",
                        ],
                    ],
                ],
            ],
            "wp"      => [
                "admin" => [
                    "menu" => [
                        "parent"  => [
                            "text" => "Your Brand WP", // Main parent menu item text
                            "icon" => "Cjxzdmcgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSJhcHBzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibXVsdGl0YXNrYWkvbG9nby1ncmF5IiBmaWxsPSIjQTdBQUFEIj4KICAgICAgICAgICAgPHBhdGggZD0iTTM2NS4yMTc1NzIsNy4yNTQ2NzMxMWUtMTUgQzQxNi4yNTcwMiwtNC4yMTUxNzRlLTE1IDQzNC43NjUxNTcsNS4zMTQyNjYyNCA0NTMuNDI0NDE3LDE1LjI5MzM0NzMgQzQ3Mi4wODM2NzYsMjUuMjcyNDI4MyA0ODYuNzI3NTcyLDM5LjkxNjMyNDIgNDk2LjcwNjY1Myw1OC41NzU1ODM1IEM1MDYuNjg1NzM0LDc3LjIzNDg0MjcgNTEyLDk1Ljc0Mjk3OTggNTEyLDE0Ni43ODI0MjggTDUxMiwzNjUuMjE3NTcyIEM1MTIsNDE2LjI1NzAyIDUwNi42ODU3MzQsNDM0Ljc2NTE1NyA0OTYuNzA2NjUzLDQ1My40MjQ0MTcgQzQ4Ni43Mjc1NzIsNDcyLjA4MzY3NiA0NzIuMDgzNjc2LDQ4Ni43Mjc1NzIgNDUzLjQyNDQxNyw0OTYuNzA2NjUzIEM0MzQuNzY1MTU3LDUwNi42ODU3MzQgNDE2LjI1NzAyLDUxMiAzNjUuMjE3NTcyLDUxMiBMMTQ2Ljc4MjQyOCw1MTIgQzk1Ljc0Mjk3OTgsNTEyIDc3LjIzNDg0MjcsNTA2LjY4NTczNCA1OC41NzU1ODM1LDQ5Ni43MDY2NTMgQzM5LjkxNjMyNDIsNDg2LjcyNzU3MiAyNS4yNzI0MjgzLDQ3Mi4wODM2NzYgMTUuMjkzMzQ3Myw0NTMuNDI0NDE3IEM1LjMxNDI2NjI0LDQzNC43NjUxNTcgMCw0MTYuMjU3MDIgMCwzNjUuMjE3NTcyIEw3LjI1NDY3MzExZS0xNSwxNDYuNzgyNDI4IEMtNC4yMTUxNzRlLTE1LDk1Ljc0Mjk3OTggNS4zMTQyNjYyNCw3Ny4yMzQ4NDI3IDE1LjI5MzM0NzMsNTguNTc1NTgzNSBDMjUuMjcyNDI4MywzOS45MTYzMjQyIDM5LjkxNjMyNDIsMjUuMjcyNDI4MyA1OC41NzU1ODM1LDE1LjI5MzM0NzMgQzc3LjIzNDg0MjcsNS4zMTQyNjYyNCA5NS43NDI5Nzk4LDQuMjE1MTc0ZS0xNSAxNDYuNzgyNDI4LC03LjI1NDY3MzExZS0xNSBMMzY1LjIxNzU3Miw3LjI1NDY3MzExZS0xNSBaIE0xODUuODQxMDQ4LDEyMSBMMTA1LDEyMSBMMTA1LDM5MSBMMTY4LjU2NTA2NiwzOTEgTDE2OC41NjUwNjYsMjI0LjIyNzUzOSBMMTcwLjgwNjk4NywyMjQuMjI3NTM5IEwyMzUuNjkwODMsMzg5LjI4NjEzMyBMMjc2LjMwOTE3LDM4OS4yODYxMzMgTDM0MS4xOTMwMTMsMjI1LjE1MDM5MSBMMzQzLjQzNDkzNCwyMjUuMTUwMzkxIEwzNDMuNDM0OTM0LDM5MSBMNDA3LDM5MSBMNDA3LDEyMSBMMzI2LjE1ODk1MiwxMjEgTDI1Ny41ODI1MzMsMjg4LjE2Nzk2OSBMMjU0LjQxNzQ2NywyODguMTY3OTY5IEwxODUuODQxMDQ4LDEyMSBaIiBpZD0iQ29tYmluZWQtU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==", // Base64 encoded SVG string
                        ],
                        "plugins" => [ // Names for plugin sub-menu items if "type" is "parts" or if parent menu is different
                            "ai"     => "AI Tools",
                            "motion" => "Animation Settings",
                            "pixel"  => "Design Hub",
                            "view"   => "Data Views",
                        ],
                    ],
                ],
            ],
        ];
    } );
  
                    

                Copy

Configuration Details

Root Level

  • enabled (bool): Set to true to activate white-labeling.

App Configuration

This section controls the branding within the plugin interfaces themselves.

  • type (string): Determines the branding strategy.
    • "total": Uses a single comprehensive logo (app.logo.total.logoUrl) and full names for each plugin (app.names.total.plugins). This is suitable if you want to completely rebrand the suite under one umbrella.
    • "parts": Uses a smaller, often square logo (app.logo.parts.logoUrl) combined with a prefix (app.names.parts.prefix) and individual plugin names (app.names.parts.plugins). This creates a consistent but modular branding, e.g., <Logo> <Prefix><PluginName> (like "YourBrandAI").
  • colors (array): An associative array to override default UI colors. See the "Customizing Colors" section below for details.
  • logo (array):
    • total.logoUrl (string): URL to your full brand logo, used when app.type is "total".
    • parts.logoUrl (string): URL to your compact/square brand logo, used when app.type is "parts".
  • names (array):
    • total.plugins (array): Associative array mapping SleekWP plugin slugs (ai, motion, pixel, view) to your desired full names when app.type is "total".
    • parts.prefix (string): A prefix string used before each plugin name when app.type is "parts".
    • parts.plugins (array): Associative array mapping SleekWP plugin slugs to your desired individual names when app.type is "parts". These names will be appended to the prefix.

Customizing Colors

The app.colors array in your filter allows you to override the default color scheme used by SleekWP plugin interfaces. These keys directly map to CSS custom properties (variables) that define the look and feel of the plugins.

When you specify a color in the filter, you only need to use the part of the CSS variable name that comes after --sleek-. For example, to change the primary color (--sleek-primary), you would use the key primary in your colors array.

Most color values should be provided as HSL strings (e.g., "240 6% 10%").

Here are the available CSS variables you can customize. For each, use the key in the colors array that matches the name after --sleek-.

            --sleek-total: 0 100% 0%;
    --sleek-background: 0 0% 100%;
    --sleek-background-reverse: 0 0% 100%;
    --sleek-foreground: 240 10% 4%;
    --sleek-background-secondary: 240 5% 97%;
    --sleek-foreground-secondary: 240 5% 96%;
    --sleek-card: 0 0% 100%;
    --sleek-card-foreground: 240 10% 4%;
    --sleek-primary: 240 6% 10%;
    --sleek-primary-foreground: 0 0% 98%;
    --sleek-secondary: 240 5% 96%;
    --sleek-secondary-foreground: 240 6% 10%;
    --sleek-muted: 240 5% 96%;
    --sleek-muted-foreground: 240 4% 36%;
    --sleek-accent: 240 5% 96%;
    --sleek-accent-foreground: 240 6% 10%;
    --sleek-success: 160 84% 39%;
    --sleek-success-foreground: 0 0% 98%;
    --sleek-destructive: 0 84% 60%;
    --sleek-destructive-foreground: 0 0% 98%;
    --sleek-border: 240 6% 90%;
    --sleek-border-secondary: 240 6% 90%;
    --sleek-ring: 240 10% 4%;
    --sleek-ring-offset: var(--sleek-background);
    --sleek-textarea: 240 6% 100%;
    --sleek-textarea-alt: 240 6% 92%;
    --sleek-radius: 0.5rem;
    --sleek-scrollbar: 240 6% 72%;

                    

                Copy

Note for ring-offset: If customizing through the filter, provide an HSL color string (e.g., "0 0% 100%"). This replaces the default CSS behavior which uses var(--sleek-background). Note for radius: This expects a CSS size string, not an HSL color (e.g., "0.5rem", "8px").

Example usage in the filter:

            // ... inside your add_filter callback ...
    "app"     => [
        // ... other app settings like type, logo, names ...
        "colors" => [
            "primary"    => "217 100% 47.6%", // Overrides --sleek-primary
            "background" => "0 0% 98%",       // Overrides --sleek-background
            "foreground" => "240 10% 10%",   // Overrides --sleek-foreground
            "radius"     => "0.75rem"        // Overrides --sleek-radius
            // ... add other color/value keys as needed
        ],
    ],
    // ...
  
                    

                Copy

WP Configuration

This section controls how the plugins are presented within the WordPress admin area.

  • admin.menu (array):
    • parent.text (string): The text for the main parent menu item in the WordPress admin sidebar (e.g., "Your Brand Tools").
    • parent.icon (string): A base64 encoded SVG string for the parent menu icon. You can use an online converter to get this from your SVG file.
    • plugins (array): Associative array mapping SleekWP plugin slugs to the names you want displayed for their respective sub-menu items. These names appear under the parent menu item.

By configuring these options, you can effectively transform the appearance of SleekWP plugins to align with your brand identity, providing a cohesive experience for your users.