DiceBar: a mobile bottom bar for WordPress

What a mobile bottom bar does

Most visitors arrive on a phone. On a phone, a phone number in the footer is four scrolls away and a contact form is a wall. A bottom bar puts the action under the thumb on every page.

DiceBar adds that bar to any WordPress site. You choose what goes in it, where it appears, and what it looks like. Everything described on this page is in the free plugin.

Installing the plugin

1. In your dashboard, go to Plugins, then Add New.
2. Search for DiceBar.
3. Install it, then activate it.
4. Open DiceBar in the dashboard menu.

It needs WordPress 6.0 or newer and PHP 7.4 or newer. It has no other dependencies and makes no external requests.

Adding buttons to the bar

On the Items tab, choose a starter kit or press Add an item. Each button has a type, a label, and one value such as a phone number or a web address.

Drag the handle at the left of a row to reorder buttons. The order in the list is the order on the bar.

Why four buttons is the limit

At 320 pixels wide, which is the narrowest phone still in real use, the bar has 288 pixels of usable width. Four labelled buttons is 72 pixels each, which fits a word of about eight characters. A fifth button does not shrink the words, it cuts them short. The plugin caps the list at four and says why, rather than letting you discover it on a visitor's screen.

Making one button stand out

Tick Make this the standout button on the button that matters most, usually Call or Book. It renders in your accent colour while the others stay neutral. Use it on one button only; two standout buttons is none.

Button types

Starter kits

The hardest part of a bar like this is deciding what belongs in it. Nine kits fill the list in one click, and everything stays editable afterwards.

Design and looks

The Design tab has four ready-made looks. The preview beside the settings shows the real bar, drawn with the real stylesheet, so what you see is what visitors get.

Icons, words, or both

Each button can show an icon and a word, an icon only, or a word only. It applies to the whole bar rather than one button, because an unlabelled icon centres itself while a labelled one lifts to make room. Mixing them leaves one mark sitting lower than its neighbours for no reason anybody can see.

Colours and dark mode

Light and dark colour sets are chosen separately, eight values each. Dark mode is what you decided rather than an automatic inversion of your brand colour, which is almost always wrong. The preview has a Dark button so you can check it before saving.

Your own CSS

Every value is a custom property on the bar's wrapper, so you can override anything without fighting the plugin and without an !important.

.dicebar {
	--dicebar-radius: 24px;
	--dicebar-accent: #e11d48;
}

Where the bar shows

The Where tab controls three things independently.

• Screens. Phones only, phones and tablets, or every screen. Both width boundaries are settable.
• Pages. Everywhere, only on the pages you list, or everywhere except those pages. Enter post or page ids, separated by commas. The id is in the address bar when you edit a page.
• Visitors. Everyone, signed in visitors only, or signed out visitors only.

Individual buttons can have their own screen and visitor rules too, so one button can appear where another does not.

Behaviour

• Position. Bottom, which is where thumbs are, or top if your theme already occupies the bottom.
• On scroll. Always visible, or hiding as the visitor scrolls down and returning as they scroll up.
• Step aside for. Name a CSS selector and the bar gets out of the way while that element is on screen. A Call button is noise beside the contact section carrying the same number.
• Keep clear. Space left below the bar, for when a cookie banner sits in the same place.
• Stacking order. Lower it if the bar covers one of your theme's pop-ups, raise it if something covers the bar.

The bar also leaves room for the home indicator on modern phones, respects a visitor's reduced-motion preference, and never prints.

Shortcode and page builders

You do not have to place the bar. It appears by itself on every page you allow it on, in any theme, because it attaches to the footer hook that every theme has to call.

To also show the same row of buttons inside your content, use the shortcode. The inline copy drops the fixed positioning, the blur and the shadow, so it sits in the page rather than floating over it.

[dicebar]

To show only some of the buttons, name them by id. Ids are shown beside each button on the Items tab.

[dicebar items="itm_a1b2c3d4, itm_e5f6a7b8"]

The shortcode works in the block editor, in a widget, in a theme template through do_shortcode(), and in Divi, Beaver Builder, Bricks and Oxygen.

Using it with Elementor

The bar itself appears on Elementor pages like any other, with no setup at all.

To place the row inside a page, search for DiceBar in the Elementor panel. The widget takes one optional setting, a list of button ids, and everything else comes from the plugin's own settings so restyling the bar restyles every copy of it.

The widget only exists when Elementor is active. Nothing Elementor-related is loaded otherwise, so an install without it carries no cost.

Caching

This was designed for caching rather than patched for it afterwards. A full-page cache stores one copy of a page and serves it to everybody, which quietly breaks any rule that differs between two visitors looking at the same address.

The plugin splits its rules by which kind they are.

The script is also marked so that optimisers do not defer or combine it, since it decides what a visitor sees and deferring it would show the wrong thing first.

Tracking taps

The plugin collects nothing and sends nothing anywhere. That does not change.

It does announce a tap inside the page, so your own tag manager or analytics can listen for it. Nothing leaves the browser because of the plugin; what happens next is entirely your own code.

document.addEventListener( 'dicebar:click', function ( event ) {
	// event.detail.id   the button's id
	// event.detail.type the button's type, such as "call"
	window.dataLayer = window.dataLayer || [];
	window.dataLayer.push( {
		event: 'footer_bar_click',
		button: event.detail.type
	} );
} );

Every button also carries stable data attributes, so a tag manager can target one with a selector instead.

For developers

Filters

Adding a button type

add_filter( 'dicebar_item_types', function ( $types ) {
	$types['booking'] = array(
		'label' => 'Booking',
		'icon'  => 'calendar',
		'value' => array( 'kind' => 'url', 'label' => 'Booking address' ),
		'extra' => array(),
	);

	return $types;
} );

An entry missing any of those keys is discarded rather than causing a warning somewhere else, so a partial registration fails quietly at the registry instead of loudly at render time.

Troubleshooting

The bar does not appear

Check that it is turned on, that at least one button has a value filled in, and that you are looking at a screen narrower than the width on the Where tab. A button with an empty address is dropped rather than rendered dead.

Something covers the bar, or the bar covers something

Change the stacking order on the Behaviour tab. Raise it if something sits on top of the bar, lower it if the bar sits on top of a pop-up.

A cookie banner overlaps it

Use Keep clear on the Behaviour tab to leave space below the bar.

The last line of my page is hidden

It should not be. The plugin measures the bar and gives the page that space back. If your theme sets its own bottom padding with an !important, that will win; add a rule for body using the --dicebar-height property.

Questions