Logo Showcase documentation

Overview

Everything you need to set up, place and customize logo sliders, grids and more. Version 5.0.0.

Logo Showcase turns a list of logos into a responsive slider or grid you can place anywhere on your site. You build each showcase in a dashboard with a live preview, then add it to a page with a block, an Elementor widget or a shortcode.

The plugin comes in two builds. The Free build is on WordPress.org. The Pro build is a separate download that contains everything in Free plus extra layouts and options. Throughout this guide, Free marks features in both builds and Pro marks features that need the Pro build. Use the switch at the top of the sidebar to hide the parts you don't need.

Free and Pro at a glance

Where to go next

Requirements and installation

What your site needs and how to install either build.

Requirements

• WordPress 6.3 or newer (the admin uses the React that ships with WordPress).
• PHP 7.4 or newer. PHP 8.x is supported.
• A modern browser for the admin: current Chrome, Edge, Firefox or Safari.
• The WordPress REST API must be reachable for logged-in users. Some security plugins block it; see Troubleshooting.

Install the Free build Free

1. Open the Plugins screenGo to Plugins → Add New Plugin and search for Logo Showcase.
2. Install and activateClick Install Now, then Activate.
3. Find the menuA new Logo Showcase item appears in the admin sidebar. Click it to open the dashboard.

You can also upload the zip: Plugins → Add New Plugin → Upload Plugin, choose the zip file, install and activate.

Install the Pro build Pro

The Pro build is a complete plugin, not an add-on. It replaces the Free plugin and keeps all your showcases.

1. Download the Pro zipUse the download link in your purchase email or your account page.
2. Upload itGo to Plugins → Add New Plugin → Upload Plugin and choose the Pro zip.
3. Replace the Free pluginWordPress shows that the plugin is already installed. Click Replace current with uploaded. If you prefer, deactivate and delete the Free plugin first. Your showcases are stored in the database, so they are not lost.
4. ActivateActivate the plugin and enter your license key if you are asked for one. The dashboard shows a Pro badge when the Pro features are unlocked.

Updating

Update from the Plugins screen as usual. Back up your site first when moving between major versions. The Free build updates from WordPress.org; the Pro build updates from your account.

Who can use it

Quick start

Build a showcase and put it on a page.

1. Create a showcaseOpen Logo Showcase in the admin menu and click New showcase, or pick a starter template. You land in the editor.
2. Name itType a name at the top left, for example Homepage clients. Visitors don't see this name; it helps you find the showcase and is used as the accessible label.
3. Add logosIn the Logos tab click Add logos to choose images from the Media Library, or Upload files to upload many images at once. You can also drag image files straight onto the panel.
4. Check the previewThe live preview on the right updates as you work. Use Desktop, Tablet and Mobile to check each size.
5. Adjust the lookUse the tabs on the left: Layout, Style, Slider (or Grid), Tooltips, Links and Advanced.
6. SaveClick Save changes (or press Ctrl+S / ⌘+S). Make sure the status at the top says Published.
7. Place itClick Copy next to the shortcode at the top, then paste it into a page. Or use the Logo Showcase block or the Elementor widget. See Showing a showcase.

The dashboard

Your list of showcases, starter templates and shortcuts.

Open Logo Showcase in the admin menu. The top bar has four pages: Showcases, Templates, Settings and Help. The New showcase button is always at the top right.

Showcase cards

• Search filters the cards by name as you type.
• Layout filter (All, Slider, Grid and others) narrows the list by layout.
• Copy copies the shortcode, for example [logo_showcase id="21"].
• The ⋯ menu on each card has Edit, Duplicate, Publish / Unpublish and Delete.
• A Draft badge means the showcase is unpublished and hidden from visitors.

Duplicate, unpublish and delete

• Duplicate makes a copy named "… (copy)" with the same settings and logos. It is the quickest way to make a variation.
• Unpublish turns the showcase into a draft. Pages that use its shortcode show nothing to visitors. Logged-in editors see a hidden note in the page source.
• Delete moves the showcase to the WordPress trash after you confirm. Pages that use its shortcode stop showing it. You can restore it from the trash.

Starter templates

The templates section lets you start with a ready-made look. See Templates.

The editor

A tour of the screen where you build a showcase.

The top bar

• ‹ Showcases returns to the dashboard. If you have unsaved changes you are asked to confirm.
• Name of the showcase.
• Published / Draft switch. Drafts are hidden from visitors.
• Unsaved changes appears when something has changed since the last save. The browser also warns you if you try to close the tab.
• Shortcode with a Copy button.
• Save changes saves everything. Shortcut: Ctrl+S on Windows and Linux, ⌘+S on Mac.

The left tabs

Each tab groups related settings. Some tabs only appear for the layout they belong to.

When you change the layout the tabs change with it. Choosing Ticker hides the Slider tab and shows the Ticker tab.

Live preview

The preview on the right is rendered by the same code visitors see, inside a frame. It updates a moment after every change, including logo titles, descriptions and links. Use Desktop, Tablet and Mobile to see how it behaves at each width. The device buttons also switch which screen size the "per screen size" settings edit.

Right-to-left sites

Set Layout → Text direction to Automatic (follow site language), Right to left (RTL) or Left to right (LTR). Automatic follows the language of the current page, so it works on Arabic, Hebrew, Persian and Urdu sites, including multilingual sites. In RTL the slider starts from the right, the arrows swap sides, dragging and Next/Previous follow the new direction, and text alignment is mirrored.

Settings that depend on other settings

Options that don't apply are hidden. For example the arrow color only appears while Show arrows is on, and the delay only appears while Autoplay is on.

Locked Pro options

In the Free build, Pro options show a Pro label. Clicking one shows a message instead of changing the setting. Values that need Pro are never saved in the Free build.

Adding and managing logos

Upload, order and describe the logos in a showcase. There is no limit on how many you can add.

Three ways to add logos

1. Add logos opens the WordPress Media Library. Select as many images as you like and click Add to showcase.
2. Upload files opens your computer's file picker. Choose several images; they upload to the Media Library and are added in one go.
3. Drag and drop. Drag image files from your computer onto the Logos panel. The panel highlights when you can drop.

Up to three files upload at the same time. If one file fails (for example a file type your site doesn't allow), the rest still upload and the failed file shows its error. Only image files are accepted. New logos get their file name as the title, which you can change.

Reordering

Drag a card to a new position, or select a card and use the ‹ and › buttons. Dropping a card in the empty space after the last card moves it to the end. If Order is set to Random or A to Z, your manual order is still saved but the visitor sees the other order.

Editing one logo

Click a logo card to open Edit logo below the list.

Use Replace image to swap the picture and keep its title, link and description. Use Remove to take the logo out of this showcase (the image stays in your Media Library).

Image tips

• Use transparent PNG or SVG-style logos with similar proportions for the neatest result.
• Upload each logo at about twice the size it will display, so it stays sharp on high-density screens.
• Pick the loaded size under Advanced → Image size. See Advanced.
• SVG uploads need to be enabled on your site by a security-aware plugin, because WordPress blocks them by default.

Choosing a layout

Open the Layout tab and click a layout card. Pro layouts show a Pro label in the Free build.

Switching layout never deletes logos. Settings for the layout you leave are kept, so you can switch back.

Slider Free

Logos sit in a row and move automatically or on demand.

• Autoplay moves the slider on a timer. A pause button appears so visitors can stop it. Visitors who set their device to reduce motion don't get autoplay.
• Loop keeps moving forever. Turn it off to stop at the first and last logo.
• Logos visible at once is set separately for desktop, tablet and mobile.
• Pro Rows stacks logos inside each slide, 1 to 4 rows. With 2 rows, each slide holds two logos on top of each other. The Free build shows a single row.
• Drag and swipe: with a mouse, press and drag the logos sideways; on a touch screen, swipe. The logos follow your finger or pointer and snap to the nearest slide when you let go. Dragging a little (less than about a fifth of a logo) springs back.
• Arrows and dots are in the same Slider tab. Arrows can be set to appear only on hover.
• Keyboard: arrows, dots and the pause button are buttons you can reach with Tab.
• If there are no more logos than fit on screen, the slider doesn't move and hides its arrows.
• Pro Center mode highlights the middle logo and dims the others. Use an odd number of visible logos.

Grid Free

Logos fill a grid of equal columns. Set the number of columns per screen size and the gap between logos in the Grid tab.

List Pro

Each logo has its own row with the logo card, the title in bold and the description. The description is always shown in this layout; the Show logo descriptions switch isn't needed.

In the Layout tab, List style → Logo position chooses: Logo left (logo, then text), Logo right (text, then logo) or Logo center (logo on top with the text centered below). In right-to-left sites left and right are mirrored.

Columns (same group) shows the list in 1 column or 2 columns. Two columns automatically become one on screens narrower than 678px.

Table Pro

A real HTML table with the columns Logo, Name and About. Good for accessibility and for long partner lists.

Ticker Pro

A continuous marquee. Choose Ticker in the Layout tab, then open the Ticker tab.

• Scrolls: Sideways makes rows that move left or right. Up or down makes columns that move vertically, like a testimonial wall. In that mode set a Height.
• Speed is in pixels per second, so the ticker moves at the same speed whatever the number of logos.
• Rows is the number of rows. When scrolling up or down it is the number of columns. Logos are shared out between the rows one by one.
• Cards visible (sideways only) decides how wide each card is: 3 on desktop 980px and wider, 2 on tablet 678px and wider and 1 on mobile by default.
• Alternate direction makes neighbouring rows or columns move in opposite directions.
• Pause on hover stops it while the pointer is over it. Fade the edges softens the start and end.
• If a row has too few logos to fill the width, the ticker repeats them so there is never a gap.
• Visitors who reduce motion get a static, scrollable strip instead of animation.

Filter grid Pro

A grid with a row of buttons above it. Visitors click a category to see only the logos in it.

1. Choose the layoutIn the Layout tab pick Filter grid.
2. Open the Logos tabA blue help box explains the filter and tells you how many logos still have no category.
3. Give each logo categoriesClick a logo. In the Categories box type a name such as Tech and press Enter. Or click an existing category under Add existing. Click a selected category to remove it.
4. Check the previewButtons appear for each category, plus an All button.

• A logo can be in several categories and then shows under each of them.
• Logos with no category only show under All.
• If no logo has a category, no buttons are shown and it looks like a normal grid.
• In the Layout tab, the Category filter group sets: Label of the first filter (default All), Filter position (Left, Center, Right), Filter shape (Rounded, Pill, Square), and the colors: text, background, active text and active background (the active color is also the button border).
• Columns and gap come from the Grid tab.
• Category names are matched ignoring upper and lower case and spaces. Retail and retail are the same category.

Sponsor tiers Pro

Groups logos under headings, highest tier first. Set the tier names in Pro options → Tier names, separated by commas, for example Gold, Silver, Partner. Then give each logo a Tier with the same name in its edit box. Logos with no tier, or a tier that isn't in the list of names, are placed in the last group or in a group of their own. Empty tiers are not shown. Columns and gap come from the Grid tab.

Settings reference

Every option in the editor, what it does, the values it accepts and its default. These tables are generated from the plugin itself.

The Plan column tells you whether an option is in Free, needs Pro, or is free with some values reserved for Pro (shown as yellow chips in Values). In the Free build, picking a Pro value shows a message and the value is not saved.

Layout tab

Choose the layout, the order of logos and how many to show.

Style tab

How each logo card looks. Applies to every layout.

Titles and descriptions each have their own group of options inside this tab. Descriptions are hidden by default: turn on Show logo descriptions to display the description you wrote for each logo.

Slider tab

Movement, size, arrows and dots. Only shown for the Slider layout.

Arrows and dots used to be a separate tab. They are now groups named Arrows and Dots inside this tab.

Grid tab

Columns and spacing. Shown for the Grid and Filter grid layouts.

Ticker tab

Only shown for the Ticker layout.

Tooltips tab

The small label that appears over a logo on hover or keyboard focus.

A tooltip shows the logo title. A logo with no title has no tooltip. In a slider, Left and Right tooltips of the first and last visible logo can be clipped by the slider edge; use Top or Bottom there.

Links tab

What happens when a visitor clicks a logo that has a link.

Advanced tab

Custom CSS, image loading and size.

Pro options tab

Features that only exist in the Pro build.

Templates

Start from a ready-made look instead of a blank showcase.

On the dashboard, the Templates page lists starter designs. Click one to create a new showcase with its layout and style already set, then add your own logos.

A template only sets options. It never adds logos, and you can change any option afterwards.

Showing a showcase

Four ways to put a published showcase on your site.

1. Block editor Free

1. Add the blockIn a page or post click + and search for Logo Showcase.
2. Pick a showcaseChoose it from the drop-down. The block shows a live preview in the editor.
3. UpdatePublish or update the page.

2. Shortcode Free

Paste the shortcode into a Shortcode block, a classic editor, a widget area or any page builder text field:

[logo_showcase id="21"]

The ID is shown on the dashboard card and in the editor top bar. Use the Copy button so you don't mistype it. Older shortcodes from version 4 keep working.

3. Elementor widget Free

With Elementor active, search the widget panel for Logo Showcase, drag it onto the page and choose the showcase in the widget's Showcase control.

4. In a theme template (PHP) Free

<?php echo do_shortcode( '[logo_showcase id="21"]' ); ?>

Assets load only where needed

The plugin's CSS and JavaScript are added only to pages that contain a showcase, and none of it depends on jQuery or a slider library. If your theme prints a showcase inside content loaded later (for example a popup), the assets are still output with the showcase.

Unpublished and empty showcases

A draft or deleted showcase shows nothing to visitors. A showcase with no logos shows nothing to visitors, and shows a short hint to editors.

Global settings

Settings that apply to all showcases. Administrators only.

Open Logo Showcase → Settings on the dashboard. Here you can change the default look new showcases start with, and see whether Pro is active. Per-showcase options always win over the defaults.

• Defaults only affect showcases created after you change them.
• Uninstalling the plugin leaves your showcases in the database so nothing is lost if you reinstall.

Upgrading from version 4

Your existing showcases keep working.

• Old showcases and shortcodes are read as they are. Nothing is changed in the database until you open a showcase in the new editor and save it.
• The first time you open an old showcase the settings are converted in memory. Check the preview before saving.
• Border style, list style (position and columns), text direction and category filter options from version 4 are all available again.
• Version 5 does not use jQuery or the old slider library, so a few rarely used v4 options have no equivalent. The preview shows exactly what visitors will see.
• If you wrote custom CSS against the old class names, review it. New class names start with lsw-.
• Take a backup before upgrading. Rolling back to version 4 is possible because the old data is not removed.

Accessibility and performance

What is built in and what you should do.

Accessibility

• Sliders are labelled regions. Arrows, dots and the pause button are real buttons reachable by keyboard.
• Tooltips show on keyboard focus as well as hover.
• Autoplay and ticker animation are turned off for visitors who prefer reduced motion.
• Always write alt text or a title for each logo. Logos without any text are announced as "image".
• The popup is a modal dialog that traps focus and returns it when closed.

Performance and layout shift

• No jQuery and no external slider library. The slider script is small and loads only where used.
• The space for the showcase is reserved by the CSS before the script runs, so the page doesn't jump (zero layout shift).
• Images are lazy-loaded by default. Turn lazy loading off for a showcase at the very top of the page.
• Pick the smallest image size that stays sharp (Advanced → Image size).
• Caching plugins are fine. Showcases are plain HTML. If you exclude scripts from optimization, exclude frontend.js only if you see problems.

Troubleshooting

Solutions to the most common problems.

Frequently asked questions

Developer reference

For theme and plugin developers.

Wrapper and class names

Use your browser inspector on a live showcase to see the exact structure and the per-showcase CSS variables (they start with --lsw-).

Custom CSS example

.lsw .lsw-item { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lsw .lsw-title { letter-spacing: .02em; }

PHP filters

JavaScript event

Dispatch lsw:update on a showcase wrapper to make its slider recalculate (for example after showing a hidden tab):

document.querySelector('.lsw').dispatchEvent(new Event('lsw:update'));

REST API

Namespace logo-showcase/v1. All routes need a logged-in user with the right capability and the REST nonce, except the Pro click beacon.

Changelog

5.0.0

• New React dashboard and editor with a live preview.
• Dependency-free slider and grid; no jQuery; zero layout shift.
• Bulk upload and drag-and-drop ordering; unlimited logos.
• Slider rows (Pro), arrows on hover, mouse drag, center mode (Pro).
• Logo descriptions.
• Border style, text direction (automatic, RTL, LTR), list position options and category filter styling.
• Block editor block and Elementor widget.
• Pro: list, ticker, table, filter grid and sponsor tiers layouts; popup; scheduling; click counts; Google Fonts; image and hover effects.