BlogEngine.NET is rapidly becoming popular blogging platform among .NET community and among general bloggers too. Right now, it is in process of gradual development and has crossed one year of it launch.

Like many other .NET developers, I too use it. In fact, you are reading this post on  the blog that is running BlogEngine.NET.

As usually observed with many other open source projects, blogengine.net also faced rapid development and along with it some incompatibility issues among different version extensions.

One of them is that older themes don't support the new Widget management Interface. Post 1.4.5 version of blogengine.net have a theme independent Widget management. Before this feature was added, A widget was added using embedded ASP.NET tags which appear some thing like this

<blog:WidgetName id="widgetname1" RunAt="server" ... />

in the theme master-page file named : site.master

As you can easily perceive, this type of management has its own short comings and added inconsistency among different themes along with difficulty in managing widgets.

So, the BlogEngine.NET developer community quickly came up with a solution and added a feature called WidgetZone which provides support for UI based management and presentation of Widgets and there configuration. The widget zone allows you to dynamically add widgets, edit there configuration, stack them in a order, and remove a widget.

Now, what we do, if we have our favourite theme which makes our blog look decent and professional and we are get used to how our blog looks with that theme, but since our theme is Pre V1.3 version theme, it will certainly lack the new WidgetZone feature and you most likely want it desperately in your favourite theme. Most easiest way is to download and install a new version of theme. That's it!! :-)

But wait this is Open source, so it is more likely that the theme designer will make the theme, submit it to community and forgets about it. :-(

So, lets see what we can do to make our old theme be able to use the new WidgetZone feature.

First lets see, How a widget zone is declared. It's quiet simple:

<blog:WidgetZone runat="server" />

see, quiet simple :-)

Now, lets see how we can alter ASP.NET code to accommodate the new feature.

I'm taking the example of Cogitation theme, that I use. It is a pre V1.4.5 release theme and misses Widget Zone feature.

Old ASP.NET markup

<div id="leftmenu">

<!--Load the Search Widget-->

<div class="box">
             <blog:SearchBox ID="SearchBox1" runat="server" />
</div>

<!--Load the CategoryList Widget-->

<div class="box">
              <h1>Categories</h1>
              <blog:CategoryList ID="CategoryList1" runat="Server" />

</div>

<!--Load the TagCloud Widget-->
<div class="box">
              <h1>Tags</h1>
              <blog:TagCloud ID="TagCloud1" runat="server" />
</div>
..
.
.

//some more code

</div>

<div id="main">

..
. // more code 

Now, we will see, how to change this code. First, locate the line

<div id="leftmenu">

Now, we will add a line below this line, but before that we will disable the code already present. But, we will not delete it, we will comment it out and add the new code on top of it.

<div id="leftmenu">
<!-- disabled -->
<!--

<!--Load the Search Widget--><div class="box">
             <blog:SearchBox ID="SearchBox1" runat="server" />
</div>

<!--Load the CategoryList Widget--><div class="box">
              <h1>Categories</h1>
              <blog:CategoryList ID="CategoryList1" runat="Server" /></div>
<!--Load the TagCloud Widget-->
<div class="box">
              <h1>Tags</h1>
              <blog:TagCloud ID="TagCloud1" runat="server" />
</div>

-->

</div>
..
.
.

Now add the WidgetZone tag on top of disable code...

<div id="leftmenu">

<blog:WidgetZone runat="server" />

<!-- disabled -->
<!--

<!--Load the Search Widget--><div class="box">
             <blog:SearchBox ID="SearchBox1" runat="server" />
</div>

<!--Load the CategoryList Widget--><div class="box">
              <h1>Categories</h1>
              <blog:CategoryList ID="CategoryList1" runat="Server" /></div>
<!--Load the TagCloud Widget-->
<div class="box">
              <h1>Tags</h1>
              <blog:TagCloud ID="TagCloud1" runat="server" />
</div>
-->
</div>
..
.
.

save the new file, upload this file to its theme folder on your blog server and check out your blog. If every thing goes right you will see a widget drop-down box and Add button in your Sidebar

( You will need to be signed in as administrator to see this )

From, there you can select the widget and add it to your page easily. 

As you can see, the Twitter widget is loaded, and is configured now

Hope this post helps you to use your BlogEngine.NET easier! If you encounter some problem, the kindly post your problems in comments :)

Further Reference: BlogEngine.NET Widget documentation