Adding Widgets to a Sidebar

How to add widgets into sidebar

Sidebar/widget areas are empty columns by default so you’ll need to add widgets to them in order to display information.

1. From the WordPress left menu, go to the Appearance > Widgets page.

2. In the Widgets page, drag and drop one of the widgets into one of the sidebars.

3. Configure the widget settings and click on the Save button.


Or assign a widget to the sidebar from the dropdown list:

1. From the WordPress left menu, go to the Appearance > Widgets page.

2. Click on one of the widgets.

3. From the dropdown list click on one of the sidebars. Then click on the Add Widgetbutton so that widget will be added to the selected sidebar.

4. Configure the widget settings and then click on the Save button.

To add sidebar to the pages of your site, find the instruction here.


Adding Sidebar to specific pages

How to add sidebar to specific pages, not globally.

If you’d like to show sidebar on specific pages only and not on all pages/posts, you can do this in the page editor in the Post Options section.

Note:Post Options section will appear on the page backend only after you install the plugin Advanced Custom Fields PRO. It’s bundled with Jupiter X and can be installed via Jupiter X > Control Panel > Plugins as described in this article.

Note: Before adding a sidebar, make sure your page template is set to Default Template in Page Attributes drop down section. If you have Full Width template enabled, the sidebar won’t be visible.

For example, you want to show a sidebar on the Contact page only:

1. From the WordPress left menu, go to Pages and open Contact page to edit.

2. In Post Options section, open the Main tab and set Layout setting to the one with the sidebar.

3. Then set a sidebar area in the Sidebar Primary setting.

If you selected Double Sidebar layout, set sidebar areas in Sidebar Primary and Sidebar Secondary settings.

4. Save the changes clicking on the Update button on the right side in the page editor.

Sidebar Conditions for different post types

When you added a sidebar globally, you may want to edit some sidebar settings for some post types like Shop, Blog, etc.

In Sidebar popup there is a Condition setting which allows editing sidebar for different post types: Page, Blog, Search, Shop, Archive, Portfolio.

For example, if you want to change sidebar layout for single blog posts, you need select Blog as an exception and configure the sidebar settings to the ones you need.

Adding a Sidebar globally

How to add a sidebar for all pages

Note: Before adding a sidebar, make sure your page template is set to Default Template in Page Attributes drop down section. If you have Full Width template enabled, the sidebar won’t be visible.

1. From the WordPress left dashboard, go to Appearance > Customize.

2. From the Customizer left dashboard, go to Sidebar menu.

3. In Sidebar popup select the Layout.

You can choose as a Single Sidebar layout so the Double Sidebar where you can display two sidebar areas on the left or on the right side of the page. Also there is an Opposing Sidebar layout which allows you to show two sidebars on left and right sides of your content.

You’ll see two sidebar options: Primary Sidebar and Secondary Sidebar.

From the drop down menu, select the sidebar area you want to show on pages.

If you selected the Single Sidebar layout, you should choose the area in the Primary Sidebar option. If it’s Double Sidebar or Opposing Sidebar layout, you need use both – Primary Sidebar and Secondary Sidebar.

If you want to change sidebar settings for some post types (Blog, Portfolio, etc.), please refer to this article.

Note: Before assigning a sidebar layout, make sure you added widgets to Sidebar Areas in Appearance > Widgets. Read more in this article.

Adding Widgets to a Sidebar

The next step after adding a sidebar is to add widgets. Sidebar/widget areas are empty columns by default so you’ll need to add widgets to them in order to display information. WordPress has several default widgets and the Ken WordPress theme also adds some extra widgets. In this article, we explain about two methods for adding widgets to a sidebar/widget areas.

Adding widgets to a sidebar - widgets and areas


Dragging and Dropping Widgets

To add widgets:

1From the WordPress left menu, go to the Appearance > Widgets page.

2In the Widgets page, drag and drop one of the widgets into one of the sidebars.

Adding widgets to a sidebar - Adding widget

3Configure the widget settings click on the Save button.


Selecting Widgets from the Dropdown List

To add widgets:

1From the WordPress left menu, go to the Appearance > Widgets page.

2Click on one of the widgets.

3From the dropdown list click on one of the sidebars and click the Add Widget button. The widget gets added to the selected sidebar automatically.

Adding widgets to a sidebar - Selecting area

4Configure the widget settings and then click on the Save button.

Creating a Custom Sidebar

The custom sidebar is a useful feature in the Ken WordPress theme which allows you to add more sidebars/widget areas into the widgets page. In this article, we’ll explain steps needed for creating a custom sidebar/widget area.

Creating a Custom Sidebar

To create a custom sidebar:

1From the WordPress top menu, go to Theme Settings > General Settings.

2Click on Add More button shown at the right side of the Custom Sidebars option and type the name you like. In our example we name it Test Sidebar.

ken_custom_sidebar-Creating a custom sidebar

4Click on the Save Changes button at the bottom of the page.


After creating the custom sidebar, you can see that the custom sidebar has been added to the sidebar list in Appearance -> Widgets.

ken_custom_sidebar-Creating a custom sidebar

Adding a Sidebar

Sidebars/Widget Areas are containers to hold widgets. They are usually used to display information other than the main content of a web page or to add widgets into mega and side menus.

Note that there is no difference between a sidebar and a widget area. Sometimes, when talking about pages for example, we call it sidebar, but other times, like when talking about mega menus, we call it a widget area. The Ken theme provides 16 default sidebar areas. Each sidebar area belongs to a specific page or section.

In this article, we’ll explain the process of adding a sidebar to a page and selecting a widget area for the mega menu. It does not matter if the page is a blog post or portfolio item, the process is the same.


Adding a Sidebar into Posts

You can add a Sidebar to the posts globally or individually.

Adding a Sidebar Globally

ken_blog_sidebar

To add a Sidebar globally into Posts, please go to Theme Settings -> Blog and choose Right or Left value for Blog Single Layout option. Choosing Right or Left will add the Sidebar either to the Right or Left side of the blog. The auto assigned Sidebar for the Blog is the Blog Single sidebar present in Appearance -> Widgets.

 

Adding a Sidebar Individually

For the individual posts, this setting is available in the Ken Page Layout box present at the right side of the title box. Using this setting you can override the default sidebar by adding a specific sidebar to the post. You can also override the layout of the page by changing the sides of the sidebar or by simply disabling the sidebar on the specific post.

To add a sidebar:

1Add a new post or edit an existing one.

Adding a sidebar - new post

2Scroll down to the Ken Page Layout box.

ken_page_layout

3From the Choose A Sidebar setting, select one of the sidebar options.

4Update or publish the page.


Adding a Sidebar into Pages

There are two ways to add a sidebar to a page. The two ways are Choose A Sidebar option and the widgetized sidebar shortcode element.

Choose A Sidebar

This setting is available in Posts, Pages and Portfolios in the Ken Page Layout box. This setting adds the sidebar area to the page.

To add a sidebar:

1Add a new page or edit an existing page.

Adding a sidebar - new page

2Scroll down to the Ken Page Layout box.

ken_page_layout

3From the Page Layout option, choose the sidebar layout which will be Right or Left. Then from the Choose A Sidebar setting, select one of the sidebar.

4Click on Update.


Adding a Sidebar via Shortcodes

Widgetized Sidebar Shortcode

This shortcode allows you to choose a sidebar and display it inside a page section or row shortcode. In this example, we’ll explain the process for the row shortcode.

To add the widgetized sidebar shortcode inside the row shortcode:

1Add the row shortcode, then select one of the column layouts.

Adding a sidebar - row layout

2Click on the + button in one of the columns, search for Widgetized Sidebar and click on it.

Adding a sidebar - shortcode search

3From the Sidebar settings in the Widgetized Sidebar Settings pop-up, select one of the sidebars.

Adding a sidebar - widgetized sidebar settings

4Click on Save changes and update the page.


Choosing a Widget Area/Sidebar for the Mega Menu

You can set a widget area/sidebar as a column in your menu by selecting it from the Mega Menu Widget Area option for second level menu items.

To add a widget area to the mega menu, follow the steps described below:

1Go to Appearance > Menus, and select the existing menu or create a new one.

2In the parent menu item settings, tick the Make this Item Mega Menu? option.

Adding a sidebar - parent menu settings

3Then open the settings of the second level menu item, find the option Mega Menu Widget Area, and select widget area from the dropdown list.

Adding a sidebar - child menu settings

4Click on Save Menu.

Adding Widgets to a Sidebar

The next step after adding a sidebar is to add widgets. Sidebar/widget areas are empty columns by default so you’ll need to add widgets to them in order to display information. WordPress has several default widgets and the Jupiter WordPress theme also adds more than 15 extra widgets.

In this article, we’ll explain about two methods for adding widgets to the sidebar/widget areas.


Dragging and Dropping Widgets

To add widgets:

1From the WordPress left menu, go to the Appearance > Widgets page.

Adding widgets to a sidebar - Appearance menu

2In the Widgets page, drag and drop one of the widgets into one of the sidebars.

Adding widgets to a sidebar - Adding widget

3Configure the widget settings click on the Save button.


Selecting Widgets from the Dropdown List

To add widgets:

1From the WordPress left menu, go to the Appearance > Widgets page.

Adding widgets to a sidebar - Appearance menu

 

2Click on one of the widgets.

3From the dropdown list click on one of the sidebars and click on “Add Widget” button. The widget gets added to the sidebar automatically.

Adding widgets to a sidebar - Selecting area

4Configure the widget settings and then click on the Save button.

Adding a Custom Sidebar

The custom sidebar is a useful feature in the Jupiter WordPress theme which allows you to add more sidebars/widget areas into the widgets page.

In this article, we’ll explain how to creat a custom sidebar/widget area and assign it to a specific page.


Adding a Custom Sidebar

To add a custom sidebar:

1From the WordPress left menu, go to Theme Options > Sidebar.

2Click on Add a New Sidebar and type Page Widget Area 2.

3Use the Activate Sidebars For Custom Post Types option to select post types you would like assigning custom sidebars for their single page. You can use this option to choose a custom sidebar for your third party plugin post types.

4Click on the Save Settings button.


Assigning the Sidebar to a Page

To assign the Page Widget Area 2 sidebar to a specific page:

1From the WordPress left menu, go to Pages and add a new page or edit an existing page.

Adding a custom sidebar - new page

2In the Jupiter Widget Options box, select Page Widget Area 2.

Adding a custom sidebar - jupiter widget options

3Publish or update the page and check the result.

Adding a Sidebar

Sidebars/Widget Areas are containers to hold widgets. They are usually used to display information other than the main content of a web page or to add widgets into mega and side menus.

Note that there is no difference between a sidebar and a widget area. Sometimes, when talking about pages for example, we call it sidebar, but other times, like when talking about mega menus, we call it a widget area. The Jupiter theme provides 17 default sidebar areas. Each sidebar area belongs to a specific page.

In this article, we’ll explain the process of adding a sidebar to a page and selecting a widget area for the mega menu. It does not matter if the page is a blog post or portfolio item, the process is the same.


Adding a Sidebar into Posts

This setting is available in Posts, Pages, News and Portfolios in the Jupiter Page Options box. This setting adds the default sidebar area.

To add a sidebar:

1Add a new post or edit an existing one.

Adding a sidebar - new post

2Scroll down to the Jupiter Page Options box.

Adding a sidebar - jupiter page options

3From the Layout setting, select one of the sidebar options.

Adding a sidebar - layout

4Update or publish the page.


Adding a Sidebar into Pages

There are three ways to add a sidebar into a page from the layout setting, in the page section shortcode and in the widgetized sidebar shortcode.

Layout Settings

This setting is available in Posts, Pages, News and Portfolios in the Jupiter Page Options box. This setting adds the default sidebar area.

To add a sidebar:

1Add a new page or edit an existing page.

Adding a sidebar - new page

2Scroll down to the Jupiter Page Options box.

Adding a sidebar - jupiter page options

3From the Layout setting, select one of the sidebar options.

Adding a sidebar - layout

4Click on Update.


Adding a Sidebar via Shortcodes

Page Section Shortcode

The page section shortcode provides the Select Section Layout and Sidebar settings which allow you to add a sidebar inside a page section. It’s useful when the whole page is in full layout but you need to show a sidebar for just one of the page sections.

To add a sidebar inside a page section:

1Add a page section shortcode to your page.

Adding a sidebar - shortcode search

2Access the Page Section Settings.

3From Select Section Layout, select Left or Right sidebar.

Adding a sidebar - page section settings

4From Sidebar, select one of the sidebars.

Adding a sidebar - page section sidebar option

5Click on Save Changes.

Widgetized Sidebar Shortcode

This shortcode allows you to choose a sidebar and display it inside a page section or row shortcode. In this example, we’ll explain the process for the row shortcode.

To add the widgetized sidebar shortcode inside the row shortcode:

1Add the row shortcode, then select one of the column layouts.

Adding a sidebar - row layout

2Click on the + button in one of the columns, search for Widgetized Sidebar and click on it.

Adding a sidebar - shortcode search

3From the Sidebar settings in the Widgetized Sidebar Settings pop-up, select one of the sidebars.

Adding a sidebar - widgetized sidebar settings

4Click on Save changes.


Enabling a Sidebar for Archive Pages

In this section we’ll describe how to activate the sidebar for the portfolio archive pages. To do this, follow the steps below:

1Go to Theme Options > Portfolio > Portfolio Archive.

2Edit the option Archive Layout. There you can select the sidebar layout for the archive pages. The available options are: Right Sidebar, Left Sidebar and Full Layout. 

3Click on the Save Settings button.


Enabling a Sidebar for the Search Page

Enabling the sidebar for the search page takes similar steps as for archive pages. They are the following:

1Go to Theme Options > Search.

2In the Layout dropdown, select the sidebar layout you need. The available options are: Right Sidebar, Left Sidebar, and Full Layout.

3Click on the Save Settings button.


Choosing a Widget Area for the Mega Menu

You can set a widget area as a column in your menu by selecting it from the Mega Menu Widget Area option for second level menu items.

To add a widget area to the mega menu, follow the steps described below:

1Go to Appearance > Menus, and select the existing menu or create a new one.

2In the parent menu item settings, tick the Make this Item Mega Menu? option.

Adding a sidebar - parent menu settings

3Then open the settings of the second level menu item, find the option Mega Menu Widget Area, and select widget area from the dropdown list.

Adding a sidebar - child menu settings

4Click on Save Menu.