How to create sidebar and set up for page?

Albert · May 2014

This topic is for all those who want to create sidebar for right page and don`t know how to do it

Below you have step by step explanation how to create sidebar and set it up:

1 step: Please go to Theme options > Sidebars > General section and create sidebar(s) that you need. After that click "Save changes" what is really important.

2 step: Go to Appearance > Widgets section and already created sidebar from step no. 1 will be waiting for you. Just put right widgets into sidebar.

3 step: If you want to select this sidebar for page, then please go to Pages section and edit page for which you want sidebar. Under Muffin Builder section you have 2 values:

3.1) Layout (choose if you want sidebar on left or right side)
3.2) Sidebar (select already created sidebar for page)

After above 3 steps your site will get sidebar

Enjoy!

raphael3 · August 2014

Hi there,

Thanks for posting this, as it helped me to create my sidebars today. I would like to point out what is either a bug in the sidebar code, or simply a missing step in your documentation.

If you want to create a sidebar today, you have to click "Hide Title Area" in the page attributes. You cannot have both a sidebar and a title, I verified this today and it's easily reproducible.

Cheers!

Albert · August 2014

Hi @raphael3,

we already checked what you wrote but all works fine. You don`t need to click on "Hide Title Area" button. Sidebar can be created the same way as we described above. If it does not work well in your case, it means the problem is somewhere else (extra plugins, not complete wordpress, not complete theme files or other).

rodo2fo · September 2014

Hi,

This post helped me to create sidebars for others pages but I don't no why is not appearing sidebar on home page ("your recent posts" page).

Can you help me?

Albert · September 2014

@rodo2fo Did you selected sidebar for homepage? If you did it and won`t work, then please send us whole description on which page you want to get sidebar and send us whole access to your wp dashboard on pm and we`ll have a look on it.

rodo2fo · September 2014

I don't know exactly how, but I made it work. Thanks!!!

ericaeide · November 2014

How about getting woocommerce product pages and category pages to use a sidebar as your demo does? Mine are defaulting to full width. Thank you.

ericaeide · November 2014

Sorry, nevermind. I found out how to do it.

Albert · November 2014

@ericaeide If you found answer on your question can you share with other users what exactly you did to get it? Thanks in case

ericaeide · November 2014

Sure, I discovered the built-in WooCommerce sidebar in the widgets screen, which said as long as there were widgets placed into it, WC pages would display that sidebar.

Albert · November 2014

Thanks for the info @ericaeide

davevalkenburg · January 2015

Hello,

I'm trying to put the sidebar on one of the pages, but it doesn't work.

How do i get the sidebar to work on the homepage. On other pages it doesn't work either, so (probbably) i'm doing something wrong with the settings to get the sidebar work.

I followed the steps above, even put the whole thing to "force" but the sidebar (text with images) doesn't show.

Can you help me out on this?

Albert · January 2015

@davevalkenburg Where is the url to page where you setup sidebar and does not work?

Iladevi · March 2015

I created sitebar without problems, but how can I define margin, padding or background color for sitebar? Thank you very muchforyour help.

Albert · March 2015

This can be done within custom css only because we do not have any options for that. If you want to customize your theme, then please have a look at http://themes.muffingroup.com/betheme/documentation/#theme-customizations where this was explained.

dn-p · April 2015

Is there a way to display the sidebar above the content on mobile devices? Like copying page.php, renaming it and copying the <?php get_sidebar(); ?> above <div class="sections_group">? I run woocommerce and on there are product filter on the shop page (in the sidebar), which would make sense to display at the top, when viewing on mobile.

Any ideas?

Albert · April 2015

@dn-p This is unfortunately not possible. Content always shows first.

erkintazh · May 2015

Is it possible to make menu in sidebar and fix it? I mean that if i scroll, menu (secondary) will be scrolled too. Like here http://biosfera-club.ru/fitnes/

Albert · May 2015

@erkintazh No, it is not possible unfortunately.

erkintazh · May 2015

may be you can advice some plugin? (

Albert · May 2015

@erkintazh Sorry but we do not know any plugin which may do this.

erkintazh · May 2015

I INSTALLED Q2W3 Fixed Widget (PLUGIN) WORKS GREAT!

nEXT QUESTION, WHEN I PUT ROW ID the scroll effect is not smooth. Tryed to turn on

(one page) in options of pages but didn't work, what you can advice?

Or again you don't know? ))

Albert · May 2015

@erkintazh Did you tried to deactivate all extra plugins and check if then smooth scroll works? If this won't help, then try to add extra "scroll" class for menu item which is responsible for scrolling.

erkintazh · May 2015

pls where i can getthis extra scroll class? may be some document index where i can read it?

Albert · May 2015

@erkintazh This is a class code that must be used for item where you want to do this:

class="scroll"

erkintazh · May 2015

honestly couldt make it couse i'm zero in css. May be you can show link to tutorial. i'm zero in css and html (

erkintazh · May 2015

may be in demos there is smth same, may be you can say in what demo i'l try to do it.

Albert · May 2015

@erkintazh Sorry but we don't understand why you create html elements if you don't understand css? If you don't know how to do it, please contact with your website developer then.

Thanks for understanding!

erkintazh · May 2015

ok, i understand you, i just wanted to make scroll but it didn;t worked, than you said second way is css class=scroll. Sorry for disturbing you.

Albert · May 2015

@erkintazh Yes, this is what we exactly mean. If you create something like link, and you want this link to work with smooth scroll you must add class="scroll" for element. That's all we mean.

livelinerz · June 2015

I have tried different ways to make the sidebar work for the blog post pages.
It isn't showing for me when I am editing the page and I select right side bar layout, no drop down options show up for the sidebar drop down so I cannot select one (I have one created in widgets).
I also tried to add the sidebar widget name in the theme options and for post select the layout with right side bar.
Thanks.

How to create sidebar and set up for page?

Comments