Click Here Digital


Sharing is Caring

Subscribe via RSS

Web Design Tag Cloud

$allowed_extensions $member $title 2011 ai allowedextensions amazon analytics apple attachedfiles attachedimages bad widget class name given blog blog date brands business news classes click here digital cms columns commission conflict content control creating a facebook following css data dataobject::get date format default search results design digital driving traffic east london embed embed twitter estate agent websites facebook facebook advertising facebook marketing fan pages fast hosts favicon favicon generator file is not a valid upload follow button football form future geo targeting customers google google adwords google local business centre google logo google maps google places has_many hmv if conditions if pos image inbound linking include blog entry integrate twitter internet turns 20 ip ip address javascript jquery link building livingsocial local businesses local businesses on google local business web design london london web design london web designers london web developers making money on the web menus migration mobile mobile site mobile version modeladmin mod_fcgid: http request length multiple class mutliple images new website nofollow oauth onlien marketing online ads online discounts online marketing online media online offers outbound links pac-man pageclass php warning: fopen promotions property web design property web devlopers property website random child rar real estate web design recommend recommended agency recommended agency register referral rel="nofollow" responsive rooms & studios search seo shoreditch show full fields shreditch web designers sidebar signups silverstripe silvestripe small business social media social social media social networks split strategy styles technology timeline twitter twitter api twitter api 1.1 twitter feed undefined uploadify http error url icon urlsegment userdefinedforms userforms user forms ux validationexception video vouchering vouchers web web builds web design web design development web designers web design shoreditch web design web development web developers web developers in shoreditch web developers london web developers shoreditch web development widgets wysiwyg youtube

Bad Widget Class Name Given - Our Experience with Widgets on any SilverStripe Page

Today we took widgets out of their usual stomping ground of the "blog" and introduced them into the wild of other Page Classes.

To do this:

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

And then in your template file just add $WidgetArea where you would like them to appear, and you're done! Easy.

The problems begin when you start adding widgets. We started with:

  • LatestBlogPost
  • childrenpages
  • HtmlContentWidget - (eventually replaced with "widgets_content")
  • twitter
  • youtube-1.0.0

At first, all seemed great. Except for HtmlContentWidget. The TinyMCE applet wasn't loading by default (you had to save & refresh the page first) which wasn't ideal. Then we noticed that trying to insert an image would throw up the error: "Error details: DOM.get( is null" (this has been submitted as a SilverStripe bug but never officially solved)

After some searching through SilverStripe forums we found this solution:

We removed "HtmlContentWidget" & installed the attached files ("widgets_content" & "widgeteditor") from the above link and suddenly our problems were over. Or so we thought.

After testing further, we found that when adding other widgets now, occasionally we'd receive "Bad Widget Class Name Given" It seemed to be due to the new "widgeteditor" that we had installled as part of the previous fix. It was changing the way widget IDs were handled and as such the "drag & drop" feature were no longer active and adding more than one widget often caused the "Bad Widget Class Name Given" error. That then resulted in us being able to save the page.

There are lots of forum posts on that discuss this issue, our simple solution was to remove the "widgeteditor" folder from our site, but leave in the new "widgets_content".

So far, all tests have passed and our client is happily adding widgets as I type.

Watch this space...


To summarise, we ended up by leaving the core folders & files as they, and just using the following widgets:

Mostly these are standard as downloaded from (however the widgets_content is from and we updated widgets_youtube and widgets_childrenpages slightly, as they were quite outdated)


We've just come across a bug with this still, when dragging and dropping widgets containing the tinyMCE editor, we see: " is null" and are unable to save the page.

However, this problem doesnt seem to apply to Chrome browsers.

A quick search on the web finds this:

I can see those lines used within the "widgeteditor" folder that we tried earlier, but of course that threw up the "bad class name" error. If anybody can rework those 2 lines of code into the current CMS/javascript/WidgetAreaEditor.js file, I think we could be sorted...

Posted by Ryan Badger on 18 January 2012 | 0 Comments

Tags: , , ,

Post your comment


No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments