I Upgraded my blog's theme and software

 

I upgraded the blog's software to the latest version of BlogEngine, v2.5. I took the chance and did a makeover using another template. I tweaked a WordPress theme to work under BlogEngine. This required updates to the HTML, CSS, JavaScript and the server .NET code. I liked the old theme, shown below but I decided to use a theme which is more quaint and mellow. This time one of the requirements was to use a white background for the posts. It's easier to display images with that background.

BlogEngine's theming framework could have been more flexible if it didn't create dynamic HTML which had no css styles. I would suggest to the developers who maintain BlogEngine to add some empty classes in the code which creates HTML. This way non developers can add the classes declarations in the css files.

 

The new features added to the blog are:

  • Use Disqus as the comment platform. The older blog used the internal comment system. I noticed a lot of comment spam displaying in the blog even though I was using Akisment & a captcha. The spam was from the same ip address so this was a determined spammer. I am not More...
separator

How I modified a WordPress theme to work with BlogEngine

The title I was going to use for this post was “How to convert a Word Press theme to a BlogEngine theme”. This blog uses BlogEngine (BE) as the blogging engine. Due to the lack of quality themes for BE, I decided to use a WordPress (WP) theme. I thought I would just be able to convert the theme to a BlogEngine theme and be done.

WordPress is written in PHP which resembles classic ASP where the code is interlaced with the HTML. I expected a WP theme would just be a bunch of HTML, CSS & Javascript files like most web site templates. It turns out that a WP theme could include a lot of PHP code. The strength of a WordPress theme lies in its ability to extend WordPress’s default functionality by adding extra options and workflow. When I looked at the theme I wanted to use with BlogEngine, I noticed all the PHP code which define what and how things display in the web page.

My first expression was that the task wasn’t going to be a straightforward conversion. My first attempt was trying to understand what the PHP was doing. Although I didn’t have experience in PHP, the code is pretty easy to read and understand. At least it’s not Perl whose syntax I hate! The problem was the code wasn’t easy to follow. The code is in many files and functions are calling other functions which are scattered in several files. I needed to trace and step through code and have breakpoints. What do PHP developers use as an IDE? First thing I did was check JetBrains.com and examine their PHP offerings. I know they develop good IDE’s and I LOVE their Resharper tool. I found an IDE called PhpStorm.

I set up a php develpment environment on my Windows box. Installed PHP under IIS. Installed WordPress and unzipped the theme in it and activated the theme. Installed phpStorm and the first thing I did was look for the debugger. PhpStorm doesn’t come with a debugger of its own! Not like Visual Studio. You have to download and install a third party debugger extension. I used xdebug. I had to do some configuration tweaks and finally got it working with breakpoints and single stepping. Cool! I actually thought that there’s no PHP IDE which works like Visual Studio. After trying to follow the PHP code I came to the conclusion that this is going to be a ton of work. Converting the theme and code into .NET, user controls and trying to also understand how BlogEngine theming and code works. Getting dissapointed now. So I scrapped this method.

I decided to use a completely different approach. I am actually only interested in the layout produced by the theme. Just the HTML and CSS. So I decided to let PHP do its work and just grab the page’s html & CSS source. However I also need to understand how BlogEngine theming method works. I read the theme documentation and got a good idea of the different user controls. So I grabed the html source and converted it into a master page minus the main content. The different sections on the right side are made by different BE widgets. I modified them a bit to use the WP theme. WP has a similar concept of widgets but I just grabbed their html as well and plugged into The BE widgets. BlogEngine’s posts and comments reside in user controls. I modified these controls to use the WP theme html and css classes as well. What I did is completely ignored all the PHP code and just get the actual layout. I used Firebug to find which CSS classes where used and copied them over to BE. I noticed a lot of the CSS attributes where not used in the HTML tags. The theme needs to be cleaned.

While BlogEngine does support themes, the themes are not isolated and do not work without supporting code. There’s code in BlogEngine which spit out css and html. I didn’t like this about BE where they have things hard coded like that. There was no way to fit the WP theme without modifying BE’s code or at least not for the theme I am using. I am guessing the reason why all BE themes resemble each other is because of the theme bounderies and limitations BE imposes on the theme developer.

I managed to get the theme and BE working together. The result, and probable issue, is that I won’t be able to do an inline BE upgrade because of all the custom code. This might not be a big issue because blogging software do not change often. If the next upgrade does have a functionality I need, I will take it apart and plug manually into my system. The most challengin part was the threaded comments. A reply to a reply will actually display under the reply with some indentation. I added an anti comment spam technique and eliminitated the use of a captcha. I will explain what I did in a future post.

I did encounter a bug in BE where it breaks all the CSS conditional comments. I reported the bug and a BE developer released a newer version.

separator

Why I chose BlogEngine as the blog platform?

When deciding on a blog platform, I had two clear options. It either be on WordPress (WP) or one which is based on ASP.NET. WordPress because it's the widely popular blogging platform, with the most support and the largest collection themes & widgets. (Just learned that Microsoft is shutting down Live Spaces, one of its online blog platforms and migrating the users to WordPress). WP’s drawback is it's developed in PHP, a language I don't program in and which I am not interested in learning & using.

OR

An ASP.NET based blogging platform because I know ASP.NET very well, in case I need to do any custom work, which I did for this blog. I decided to go with an ASP.NET based blog engine and chose BlogEngine (BE). The other candidates where dasBlog & Subtext.

My blog platform requirements are:

  • widely used and has good active support
  • supports themes
  • supports threaded comments
  • has measures against spam comments (comment moderation, Akismet, .. etc)
  • being actively developed. Meaning last build is not more than a year ago.
  • supports protocols for publishing using clients like Windows Live Writer

 

BlogEngine seems to best fit these requirements. One issue I found with BlogEngine is the lack of cool themes. All the themes I found were simple, look pretty much the same and quite boring. A lot of the BlogEngine based blogs use the default theme which comes with BE.

In my next blog, I will talk about the WordPress theme I used for this blog and how I modified it to work in BlogEngine.

separator