Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

How to Install a Widget - BASIC Tutorial


Go to End


7 Posts   4749 Views

Avatar
ianbt7

Community Member, 6 Posts

4 November 2009 at 4:34pm

I am sure others have had the same question as me without wanting to appear ignorant enough to ask it. I will play that role today.

Would someone please tell me how to install an editable widget tab on normal pages in the CMS. The instructions (http://doc.silverstripe.org/doku.php?id=widgets&s=widgets) are totally ambiguous because after following them exactly--still no editable widget tab in my CMS.

1) First, I unpacked several widgets along with the blog module. Dev/Build went successfully. (I'm using the 'dreamy' theme, by the way.)

2) Next, per the documentation, I added the exact code to /public_html/mysite/code/Page.php

<?php
class Page extends SiteTree {
public static $db = array(
);
public static $has_one = array(
);
}
static $has_one = array(
"Sidebar" => "WidgetArea",
);
function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab("Root.Content.Widgets", new WidgetAreaEditor("Sidebar"));
return $fields;
}

3) Then, and this is where I am confused, I add the $Sidebar to public_html/themes/dreamy/templates/Includes/SideNav.ss

Here's how it looks:

<h3>
<a href="$Link" title="Go to the $Title page" class="$LinkingMode">$MenuTitle</a>
</h3>
<ul>
<% control Children %>
<li><a href="$Link" title="Go to the $Title page" class="$LinkingMode">$MenuTitle</a></li>
<% end_control %>
$Sidebar
</ul>

4) Then, I do a dev/build to check-- Still, no editable tab, which is strange because to the best of my knowledge, I followed the directions.

Could someone please help?

Thanks,
Ian

Avatar
Willr

Forum Moderator, 5523 Posts

4 November 2009 at 5:08pm

Hi Ian, and welcome to the community.

class Page extends SiteTree {
public static $db = array(
);
public static $has_one = array(
);
}
static $has_one = array(
"Sidebar" => "WidgetArea",
);

You only need to define the $has_one once. Your code should always be contained within the class's ' { } ' as well (currently its sitting outside the class so silverstripe doesn't see that code.

<?php 
class Page extends SiteTree { 
   public static $db = array( 
   ); 
   public static $has_one = array( 
   "Sidebar" => "WidgetArea"
   ); 

function getCMSFields() { 
   $fields = parent::getCMSFields(); 
   $fields->addFieldToTab("Root.Content.Widgets", new WidgetAreaEditor("Sidebar")); 
   return $fields; 
}

// see how this last } is AFTER all the code ^ 
}

After you change those, run the dev/build, reload the cms and you should have the widgets tab. In future versions Widgets are probably going to be built into the core so you won't have to write any code like that :D

Avatar
ianbt7

Community Member, 6 Posts

6 November 2009 at 9:50am

Thank you, Willr! That was immensely helpful! It works now.
-Ian

Avatar
ianbt7

Community Member, 6 Posts

6 November 2009 at 10:37am

Thanks again Willr!

I have one other incey-winsy question about how to get the Widget-containing sidebar to actually appear on the Page. I was so consumed with the CMS Widget tab that I forget to ask about what the support doc refers to as "calling" $Sidebar.

So, now the Widget tab appears on CMS, but no sidebar containing widget (I have it set to google ads) on the actual Web site.

1) Using Blackcandy (which is a great theme), I go to blackcandy/templates/includes/Sidebar.ss and

2) I insert $Sidebar before the closing </div> near the last three lines of code because that's what the support doc says:

"Then in your Template you need to call $SideBar whereever you want to render the widget, Eg for blackcandy I put this above the closing </div> themes/myThemeName/templates/Includes/Sidebar.ss - $Sidebar"

3) So, it looks like this in my blackcandy/templates/includes/Sidebar.ss:

</ul>
<div class="clear"></div>
</div>
<div class="sidebarBottom"></div>
$Sidebar
</div>

4) dev/build ... and nothing shows on the Web Page.

Again, I am sure this dysfunctionality is related to a disjuncture in my understanding of the instructions on the support doc.

Thanks!
Ian

Avatar
MartinPhone

Community Member, 57 Posts

27 September 2010 at 12:04pm

Hi, I'm in precisely the same position and would be grateful for any tips! Did you ever get it working?

Avatar
MartinPhone

Community Member, 57 Posts

27 September 2010 at 12:24pm

FWIW, I put the $Sidebar just in a <div id="Sidebar" class="typography"> and put that at the point in Page.ss that you want your sidebar. (Not in any other files.) A bit of CSS and it's looking how I imagined it.

I get the feeling it's not the 'right' way, but the documentation is predictably vague...

Avatar
Bauer-CTU

Community Member, 10 Posts

29 September 2010 at 7:42am

MartinPhone,

Yes that is the right way. No Sidebar.ss needed and just drag, drop & re-order your widgets in the CMS.