≡ Menu

How to create custom sidebar without any coding using Thesis wordpress theme

Sometimes you would wish to have a different sidebar to be display for certain pages. For example, you may have a blog on a few topics in which you wish to have the sidebar to display different contents based on each category.

Take the example of this blog where I have a few sections. I want my “Intranet” page to display articles only intranets and nothing else. Example this page you are viewing have the custom sidebar which display the articles that I have written related to Thesis theme. If you click on other sections such as blogging, the sidebar has different content.

This function can be easily achieved using Thesis wordpress theme (version 2.1 and above) without the need to write any custom CSS.

To do this, first you need to create a Custom page so that you can have a custom sidebar being displayed on the custom page. How to create a custom page/template using Thesis have been covered in a previous article.

After you have created your custom template, to back to the Thesis Editor> Canvas. At the default “Home” button, select the Custom page where you wish to change the sidebar.

In order to have a customized sidebar, at the Grey Box on your right, view the dropdown box until you find the “*Widgets” function. Click on “Add New” as shown below:

Remember to name your widget so that you can differentiate this custom widget (if you do not name it, it will be confusing for you to identify your widget later). To name it, click on the button next to the “Widgets”:

A pop up box will appear:

In the example above, I have named the box “WidegtsFrontPage”. Then press “X” to close the box.

Your customized widget is now created. Next, you would need to have your custom page to display the custom widgets. You can accomplish this simply by using the drag and drop function in your Thesis canvas:

Open the “Sidebar column” where you can see the defaulted “Sidebar Widgets” which is the default sidebar at your site (shown in Appearance> Widgets).

Drag the default “Sidebar Widgets” to the GREY box by using “Shift” + drag using your mouse. Don’t drag to the pink box as it will cause a permanent delete of your sidebar.

After that, replace with your “WidgetsFrontPage” by “Shift” + Drag to the Sidebar column. Then click on the green “Save Template” to save the template.

You now have a custom sidebar widget but it is still empty.

To add in the contents that you want in your sidebar, go to your Dashboard> Appearance> Widgets:

You would see the custom sidebar widget that you have created shown the the red box below:

You can then add additional elements like Search, Recent Posts, Archives, text box, Custom HTML, etc from the “Available Widgets” section. It is just like how you have updated your default “Sidebar widgets” (the blue box) when you first set up your site.

Because you have already defined this sidebar widget for your Custom Page, when a visitor opens up the custom page, the visitor would be able to see a different sidebar being displayed.

Have fun creating your custom sidebar 🙂

 

If you like this, say thanks by sharing it:

Leave a Comment