Widgets on selected pages

• 

  rogersessions · Member · Jan 16, 2012 at 5:47 am

  • Copy link
  • Add topic to favorites

  Can I have some widgets on some pages but not on other pages? I do have CSS support, if that helps.

  I’m using the twenty ten theme, if that makes a difference.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 16, 2012 at 5:59 am

  • Copy link

  This is sort of a complex thing. Yes it can be done through CSS, but each individual page has to be targeted by page ID, and then the widgets you do not want on that page have to be removed by targeting them by ID where the selector stack would look something like this.

  .page-id-6 #text-widget-7, .page-id-21 #cat-widget-4, .page-id-4 #archive-widget-2, .page-id-9 #image-widget-21, .page-id-11 #links-widget-2 {
  display: none;
  }

  All the above is just a sample and is not meant to be taken literally as I just made up the IDs and such out of thin air. It just shows the pattern.

• 

  thesacredpath · Member · Jan 16, 2012 at 6:11 am

  • Copy link

  I should have mentioned also, that if you wanted to do something like exclude the categories and archives widget from all static pages (about, etc.) then you can do it by page class such as the following.

  .page cat-widget-2, .page .archives-widget-2 {
  display: none;
  }

  Again, that is all made up classes and IDs.

• 

  rogersessions · Member · Jan 16, 2012 at 6:41 am

  • Copy link

  This is helpful, thanks! I wonder if it might be easier to go from the other side, in other words, to exclude all widgets from all pages, except put this widget on this page and this widget on that page. Is that possible?

• 

  thesacredpath · Member · Jan 16, 2012 at 7:02 am

  • Copy link

  No, that doesn’t work well. The “display: none;” will dominate.

  Make a list of page types and then figure out which widgets you do not want to show on those pages. Then you can start to organize and write the CSS rules.

  For broad page types you would have:

  home
  single (single post pages)
  archives
  category
  tag
  page (static pages like about)

  If you want to get more specific with static pages, then you have to view the source code for each of those pages and in the opening body tag get the class/ID for the specific page which might be something like this: page-id-119 .

  Classes, when you write them in the CSS are proceeded by a period like .page-id-119 .

• 

  rogersessions · Member · Jan 17, 2012 at 8:34 pm

  • Copy link

  Thanks! I’m starting to get a feel for the possibilities here.