Widgets

Widgets are small reusable blocks — a menu, a list of recent posts, a search box, a mini cart, an advertisement — that you place in widget areas such as the blog sidebar, the shop sidebar or the footer. You build them once and they appear on every page that shows that area.

Widgets screen with the list of available widgets on the left and the widget areas on the right

Appearance → Widgets. Available widgets are listed on the left; widget areas, with the widgets already placed in them, are on the right.

How widgets work

The Widgets screen has two halves. On the left, Available Widgets lists every kind of widget your site can use (the list grows when you install Booking or TruCommerce). On the right are the widget areas: named places in the design where widgets are shown. Adding a widget means placing a copy of one kind of widget in one area and configuring it.

Pick a widget → Add it to an area → Configure and save → Reorder if needed

Adding and configuring a widget

  1. Open Appearance → Widgets.
  2. On the left, click the name of a widget to expand it. Hover the question-mark icon, or read the grey line under the name, to see what it does.
  3. In the expanded widget choose Add to <area> (for example Add to Blog), then select Add Widget. The widget appears at the bottom of that area.
  4. On the right, open the area, then click the new widget’s title to expand its settings.
  5. Set its title and options (each widget has different ones, listed below) and choose Save. A confirmation message appears.
  6. Visit a public page that shows the area to check the result.
A widget area expanded with a Posts widget open and its settings visible

An open widget shows its own options, then the switches that control where it appears, and the Delete and Save buttons.

Settings every widget can have

Depending on the widget you will also see these switches:

SettingWhat it does
TitleThe heading shown above the widget on the page. Leave it empty for no heading.
Enable on DesktopShow the widget on large screens.
Enable on MobileShow the widget on phones and small tablets. Turn it off for long sidebar lists that would push content down.
Load AsynchronouslyLoads the widget after the page appears, so a slow widget does not delay the rest of the page.
StatusSwitch a widget off without deleting it.

Reordering and removing

Drag a widget by its title bar to change its order inside an area; the new order is saved automatically. Delete removes the widget from the area only — it does not delete the posts, menus, products or advertisements it was showing.

Widget areas

AreaWhere it appears
HomepageA general-purpose area. The default design does not place it automatically; show it on any page by adding the Widgets block in the Page Builder and entering the area identifier sidebar.
CategoriesThe sidebar next to blog category pages and next to the Booking category pages.
TagsIntended for blog tag pages. Show it on a page with the Widgets block (identifier tags-sidebar).
PageThe sidebar next to ordinary pages that use a sidebar layout, and next to the Booking customer pages (My Bookings and the customer profile).
BlogThe sidebar next to the blog list and next to every blog post.
Footer Area 1 – 4The columns of the site footer. How many are used and how they are arranged is set under Footer Columns and Widgets layout in Footer Layouts & Backgrounds.
Shop SidebarNext to the shop, category, tag and search pages of TruCommerce. Left or right is chosen in the store settings.
Product SidebarNext to a single product page.
Cart SidebarNext to the shopping cart.
Checkout SidebarNext to the checkout.

An empty area takes no space

If an area has no widgets, the page simply does not reserve a column for it, so you never get a blank sidebar.

You are not limited to the places in the table. The Widgets block of the Page Builder displays any widget area inside any page: choose the block, type the area identifier (post-sidebar, footer-1, trucommerce-shop-sidebar and so on) and the widgets of that area appear there. See Dynamic Blocks & Shortcodes.

Content widgets

These are always available.

WidgetWhat it showsOptions
Menu WidgetOne of your menus as a list of links, for example footer link columns or a utility menu.Select a Menu; Menu Style (List stacks the links, Inline puts them in a row).
TextA block of plain text, such as an about-us blurb or opening hours.Text.
Custom HTMLAny HTML you write: an embed, a map, a newsletter form, an icon list.Code. Only paste markup you trust.
AdvertisementOne of your advertisements.The advertisement to show (active advertisements only).
PostsA list of blog posts.Layout (Numbered list, Thumbnails or Headlines); Number of posts to show; Featured (Featured Posts or Editor Choice to show only flagged posts); Order By (Latest, Oldest, Random or Popular).
Post CategoriesThe list of blog categories.Order By (Custom order or Date created); Show Hierarchy (indent sub-categories); Show post counts; Hide empty (hide categories with no posts).
TagsA cloud of the tags that are in use.Number of tags to show (default 15); Hide empty.

Shop widgets (TruCommerce)

Available when the TruCommerce module is enabled. Most are meant for the shop and product sidebars. Their presentation (the design of the filter, list or search) follows the defaults in Settings → TruCommerce Settings → Widget Defaults; see Blocks & Widgets.

WidgetWhat it showsOptions
Category FilterLets customers narrow products by one or more categories.Maximum categories.
Attribute FilterLets customers narrow products by attributes such as size, colour or brand.Maximum attributes.
Price FilterLets customers narrow products to a price range.Minimum, Maximum and Step of the range.
Mini Cart / My CartA compact summary of the shopping cart with quick access to the cart and checkout.Presentation follows the Cart widget default.
Product ListA list of products, for example Latest or Popular.Number of items; Product source (the rule that chooses the products).
Product TagsProduct tags, so customers can browse by tag.Maximum tags.
Product CategoriesProduct categories or taxonomies to help customers browse.Product Taxonomies (all taxonomies, or one such as Brands).
Product SearchA search form connected to the shop.Button text and similar labels.
Shop Call to ActionA promotional panel that links to a featured product or to the shop.Featured product (or Shop landing page), Description, Button Text.
Product SpotlightHighlights one product to draw attention.Product, Eyebrow (small label above the name), Button text.

Booking widgets

Available when the Booking module is enabled. They display live data, so they update when you change services, staff or packages. Their Layout option chooses one of the five Booking designs, or uses the design set in Booking Settings. See Booking Frontend Designs.

WidgetWhat it showsOptions
Booking ServicesActive bookable services.Number of items; Layout.
Service CategoriesActive service categories with the number of services in each.Number of items; Layout.
Booking LocationsActive locations that customers can browse before booking.Number of items; Layout.
Booking ProvidersPublic staff members and the services they offer.Number of items; Layout.
Booking PackagesActive packages and the services they include.Number of items; Layout.
Service SearchA search form connected to the public services page.Placeholder text.
Booking Call to ActionA call-to-action panel that opens the booking wizard.Description; Button text.

Tips

Advertisements · Menus · Dynamic Blocks & Shortcodes · Footer Layouts & Backgrounds · TruCommerce Blocks & Widgets