Toggle Visibility

7 min read Updated

The Toggle Visibility addon hides Page Builder rows and widgets by device, login status, date and time, or user role. It can also hide the content of a page, or the whole page, and a shortcode hides any text you choose.

View the Toggle Visibility demo.

Requirements

The addon needs both free plugins to be active. The User Roles settings need Page Builder 2.31.0 or higher (rows and widgets) and Widgets Bundle 1.64.0 or higher (Page Visibility).

Go to SiteOriginPremium Addons and activate Toggle Visibility.

You can control visibility in three places:

Rows and Widgets

To open the settings for a row:

  1. Hover over the wrench icon on the right of the row.
  2. Click Edit Row.
  3. In Row Styles, open the Toggle Visibility group.

To open the settings for a widget, click Edit on the widget. In Widget Styles, open the Toggle Visibility group.

Rows and widgets have the same settings. Columns don’t have Toggle Visibility settings. If one setting hides a row or widget, it stays hidden, whatever the other settings say.

The Toggle Visibility group in Row Styles with Scheduling and User Roles turned on

Hide Row on All Devices / Hide Widget on All Devices
Hides the row or widget from all visitors. Use it to prepare new content before you publish it. Default: off.

Hide on Desktop
Hides the row or widget on screens wider than the Page Builder Tablet Width. Default: off.

Hide on Tablet
Hides the row or widget on screens between the Mobile Width and the Tablet Width. Default: off.

Hide on Mobile
Hides the row or widget on screens as wide as the Mobile Width or narrower. Default: off.

The three device settings use CSS. The row or widget is still in the page, but it doesn’t show. All other settings remove it from the page.

Hide When Logged Out
Hides the row or widget from visitors who aren’t logged in. Default: off.

Hide When Logged In
Hides the row or widget from logged-in users. Default: off.

Scheduling

Turn on Scheduling to show or hide the row or widget for a date range. You can leave the start or the end of the range open. These settings appear:

Display
Show shows the row or widget only between the dates. Hide hides it between the dates. Default: Show.

Date From
The start date. Click the field to pick a date from the calendar. Leave it empty for no start date.

Time From
Optional. The start time, in 24-hour format and 30-minute steps. If you leave it empty, the schedule starts at the beginning of the day (00:00).

Date To
The end date. Leave it empty for no end date.

Time To
Optional. The end time. If you leave it empty, the schedule ends at 23:59.

The schedule uses the time zone in SettingsGeneral. To pick no time, choose None in the time list.

To stop a schedule, clear Date From and Date To. At the moment, turning Scheduling off doesn’t stop a schedule that still has dates.

User Roles

Turn on User Roles to show or hide the row or widget for some user roles. These settings appear:

Display
Show shows the row or widget only to the selected roles. Hide hides it from the selected roles. Default: Show.

Roles
Select one or more roles. The list shows all standard and custom roles except Administrator. If you select no roles, this setting has no effect.

When roles are selected, visitors who aren’t logged in never see the row or widget, with Show or with Hide. Administrators always see it: they are exempt from the role check. To change the exempt roles, see Advanced Customizations.

Responsive Breakpoints

The device settings use the Page Builder breakpoints. To change them, go to SettingsPage Builder and open the Layout tab.

Tablet Width
The screen width, in pixels, at which the tablet view starts. Default: 1024.

Mobile Width
The screen width, in pixels, at which the mobile view starts. It can’t be less than 320. Default: 780.

The addon uses Tablet Width even when Use Tablet Layout is off. Hide on Tablet has no effect if Tablet Width isn’t larger than Mobile Width.

Page Visibility

To hide a whole page, or only its content, edit the post or page. Below the content area, find the SiteOrigin Premium meta box and click Page Visibility. The tab is on posts, pages and most custom post types.

The Page Visibility section of the SiteOrigin Premium meta box with Visibility Target set to Content

Visibility Target
What to hide. None turns Page Visibility off. Content replaces the post content with a message; the header, footer and sidebars still show. Page hides the whole page. Default: None.

Action
Shows when Visibility Target isn’t None. Default: Show.

  • Show: the page shows. Add a schedule in Advanced to show it only between two dates.
  • Hide: hides the page or content.
  • Hide Logged In: hides it from logged-in users.
  • Hide Logged Out: hides it from visitors who aren’t logged in.

Redirect URL
Shows when Visibility Target is Page. Visitors who can’t see the page go to this URL. If you leave it empty, they get a 404 Not Found page.

Content

This section shows when Visibility Target is Content. It sets the message that replaces the hidden content.

Content Type
Text uses a text editor. Layout Builder lets you build the message with Page Builder. Default: Text.

Content
The message. Default: Page content currently unavailable for viewing. If the field is empty, the page shows “This content has been hidden”.

Advanced

User Roles
Select the roles the Action applies to. It doesn’t show for Hide Logged In and Hide Logged Out.

Scheduling
Contains Date From, Time From, Date To and Time To. The times are optional and work as they do for rows. Page Visibility uses a schedule only when both dates are set. If either date is empty, it ignores the schedule. With Show, the page shows only between the dates. With Hide Logged In or Hide Logged Out, the page is hidden from those users only between the dates.

At the moment, Hide and User Roles don’t work as expected. Hide with no roles selected doesn’t hide anything. With any role selected, the page or content is hidden from everyone, administrators too. Until a fix is released, use Hide Logged In, Hide Logged Out, or Show with a schedule.

Shortcode

The toggle_visibility shortcode shows or hides text for some users. You can use it anywhere shortcodes work, for example in the SiteOrigin Editor widget.

Logged In or Logged Out

The logged attribute takes in or out. Without it, only logged-in users see the text.

[toggle_visibility logged="in"]Only logged-in users see this.[/toggle_visibility]

[toggle_visibility logged="out"]Only logged-out visitors see this.[/toggle_visibility]

User Roles

The roles attribute takes a comma-separated list of role slugs, such as editor,author. The display attribute sets what happens to those roles:

  • display="hide" hides the text from the listed roles. This is the default.
  • display="show" shows the text only to the listed roles.
[toggle_visibility roles="editor,author" display="show"]
Only Editors and Authors see this.
[/toggle_visibility]

[toggle_visibility roles="subscriber"]
Logged-in users see this, except Subscribers.
[/toggle_visibility]

When you use roles, the shortcode ignores logged. Visitors who aren’t logged in never see the text, and administrators always see it.

Advanced Customizations

Administrators are exempt from all user role checks. To change the exempt roles, use the siteorigin_premium_toggle_visibility_exempt_roles filter. This example also exempts Editors. Add it to your child theme’s functions.php file or a code snippets plugin.

add_filter( 'siteorigin_premium_toggle_visibility_exempt_roles', function( $roles ) {
	$roles[] = 'editor';
	return $roles;
} );

To change the message that replaces hidden page content, use the siteorigin_premium_toggle_visibility_metabox_block_message filter. It receives the message and the Page Visibility settings. To change only the “This content has been hidden” text, which shows when the Content field is empty, use the siteorigin_premium_toggle_visibility_metabox_content_fallback filter.