Create a polished brand assets page in WordPress with reusable color palettes, downloadable files, and a logo popover that helps visitors find the right brand resources fast.
Brand Assets is a block-based WordPress plugin for teams that need a simple way to publish logos, colors, typography guidance, and downloadable brand files on their own site.
Most teams keep brand files scattered across PDFs, cloud folders, and outdated guideline pages. Brand Assets helps you turn that mess into a clear, on-site brand hub your team, clients, partners, and press contacts can actually use.
Use it to:
- publish a public or internal brand guidelines page
- show approved brand colors with optional CMYK values
- add downloadable logo and asset links directly inside content
- guide visitors from your site logo to the correct brand assets page
- launch faster with a ready-made block pattern
Show brand colors in clean swatches with controls for:
- swatch width and height
- gaps between colors
- border width, radius, and color
- optional CMYK values for print workflows
Add a contextual popover to your site logo so visitors can quickly jump to your brand assets page.
You can configure:
- target page
- heading and supporting text
- link text
- CSS selector for the logo element
- CSS loading mode for styling control
Add the ba-download class to a list item and Brand Assets automatically adds the download attribute to links inside that item. This is useful for logo packs, PDFs, icon files, and brand guideline downloads.
Start with a prebuilt pattern that includes:
- logo and icon sections
- downloadable asset links
- a sample brand color section
- typography examples
- product teams publishing brand kits
- agencies handing off brand files to clients
- companies that want a public media kit page
- websites that need a simple brand guidelines page in Gutenberg
- Install and activate Brand Assets.
- Create or open the page that will hold your brand guidelines.
- Insert the Brand Assets pattern or add the Color Palette - Brand Assets block.
- Add your colors, logo downloads, and typography guidance.
- In Settings → Brand Assets, connect your site logo to the page with the popover settings.
- Go to Plugins → Add New.
- Search for Brand Assets.
- Click Install Now and then Activate.
- Download the plugin files.
- Upload them to
/wp-content/plugins/brand-assets/. - Activate the plugin through the Plugins screen in WordPress.
- Open the block editor.
- Search for Color Palette - Brand Assets.
- Add your hex color values.
- Adjust spacing, sizing, borders, and optional CMYK output in the block sidebar.
- Go to Settings → Brand Assets.
- Select the page that should receive logo-click visitors.
- Customize the heading, supporting text, and link label.
- Set the logo CSS selector if you are not using the default site logo block.
- Save your changes.
<ul>
<li class="ba-download">
<a href="https://example.com/files/brand-guidelines.pdf">Brand Guidelines (PDF)</a>
</li>
<li class="ba-download">
<a href="https://example.com/files/logo-pack.zip">Logo Pack (ZIP)</a>
</li>
</ul>Links inside list items with the ba-download class will automatically receive the download attribute.
| Setting | What it does | Default |
|---|---|---|
| Brand Assets Page | Selects the page the popover should link to | None |
| Popover Heading | Main popover heading | Looking for our logo? |
| Popover Text Line 1 | First supporting line | You're in the right spot! |
| Popover Text Line 2 | Text before the link | Check out our |
| Link Text | Link label shown inside the popover | brand assets |
| Logo Selector | CSS selector used to attach the popover | .wp-block-site-logo |
| CSS Loading Mode | Controls how popover CSS is loaded | Load the default CSS |
The settings page also lets you adjust:
- background, text, link, border, and close button colors
- border width and radius
- padding and max width
- font size
These are implemented with CSS custom properties, keeping customization flexible while staying WordPress.org-friendly.
Filter the path to the frontend CSS file used for the logo popover.
add_filter( 'brand_assets_frontend_css_path', function( $path ) {
return get_stylesheet_directory() . '/custom-brand-assets.css';
} );Filter the path to the block pattern file used for the brand page template.
add_filter( 'brand_assets_pattern_file_path', function( $path ) {
return get_template_directory() . '/custom-brand-pattern.php';
} );- PHP 7.4+
- Node.js 14+
- npm
- a local WordPress development environment
git clone https://github.com/ProgressPlanner/brand-assets.git
cd brand-assets
npm installnpm start # Start development build
npm run build # Build for production
npm run lint:js # Lint JavaScript
npm run lint:css # Lint CSS
npm run lint:php # Run PHP_CodeSniffer
npm run lint:php:fix # Auto-fix PHP coding standards issues
npm run lint:php:compatibility # Check PHP compatibility
composer phpstan # Run PHPStan- Plugin page: https://wordpress.org/plugins/brand-assets/
- Documentation: https://progressplanner.com/plugins/brand-assets/
- Issues: https://github.com/ProgressPlanner/brand-assets/issues
- Team Progress Planner: https://progressplanner.com/
Contributions are welcome. Please open an issue or pull request if you want to improve the plugin, documentation, or developer experience.
GPL-2.0-or-later. See LICENSE for details.