Sidebars and Widgets extend the page functionality, allowing to improve the website navigation and output simple text messages and complex components, including banners, sliders, or social media posts.

   The following video tutorial was made with one of the previous versions. We are updating the videos. 

WordPress Sidebar

Nicepage fully supports the freedom of adding and moving widgets. All added sidebars can have own styles. This demo consists of three parts covering different ways of using the Sidebars.

Add WordPress Sidebar

First, we will add a simple sidebar inside the Nicepage WordPress Plugin. You can start with any theme installed for the WordPress website. Start with a Blank Page. Add a Sidebar. Click Add -> Position and Shortcode -> Position and Sidebar. Resize the Sidebar. Align the Sidebar. Center the Block Heading and the Block Content.

Link WordPress Sidebar

Switch to WordPress Admin. Select the Main Sidebar. Add the Image widget and the Custom HTML to output text. To link this sidebar to a page in the Nicepage, enter the Sidebar's name into the Sidebar Name field. Type "Main Sidebar." Note this is the "Main Sidebar" position from the theme linked to the Nicepage web page. Click Preview.

Add WordPress Sidebar to Templates

Blog and Post Templates

In modern themes, usually, Blog and Post pages contain sidebars. In the CMS, these pages are output with Blog and Post templates. We can configure a theme to output the Sidebar by default using the Nicepage for desktop. So secondly, we will output the Sidebar into the Blog Template. Please note that for the Post Template, it is done similarly.

Export WordPress Theme

Run the Nicepage for desktop. Select the Blog Template. Turn the Sidebar for the Blog page by clicking the icon in the Right Panel, either the Left or the Right one. Select the Block Header and make it bold, uppercase, and centered. Click Save. Click Export. In the Export dialog, enter the name. We used the "nicepage_wp" then clicked the Export button.

Importing WordPress Theme

Switch to the WordPress Admin. Select Appearance -> Themes. Add a new theme. Upload the Theme. Install the theme, and finally, activate it.

Using WordPress Widgets

Click Appearance -> Widgets. For WordPress, this sidebar outputs the Primary Widget Area. Please note that the Sidebar content is the same one added before in the installed theme. Click "Visit Site" to preview.

Custom WordPress Sidebars

Finally, we will create a Block with custom sidebars. Commonly, the theme author made the sidebar names and the position list. Nicepage WordPress Theme Builder has a collection of preset sidebars and positions. However, this collection can be easily supplemented.

Work With Sidebars

In Nicepage, you can add custom sidebars to the Header, Footer, before and after the Blog and Post templates content. Run the Nicepage for Desktop. Open the Blog template. Add a Blank Block after the Header. Click the Add plus. The Blank Block is selected by default. Click Done.

Add Grid

Add the Grid with 3 columns. Click Add -> Grid. Select the style with 3 columns. Click Done. Resize the Grid. Align the Grid. Clear the cells by selecting a cell and pressing the Delete key. Add the Sidebar into the first cell. Select the first cell. Click Add-> Position and Shortcode -> Position and Sidebar. Resize and align the Sidebar.

Work With Cells

Copy the first cell with the sidebar to the other two cells by clicking the cell and dragging holding the CTRL key. Add Spacing. Resize the Grid, Center the Grid. Decrease the Block Height.

Name Sidebars

Now we will add names for the new Sidebars. Select the first Sidebar and enter "nicepage1" in the Sidebar Name field. Select the second Sidebar and enter "nicepage2" in the Sidebar Name field. Select the third Sidebar and enter "nicepage3" in the Sidebar Name field.

Export WordPress Theme

Export the theme. In the Export dialog, enter the "nicepage_wp2" Name. Click Export.

Install WordPress Theme

Switch to WordPress Admin. Select Appearance -> Themes. Add a new theme. Upload theme. Install the theme, and finally, activate it. Click Appearance -> Widgets. You see that there 3 new positions with the names we have entered for the sidebars while creating the theme.

Add WordPress Widgets

Add the Gallery widget to the "nicepage1" position, the Calendar widget to the "nicepage2" position, and Custom HTML to the "nicepage3" position. Enter the titles and texts and select images. Click Save.

Preview WordPress Page

Preview the Page. You see the widget's content output into the Custom Sidebars. That's it!

See Also

• WordPress Plugin by Nicepage
• Installation of Nicepage for WordPress
• WordPress Menu with WordPress
• Nicepage on YouTube
• Nicepage Video Tutorials

Get Started With Nicepage

• WordPress Theme Builder