Modern Design

Better Messages ships with a modern, mobile-first interface that fits naturally into any WordPress theme. Choose how messages are drawn and which side they sit on, keep the conversations list alongside the open conversation, and size the messenger to your page. The result feels like a native chat app — not a bolted-on plugin.

What it adds#

Three message designs — bubbles, outlined, or a classic flat list
Message alignment — your messages right, left, or everything on one side
Side conversations list — the list and the open conversation together on desktop
Full-screen mode on desktop and mobile
A messenger that fills the window, or sits between a minimum and maximum height
Fully responsive — adapts to phone, tablet and desktop without dead zones

Message design#

Better Messages → Settings → Appearance → Conversation

Control	Options	Default
Message design	Bubbles · Outlined · Classic	Bubbles
Message side	Mine on the right · Mine on the left · All on one side	Mine on the right

Combining the two covers the common looks:

You want	Set
iMessage / WhatsApp feel	Bubbles + Mine on the right
Slack / Discord feel — a flat log with sender avatars	Classic
Quieter bubbles that read as part of the page	Outlined + Mine on the right

Upgrading from the Standard template

2.0's Standard template is Classic, which puts every message on one side, so Message side applies to the bubble designs only. Sites that were on Standard are converted to it on upgrade — nothing to do by hand.

Messenger size and layout#

Better Messages → Settings → Appearance → Layout

Control	What it does	Default
Fill the window	Take all the height the window offers, less the offset	Off
Maximum height	The messenger never grows taller than this	650px
Minimum height	Never shorter than this, even in a short window	450px
Window height offset	Space taken by other fixed elements, such as a sticky header, that the messenger should not overlap	0px
Side conversations list	The conversations list beside the open conversation	On
Width	Width of that list. Also decides when it collapses to a rail	320px
Compact mode	Automatic by width · Always expanded, hidden when too narrow · Always compact, icons only	Automatic
Full screen button	A button to open the messenger full screen on desktop	On
Menu button on conversations	A ⋯ on each conversation in the list, shown on hover, opening the same menu as a right click. Phones have their own switch under Appearance → Mobile	On

When to choose each style#

Site type	Recommended setup
Social network	Bubbles, mine on the right
Slack-style community	Classic
Marketplace messaging	Side conversations list on, so the inbox is always visible
Standalone chat page	Fill the window + full screen button
LMS / training site	A maximum height that fits your course content area

Frequently asked questions#

Can I change the design without losing data?#

Yes — all of this is visual. Messages, conversations and settings are unaffected, so you can try combinations freely. Nothing is written until you press Save changes, and Discard throws away what you were trying.

Can I have different layouts on different pages?#

These settings are site-wide. To embed a differently-shaped view on a specific page, use the shortcodes, such as [better_messages_single_conversation].

How does the design adapt to mobile?#

On narrow viewports the layout collapses to a single column — the conversations list slides over the conversation, like iMessage or WhatsApp. Appearance → Mobile has its own controls for full screen behavior, swipe-to-go-back and the floating chat button.

Can I override the design with custom CSS?#

Yes — every surface has a stable class name, all prefixed bm-. Put your rules in Appearance → Customize → Additional CSS, a child theme, or a code snippets plugin.