Magnolia - Sidebar

To manage your sidebars, navigate to Appearance > Widgets. The Magnolia theme includes two sidebars:

  • Sidebar 1 – The primary sidebar on your site that displays on the blog and post pages
  • Sidebar 2 – Used for the WooCommerce sidebar (if using WooCommerce)

Using Block Widgets

To edit a block widget, click on the widget. Depending on the widget type, you'll either modify the settings directly inside the widget area, or you may see block settings appear on the right side of your screen. Learn more about block widgets.

Keep in mind that the sidebar is fully customizable — you are welcome to add, remove, or rearrange block widgets to suit your needs!

Sidebar 1

You can view this sidebar in the demo here. If you imported the demo content, all the sidebar widgets should be present in Sidebar 1 already. Just customize with your own content!

About Me Section

If you imported the demo, simply click to edit the image and text with your own information!

If you need to set it up again, the About Me section uses a Section block, with the following blocks inside the Section:

  1. Advanced Image block, fixed ratio (square), border radius 100%
  2. Advanced Text block set to H5
  3. Advanced Text block set to Paragraph
  4. Advanced Button block

Social Media Icons

See Sidebar Social Icons.

Join the List Widget

This widget uses Genesis eNews Extended, which can integrate with most major mailing list providers. Click here for instructions on configuring this widget. You're also welcome to replace this widget with an embedded form from your mailing list provider.

Categories

For the Categories section, you have two options:

  • Use the Categories WordPress widget, which will display a list of all categories in use on your website.
  • Create a custom navigation menu and use a Navigation Menu widget, which will allow you to select specific categories to display.

Both options will display the same on the front end.

CATEGORIES WIDGET (shown in demo)

Add a Categories widget to the  Sidebar 1 widget area.

NAVIGATION MENU WIDGET

  1. Go to Appearance > Menus > Create a new menu.
  2. Add your desired categories to the menu, and then save.
  3. Go to Appearance > Widgets.
  4. Add a Navigation Menu widget to the Sidebar 1 widget area.
  5. Select the menu you created and save.

Search

This is a default WordPress widget that you can add to your sidebar.

Sidebar 2 (WooCommerce Sidebar)

You can view this sidebar in the demo here. If you installed WooCommerce prior to importing the demo, all the sidebar widgets will be present in Sidebar 2 already. Just customize with your own content!

Sidebar 2 contains the following widgets:

  • Accordion block containing:
  • WooCommerce Product Categories List
  • WooCommerce Filter By Price
  • WooCommerce Filter By Stock
  • WooCommerce Filter By Rating

Adding a sidebar to a page

Most common – To change the layout of an entire page, click here for instructions.

Advanced – To add a sidebar to a portion of a full-width page (for example, as shown on Home Option 3), the sidebar can be inserted into any page using a shortcode.

  1. Create a new page and add a Row Layout block. You'll be prompted to select a column layout. We suggest selecting either Left Heavy or Right Heavy, since a sidebar is usually smaller than the content area.
  2. In the smaller column, add a Shortcode block. Inside the Shortcode block, add: [magnolia_block_sidebar]
  3. In the larger column, add your desired content.

The shortcode sidebar will not display inside the editor, but it will display on the front end after saving the page. The [magnolia_block_sidebar] shortcode pulls the sidebar from Sidebar 1, so you can edit the sidebar at Appearance > Widgets > Sidebar 1.