Skip to content

Adding a sidebar menu

There are multiple ways to add a sidebar menu to a Flex2-themed page. Using a widget or using the WordPress element "Widgetized Sidebar" are the most useful, and the ones we will cover here. Before we get into them though, you must first create the menu that you want to appear on your page by going to Appearance > Menus on the dashboard of your site.

Adding a menu to a page's sidebar using a widget

Say you created a menu called "Resources".  You would then go to Appearance > Widgets on the dashboard of your site. You will need to make sure that the "Custom Sidebar" plugin is activated (if it is not, contact the helpdesk at and we can activate it for you).

Once activated, you will see an option to "Create a new sidebar."  Click on that.

Your new sidebar will appear below. Name it something appropriate. For example, I will name mine "Resources menu".

Next, look through the long list of elements on the left and find the block labeled "Text". Click and drag it to the new Sidebar block you added.  

Once it's installed, you will be able to add the following shortcode to the newly installed Text block in your Sidebar (changing the name to match the name you gave your menu):

[sidebar-menu menu="Resources" title="Resources" title_link="/resources"]

Then click on "save".

Now to add the sidebar to the page that you desire it to appear on.

Go to the page that you want this sidebar on. Make sure that the page layout is set up to display a sidebar. (see below)

Next, look to the right side of the screen. Find the dropdown for "Primary sidebar". Click it and select the sidebar that you want on this page. Then save the page.

Your page will now look like this:

Adding a menu to a page's sidebar using the "Widgetized Sidebar" element

The other really simple way to add a menu to your page's sidebar is by using the WordPress element "Widgetized Sidebar." 

Go to the page that you want to add the sidebar menu and make sure that it is set up as a "full-width" layout.

Next, create a row and give it two columns. Make the columns "1/4 + 3/4" or "1/3 + 2/3", depending on how much content will take up in the right column. Add the element "Widgetized Sidebar" to the left column.

NOTE: You will need to give the left column the class "second-on-mobile" and the right column the class "first-on-mobile". Also, make sure that the row has the class of "reverse_row". This will ensure that the content of the page will appear above the menu on mobile devices.

Click on Widgetized Sidebar, and then in the dropdown menu select the sidebar menu that you would like to appear on the page. Save changes. Then save the entire page.

For Widgetized Sidebar to work on your page, you will need to make sure that your "Title" is hidden...

And that you add a header to your page and place it in the right column above your page's copy.

Your page will now look like this:

Feedback and Knowledge Base