Kentico Developer Issue 2 by Not At All Strange

Kentico Developer Issue 2 October 2009

Prematurity and the Birth of a magazine Candice Pendergast Smart Search Presentation Ralph Spandl From Wordpress to Kentico Tutorial Series

002 Content

Features 12 THE BIRTH OF A MAGAZINE Candice Pendergast takes us through the unlikely pattern of events that led to the birth of Kentico Developer magazine.

16 SMART SEARCH PRESENTATION Ralph Spandl looks into the smart search functions of Kentico 4.1 with practical examples of how it can be used.

20 FROM WORDPRESS TO KENTICO Richard Pendergast kicks of Part 1 of the Wordpress to Kentico tutorial series with repurposing a theme.

Content 003

Regulars 4 MY DESK Richard Pendergast is looking to get social, to kick off discussions, and to start building a team of regular contributers.

10 NEWS An update on trees for bugs, new faces at Kentico, Kentico Site of the Year, and other Kentico news from this month.

26 TIPS AND TRICKS Matt Lee explains several of the customisations available for the Kentico WYSIWYG editor - the FCK editor.

28 SHOWCASES Candice Pendergast begins profiling some of the latest and greatest sites using Kentico, and calls for submissions.

Published by Not At All Strange Pty Ltd ABN 91 125 365 979 PO Box 353 Menai NSW Australia Enquiries Subscription enquiries: sales@kenticodeveloper.com Editorial enquiries: editorial@kenticodeveloper.com Advertising enquiries: advertising@kenticodeveloper.com Copyright Kentico Developer 2009 www.kenticodeveloper.com

004 Editorial

Richard Pendergast @kenticodev richard.pendergast@kenticodeveloper.com

My Desk Candice got me thinking when I read the story she put together for this month’s issue. She said that “the idea behind the magazine was that it would provide a focus point, something to get people talking and to bring them together.” But I’m beginning to understand that at a time when social networking is becoming mainstream, we should just be looking to tap into the discussions that are already taking place, and to help bring them together so others can get involved. Kentico are putting themselves out there, actively participating in Twitter discussions, interacting via Facebook, hooking up via LinkedIn, and blogging via the Kentico DevNet website. Count on us to begin doing the same. We’re setting up shop within the various social networks our readers frequent, and inviting comment. There may be teething issues while we learn the ropes of each platform, but we want to be where our readers are, and there when they have something to say. When we first kicked off Kentico Developer, I had hoped that there might be value in me passing on my

experiences pulling together nearly 100 sites, and sharing the lessons I’ve had to learn the hard way while doing it. I’m just one developer though, and what I’ve come to recognise though is that by tapping into our readership we can share the experiences of more than 700 Kentico partners and the lessons they’ve learned pulling together over 4000 websites. Ralph and Matt already add depth and credibility to the team through their involvement, but now we’re looking for others to get involved. We’re seeking contributions - interviews, showcases, gossip, news, and opinion. The next couple of months will see us producing the formative issues of Kentico Developer magazine, and we want to know what you want from us, what you want us to be. You see I still believe in what we initially set out to achieve. I’m still keen to “provide a focus point, something to

get people talking and to bring them together”, but I no longer believe that this is best served by me just talking, and so I’ve started listening. Send anything you’d like published to me or any of the guys listed on the contributers page. Email us if you want to follow up on something of interest, hassle us on Twitter or Facebook if you find something you don’t like, and comment on the website if you feel we could do something better. Get involved - I’m looking forward to hearing from you. Richard Pendergast Editor

Save on your content management When we went to look for a content management system for our customers we had two things in mind: it should be flexible for our customers as well as us, and it should be good value for money. That’s why we like Kentico CMS. And so do our customers. It’s so flexible that we were able to integrate Microsoft Commerce Serve, creating a powerful e-commerce platform. But it’s also so flexible and easy to learn that we can create a new web site in two weeks. So why don’t you contact us and see how we can help you save your piggy?

Knowledge. People. Solutions.

T: + 31(0)6 - 497 819 21 E: contact@avivasolutions.nl W: www.avivasolutions.nl W: blog.avivasolutions.nl

Internet & Commerce - Business Intelligence - Information Worker - Application & Software integration - Custom Solutions & Software factories

006 Contributers

Contributors

Richard Pendergast After years as a solutions architect, Richard has worked with various teams delivering nearly 100 Kentico based websites, and although new to the magazine business, Richard brings with him the passion required to drive the production of Kentico Developer. This month Richard walks us through the first steps in re-purposing a Wordpress theme, and applying it to Kentico.

Candice Pendergast A journalist by trade, Candice has worked with countless small businesses using Kentico to fuel their online strategy. As Features Editor of Kentico Developer, these two powers combine to bring you interesting and topical stories and news each month. This month Candice profiles Not At All Strange, and takes us back to the conception and birth of the Kentico Developer magazine.

Contributers 007

Ralph Spandl Ralph Spandl is the founder of r42, one of the original founders of Quattrocento, and has been arcitecting web based solutions longer than most of us have known about the web. Ralph regularly contributes to the Kentico Marketplace, and writes about his contributions within Kentico Developer. This month Ralph walks us through Smart Search presentation and Universal Pager transformations.

Matthew Lee Matthew Lee is one of the key developers behind the 70 or so sites built by Reed Business Information Australia on the Kentico platform. This depth of experience is what allows Matt to speak form experience when putting together his monthly compilation of Tips and Tricks. This month Matt explains several of the customisations available for the Kentico WYSIWYG editor - the FCK editor.

Kentico Developer is always on the lookout for guest contributions. Do you have extensive knowledge of Kentico? Do you have any tips and tricks youâ&#x20AC;&#x2122;d like to share? Are you someone capable of writing a tutorials? Are you interested in speaking with other developers and designers and pulling together anything from a gossip column to a fully-fledged interview? We are interested in receiving any material relating to Kentico - from simple guides, or tips and tricks, through to full length feature articles.

Writing for Kentico Developer demonstrates thought leadership, and your talent in this space. Regular contributions promote you within the Kentico world in a way that would be otherwise very difficult to achieve. We are thankful for any contributions, and hope to encourage interaction and to promote discussion within the community. Send any material, expressions of interest, or questions regarding contributions to: contributions@kenticodeveloper.com

Contributers 009

010 News

News New trees, new people, and the chance to be a Kentico star. Yep, there’s plenty happening in the news this month. New additions to the Kentico team If you’ve been keeping up with the Kentico blog lately you will have seen that there have been a couple new faces introduced this month. And notably, both from Microsoft. One of these faces belongs to Michal Neuwirth who will be taking up post as the new Kentico Product Manager. Now in charge of Kentico product strategy and marketing Michal was previously an ISV Developer Evangelist for Microsoft Czech, a position which he held for around a decade. Now Michal is charged with keeping us Kentico developers and partners up to date with any of the new Kentico features, and for that matter will also be taking requests. The other new face is that of Thom Robbins who joins Kentico as a Product Evangelist, responsible for spreading the word on Kentico and educating its users. Thom has an experience-rich background coming off nine years with Microsoft where he was one of the key people behind the success of the .NET framework and Visual Studio. We’re excited to see what’s in store for Kentico with these two new hires – so here’s to the future.

Trees for bugs I’m loving this initiative from Kentico – 41, no 42, no 46 trees to go in so far a number which I am sure I will have to update before we publish this issue (and I did, we’re up to 50 now!). It’s become a bit of a contest on all fronts, with the inhouse Kentico developers competing for who’ll plant the least trees meaning their parts have the least bugs. According

to Petr Passingr from Kentico, there’s Mr Bug-Free with only 5 trees to plant and a budding environmentalist that heads up the pack with 13 trees to plant. What’s more, the initiative has come somewhat of an international bug Olympics, which the US having spotted the most bugs so far with 12, closely followed by the UK with 11 and my motherland Australia taking up third with 5 bugs reported. The trees will be planted on Saturday 7 November in the Czech village of Snovidky, with the species of trees selected with the purpose to restore vegetation in the area. Keep your eye out for a coming issue of Kentico Developer which will include a full length feature on the Trees for Bugs initiative and the planting of the trees.

Did you know? The guys over at Kentico are into their social networking. You can become a fan on Facebook, join the Kentico Twitter Twibe, follow Kentico on Twitter, or become a member of the Kentico LinkedIn group. ȖȖFacebook Fan Page http://bit.ly/4s95bu ȖȖKentico Twibe http://bit.ly/3N916V ȖȖKentico on Twitter http://bit.ly/3SgPYB ȖȖKentico LinkedIn Group http://bit.ly/3HShwQ

News 011

In the Marketplace Rich media is a must these days on any website which makes these two Web Parts added to the Marketplace recently by Little White Cloud come in really handy. The first is a Flash Video Player, which allows you to host videos on your own site as opposed to embedding them from a site such as YouTube. What this Web Part does is allow you to wrap customisable playback controls around the Flash video file and customise the player’s size, behaviour and playback controls. Then there is the Flickr Slideshow Web Part which makes it easy to embed an interactive slideshow into your site. All that’s needed is the ID number of the photo set that you want to create a slideshow for and you’re away. Best of all, both of these Web Parts are free and are available in the Kentico Marketplace now. You can read more about the new additions at: ȖȖThe Kentico Marketplace http://bit.ly/3fnFVK ȖȖLittle White Cloud http://bit.ly/1LgfgT

Is your site Kentico Site of the Year 2009? All Kentico developers sit up and take note – time is running out for your submit your site for its chance to be named Kentico site of the Year 2009. And according to Lenka Navratilova, Kentico’s Partner Program Manager, the competition will be an exciting one. “There are already over 4000 sites running on the Kentico CMS, some of which are awesome and worth presenting”, says Lenka. “We want to give our partners and clients a chance to let other people (and potential clients) know how good their work is.” With the deadline for submission extended to 31 October, entrants can submit their sites into one of a number of categories, such as Best Healthcare site, and Best Education site and can be nominated for reasons like best graphic design, largest site and best integration to name a few. “In determining the finalists, we will consider the

technology that was used for web site development, interesting tools and new features as well as the challenges the developers had to face,” says Lenka. “We are very excited to learn about new interesting web projects completed in Kentico CMS.” “We will choose 3 finalists in each category and create an online gallery on the Kentico website. Anyone can take cast a vote for the website of their choice,” adds Lenka. “There will also be as global winner who will be crowned Kentico Site of the Year 2009, which will be chosen through the voting and the categories.” Make sure you visit the Kentico Developer site (http:// bit.ly/2QTJpe) on November 1 to see a breakdown of the finalists, and watch out for the next issue of the magazine which will include a profile and a minin-interview of each finalists. ȖȖSite Submissions http://bit.ly/I90rN

012 Feature

Story by Candice Pendergast @candypendo candice.pendergast@kenticodeveloper.com

Prematurity and the Birth of a Magazine In a frank and confronting piece, Candice explains how Kentico Developer is, by and large, the result of her daughter Charley being born 11 weeks premature.

The beginning of 2004 saw Rich and I in well paid careers, with few commitments, few concerns, and a nice apartment in the centre of the city. The beginning of 2005 on the other hand saw us married, with a little girl, a house in the suburbs, and struggling to make ends meet. It’s a common story, one that most people know. The birth of a child is a big change for anyone. The birth of a child with special needs is earth shattering. I remember clearly a conversation I had with a nurse on what was supposedly a routine trip to the hospital for a checkup. She’d just let me know that I’d have to stay overnight for observation, and I was concerned that this might get in the way of the new job I was supposed to be starting the following week. Her response was a wake-up call and something I’ll never forget, “Honey, you’ll have your baby in a week. Ring and cancel”.

Your life changes at that point, and not in any of the ways you’d planned or expected. We moved closer to our families to draw upon the support we knew we’d need. Rich stopped working for three months, and we drove to the hospital and back (a two-hour trip), twice a day with packed lunches. The thing that really got us through the days of not knowing if Charley would pull through, and if she did what complications she’d have to live with for the rest of her life, was the support of the other parents in the same situation. Those other parents were given the same handouts laying out the same black and white percentages of how many babies die, how many have hearing and sight defects, how many go on to have muscular distrophy and other issues. When we eventually left the hospital, the reality that I would not be able to work began to set in, and with

it came a sense of helplessness as our financial situation deteriorated, and a sense of loss as the career I’d spent so long nurturing began to disappear. I needed a focus, and the lack of information we’d been able to discover on the web at that point provided me with one. I began to blog about our experiences, and over time, as others began to notice what I was doing and ask for help doing the same, the idea of putting together a self-serve blogging network for mothers evolved and with it mumspace.net was born. We developed using WordPress MU, which we heavily customised to allow for connecting with friends, forming and managing groups, hosting photo galleries, and running discussion forums. This was before the days of Ning, BuddyPress, and others, and what we were doing began to gather interest fairly quickly. Over the next 12 months, with

Feature 013

“It’s an awful feeling when you put your heart and soul into something and it begins to erode and fall apart.”

Charley and Candice - the two female faces behind Kentico Developer magazine.

little to no marketing or development budget, mumspace.net became a thriving community of blogging mums. So now we faced a new dilemna. We’d always said that mumspace.net would be free to users, and that it would be all about supporting other mothers, but the work involved in building and running the site was becoming a drain on our already tight budgets. We were helping others build their business without having anything of our own. This led to us setting up Not At All Strange, a company initially put together with the idea of building and deploying white-labelled social networking platforms.

We thought we were onto something. We were open sourcing everything at a time that others were still considering it. We were tapping into social networking API’s before the days of Sign in with Twitter, and Open Social. We networked, we marketed, we worked really long days and even longer nights, but without being able to dedicate our time to it fully, we were swamped very quickly by newcomers to the space, and found ourselves turning down offers of corporate sponsorship because we did not believe we could deliver the quality of service these sponsors would require. It’s an awful feeling when you put

your heart and soul into something and it begins to erode and fall apart. We were building something, but it was becoming obvious that we would not be able to continue with it. It tears you up, and it was hard on our marriage at a time when the company gave us a dream that allowed us to break out of the everyday that saw us poor, lonely, and feeling like we would never amount to anything. As it so happened though, our work with mumspace.net didn’t go unnoticed. We’d always been approached by businesses, particularly small businesses, to help them with their online strategy and to assist than with building their websites, and while we resisted going down this road for a long time, believing that this is not where we wanted to go, the loss of direction that came with dropping of mumspace.net opened up to new ideas, and we jumped into it with a passion.

014 Feature

“Ironically, our solution came in the form of a battle with another consultant.”

Couldn’t have planned it better - a writer and a nerd come together to make the ideal team for the launching of a developer magazine.

The initial projects that we took on were simple, brochureware style sites. The designs were simple and the technical requirements were next to non-existent, so having worked so heavily with WordPress in developing mumspace.net, it was the obvious choice. And it worked for the most part. Being open source you could usually find plugins, and when we needed help there were a plethora of developers you could call on. But as the work we took on became more complex, we started to run into problems. The first and biggest of these problems was customisation. WordPress out of the box was great if you just wanted to blog. Some of the plugins were nice too – nicer still if you paid for them. But unless you wrote it yourself, anything extra you

wanted to do was unreliable. Our developers would find themselves playing around in someone’s sloppy code, and Rich would spend most of his time fixing things. On multiple occasions we would spend hours fixing code, realising by the end that it would have been easier and quicker to write the thing ourselves. Support was nonexistent and eating up our profits and it was becoming difficult to predict the length of a project. Ironically, our solution came in the form of a battle with another consultant. A new client of ours had also hired a management consultant who was on board with another CMS - Business Catalyst. Having completed another site for this client, he wanted us to create a portal that would firstly make a large amount of information available to a varied audience, but

also to integrate a particular payment gateway and allow for donations. Unfortunately, Business Catalyst is a hosted solution, and the payment gateway work was work that we would therefore be unable to do ourselves or to guarantee. The requirements tied to the project were much of the same. This left us in a nasty position. Business Catalyst was being pushed onto our client by the management consultant, but we weren’t convinced it was the right platform for the job, and not wanting to go down the same heavily customised path we’d been down before, we needed a solution fast, or we needed to walk away from the project. It was around this time that Rich had started working with Reed Business Information, the largest publisher of sites using the Kentico CMS, and the architecting of a new unified codebase built almost entirely upon Kentico had exposed him to the real nuts and bolts

Feature 015

of Kentico, and he was sold. The software was perfectly suited to what we were doing, and appeared to be ideal for some of the other sites we were working on, so we purchased our first server license, sold the idea to the client and put our first Kentico-based site live in November 2008. The next phase of Not At All Strange saw us using Kentico for all of our sites, and gradually migrating almost all of our existing sites to Kentico. We built brochureware, directories, and e-commerce sites. We’ve integrated payment gateways and 3rd party systems, tapped into external APIs, and rendered output graphically via Google Maps. I guess what happened next is something that we should have expected, but nevertheless it came as a very cool surprise to us both – people and companies we did not know and that we’d had no prior dealings with began approaching us for ideas, and to discuss techniques regarding Kentico development. This kind of feedback has to make you feel good, and the frequency of it started kicking off new ideas. At this point Kentico Developer magazine came about as an almost natural progression. We’d always wanted to start a Kentico users group to allow us to get in touch with other developers and designers working with Kentico, and begin to share ideas and to discuss best practices. Finding these other developers and designers though, and engaging them enough to encourage them to participate proved to be something else entirely.

Coming from an open source background, it feels weird to find the exact opposite problems we used to face. Open source software has an awesome community and really crappy support. Enterprise software has awesome support and an almost non-existent community. The idea behind the magazine was that it would provide a focus point, something to get people talking and to bring them together so that user groups could begin to form around the discussions. We were simply looking to pull together a similar community to that we were used to. Since then though the magazine has taken on a life of its own, and the company that we started to develop social networking solutions has shifted focus entirely. We now provide Kentico training and developer support, and that’s all we do. Our training courses have taken off, there’s more call for our consulting services than we have people, and we have a couple of things in the pipeline that I’m really looking forward to rolling out. It hasn’t been a smooth ride though. We’ve had to drop any client work because it would see us competing with the developers that we support, a tough decision that sits right up there with the dropping of mumspace.net. We’re moving away from what built the company up in the first place, but toward something that I really believe in. This week will see us offering our first online courses, something that Rich has been developing over the last couple of months, and that I hope he

does well with it. It seems to be a good idea, and he’s really excited about it. He’s putting together three six-week courses which he’s going to run as weekly webinars, emailing out supporting material and giving students their own Kentico sandbox to work in. We will also be rolling out our new website. It’s a big week. We don’t even have a holding page at this point. I had the guys take it down as I did not want to be presenting our service as something it no longer is. I hate having no website though, and am already getting emails asking me if I know it’s down. Having Rich developing training modules at the moment is good for another reason, as it means I can step in and begin to really run with the magazine while he does it. His background is heavy Kentico development. Mine is in magazines. He’s always thinking about tutorial pieces and training, while I’m looking for the human interest piece. He likes to do things himself, while I look to others for support and will be making sure that both Kentico and the developers we support are involved. I’m hoping the next month or so will allow us to bring the best of us both together.

016 Feature

Story by Ralph Spandl @r_42 blog@r42.ca

Smart Search presentation Ralph Spandl talks us through customising the look of search results with Kentico 4.1 and the user-friendly smart search. The smart search is one of the great new features introduced in Kentico 4.1. While I have covered the basic functionalities in a recent blog post, and the setup of the search module is very well covered by the Kentico documentation, let’s take a look into the possibilities of customizing the look of the search results.

How much control do you have? Without considering the search form, there are two parts that can be customised - the search results and a new pager model that I have noticed for the first time in this form. The exact same pager is also available as a separate web part, called “Universal Pager”. So if you customise this pager once, you can use it all over your site.

The search results The main features of the user-friendly search results are highlighted keywords in search results, the possibility to display additional information, formatted dates and a relevancy bar.

If you have a look at the smart search transformation, you will notice a couple of new functions: • SearchHighlight allows you to highlight the searched keywords in a string. With this function the user can quickly see in which context the keyword was found in the search result. • TextHelper.LimitLength (which was probably already

Feature 017

available before version 4.1) allows you to limit the text length of the returned result text. • HTMLHelper.StripTags eliminates all HTML tags from a string to better control their display. If you combine these three functions together, you end up with this nested expression that returns the first 280 characters of search result and adds a span tag with a CSS class around the searched keywords (see point 1): <%# SearchHighlight(HTMLHelper.HTMLEncode(TextHelper.LimitLength(HttpUtility. HtmlDecode(HTMLHelper.StripTags(GetSearchedContent(DataHelper. GetNotEmpty(Eval(“Content”), “”)), false, “ “)), 280, “...”)),”<span class=\”search-hiliteback\”>”,”</span>”) %>

The pager The new pager might go unnoticed. The pager that ships with the standard version is quite grumpy and not very userfriendly, because the numbers are very close together. What can be done with the new pager model? I would say everything you can think of! At the moment I don’t see a case that can’t be built with this web part. Let’s look at the pager I built for this tutorial:

This function ships with the standard transformation. Now you can adapt it to your own needs. In my example I am using it to also display the page title of the document instead of the URL path (point 2). If the page title should be empty (very rare case), I replace it with r42 communication, or anything else. <b><a href=”<%# SearchResultUrl(true) %>”><%# SearchHighlight(HTMLHelper. HTMLEncode(DataHelper.GetNotEmpty(Eval(“Title”), “r42 communication”)),”<span class=\”search-hilite\”>”,”</span>”) %></a></b>

Somehow the engine does not return every time a text result, for this reason, I always display the content of the page’s Meta description tag. For this to work, you can use the GetSearchValue function. Of course, always check, if there is any content to be displayed (see point 3). <%# IfEmpty(GetSearchValue(“DocumentPageDescription”), “”, “<b>” + CMS. GlobalHelper.ResHelper.GetString(“r42.aboutthisdocument”) + “:</b> “ + GetSearchVal ue(“DocumentPageDescription”)) %>

If you want to format the date/time format, make sure you do not use this function: <%# GetDateTime(“Created”, “D”) %> According to the Kentico support team, the ‘Created’ field is not standard date time field - it’s field from ‘Lucene. NET’ so it need to be handled in slightly different way than standard date time fields from Kentico CMS. The solution, however is easy enough: <%# FormatDateTime(Eval(“Created”), “D”) %> does exactly what we want. The advantage of using this method to write dates, is that it will be automatically localized (see point 4). The relevance bar is available in the standard transformation. I only extracted some style definitions and stored them into my style sheet (see point 5).

1+2: Results currently shown and total results found 3: Current page 4: Other pages 5. Next page group 6. Last page 7. Previous button (here disabled because it is the first record) 8. Next button 9+10. First page/previous page group, in the case the user has advanced to the next page group. 11. Now next and previous buttons are links. This layout is possible because the new pager is very modular. Each of the elements shown above has their own (!) transformation. These transformations can then be organized in the layout transformation. I have made the source code available in the Kentico Marketplace. I only had to make a few changes to the single transformations. The bulk of the changes are applied to the layout and of course the style sheet. Keeping the transformation as simple as possible also means that you can style the footer in many different ways, while using the same transformations.

018 Feature

Conditional Transformation I only want to have a quick look into the transformation of the previous and next button because it applies a technique recently discussed by Matthew Lee, the conditional transformation. To make sure, the next button is not shown on the last page, I compare the value of “LastonPage” with the total number of items shown. If there is a match, I do not display a link, but only a box. All the rest is done via style sheets. <%# Convert.ToInt32(Eval(“LastonPage”))== Convert.ToInt32(Eval(“Items”))? “<span class=\”next\”>&nbsp;</span>”:”<a href=\”” + Eval(“NextURL”) + “\” class=\”next\”>&nbsp;</a>” %>

Same applies to the previous button, here we have to make sure that FirstonPage does not equal 1. <%# Convert.ToInt32(Eval(“FirstonPage”))== 1? “<span class=\”prev\”>&nbsp;</ span>”:”<a href=\”” + Eval(“PreviousURL”) + “\” class=\”prev\”>&nbsp;</a>” %>

Download the code All of the code discussed here is available for download from the Kentico Marketplace. ȖȖhttp://bit.ly/4rUUu6

Tomorrow starts today

Building web sites is not the problem anymore. The real challenge is to build sites that can not only be easily updated by non-technical personnel, but that are also flexible enough to be adapted to the constantly changing environment of the web. Ralph Spandl â&#x20AC;&#x201C; founder of r42 communication

r42 uses Kentico CMS to built web sites. We are convinced of the power and the flexibility of this content management system, and we love and value the unparalleled support and customer relationship. Our experience is that Kentico has two open ears for its partners, and thatâ&#x20AC;&#x2122;s why we are proud to become a Kentico Gold Certified Partner.

Interactive branding agency

r42

.CA

To learn more visit www.r42.ca

020 Tutorial

Tutorial series by Richard Pendergast @kenticodev richard.pendergast@kenticodeveloper.com

Wordpress to Kentico Re-purposing a theme - part 1

When a Wordpress site gets out of hand, there comes a point where another platform is needed. Here is first of our how-to series - migrating a Wordpress site to Kentico. In this first installment of our Wordpress to Kentico tutorial series we will be covering the basics of taking an existing design and applying it to Kentico. The techniques involved form the basis of skinning a Kentico site, and are used in the development of new Kentico site templates. We will then build upon these techniques over the next three issues, taking two existing Wordpress themes and using them as the basis for two new Kentico site templates. The material covered here will be introductory and I’ve made an effort to simplify what is covered, but rest assured that over the next 3 issues we will develop two complete Kentico site templates and that both will be made available for free download via the Kentico Marketplace. So, getting started, there are five basic steps to taking an existing design and making it work with Kentico. 1. 2. 3. 4. 5.

Get your hands on a working demo of the theme Download a working copy of each page Prepare the downloaded files for Kentico Get everything working within Kentico Add zones and web parts

I am assuming that you have an empty Kentico website

to work with, or that you have a Kentico website that you are happy to make signifcant changes to.

1. Get your hands on a working demo This is probably the most complex task involved in the process, in that it requires the setting up of a Wordpress site, the downloading and applying of the theme, the configuring of the theme once it is applied, and the loading of sample content. Try and shortcut this step if you can by finding a working demo site. Most reputable theme designers now offer this, and if you’re looking to use a Wordpress theme, it’s rare that you won’t be able to track one down. I found two, one for each of the themes we will be working with: ȖȖArthemia http://michaelhutagalung.com/arthemia/ ȖȖMasigasig http://www.paddsolutions.com/wpmag/masigasig/

Tutorial 021

2. Download a working copy of each page In order to download the HTML, CSS, Javascript, and images associated with any given page I recommend downloading and installing a Firefox add-on named Save Complete. This plugin saves a lot of time that would otherwise be spent downloading each piece, and it is one of the few tools I’ve found that pulls down background CSS images. You’ll then need to identify the types of page used by the theme. Typically you’ll find that a Wordpress theme will have a home page, a post page, a category page, a search results page, and an archive page, but Wordpress supports many more so don’t be surprised to discover others. Arthemia provides a home page, a post page, a category page, and a search results page that we’ll be implementing. Once you’ve identified each you need to pull down a local copy of it so that you have something to work with. Begin by creating the following directories on your local filesystem:

http://michaelhutagalung.com/arthemia/category/featured/

and save the page as arthemia/orig/category.html

Navigate to http://michaelhutagalung.com/arthemia/?s=lorem

and save the page as arthemia/orig/search.html

3. Prepare the downloaded files for Kentico

Then we can kick things off by downloading the home page.

Copy all images from each of the directories within arthemia/orig to the arthemia/img directory. Copy all of the CSS files from each of the directories within arthemia/orig to the arthemia/css directory. Copy all of the Javascript files from each of the directories within arthemia/orig to the arthemia/js directory. Don’t worry if you are asked about replacing files. We only need a single copy of each file, and there is every likelihood that when copying the files from each page into a single directory you’ll run into files used by more than one of the pages. I’d actually be worried if this wasn’t the case. You may discover that several image files contain querystring parameters within the filename. These should be removed in the copies you create.

To do this, navigate to:

For example

arthemia arthemia/orig arthemia/img arthemia/css arthemia/js

http://michaelhutagalung.com/arthemia/

and select File / Save complete page as from within Firefox, saving the page as

3.jpg&w=150&h=150&zc=1&q=100

should be renamed 3.jpg

arthemia/orig/home.html

Navigate to http://michaelhutagalung.com/arthemia/2009/04/aenean-nisl-elit-dapibus-a-portatincidunt

and save the page as arthemia/orig/post.html

Navigate to

What we’ve just done is setup the directory structure that will make up our theme, and that will eventually be uploaded to the server hosting your Kentico site. Now make a copy of each of the HTML files within the arthemia/orig directory and place it in the arthemia directory. These are the copies that we will begin to modify. Edit each of the HTML files using the text editor or HTML editor of your choice. Notepad on the PC, and Textpad on the Mac

022 Tutorial

work if you have nothing else on-hand. If you are doing this fairly frequently, you’ll want an editor with syntax coloring and the ability to recognise closing tags, making the work much easier and more efficient. Remove anything up to but not including the opening body tag within each file, and anything after but not including the closing body tag within each file - Kentico will add the HTML, body and head tags later. Both the HTML files and the CSS files should now have any links updated with the reference paths that we know will exist, rather than those created by Firefox. Do a search for .png within each of the HTML files and each of the CSS files, replacing the path of each URL that you find with /App_Themes/Arthemia/img/ For example, replace

home_files/logo.png

Open the CMSSiteManager of your Kentico website. Select the Development tab, and select CSS stylesheets. Create a new stylesheet named Arthemia. We will be doing things a little differently to what you may expect. Rather than adding our CSS here, we will be storing calls to import the stylesheets we already have. We work out which files to import by opening /arthemia/ orig/home.html and searching for references to .css files. For each that reference you find, add an import statement to the newly created Arthemia CSS stylesheet. For example, A reference of the following form <link rel=”stylesheet” href=”home_files/style.css” type=”text/css” media=”screen” />

should be added as an import similar to @import url(“/App_Themes/Arthemia/css/style.css”);

with

4. Get everything working within Kentico

/App_Themes/Arthemia/img/logo.png

Then do the same for .jpg files, and .gif files, searching each out, and appending the correct path. As we did earlier, keep your eyes out for querystring parameters within the filename and remove them where you find them. Kentico best practice is to store any them files within a directory named /App_Themes/<stylesheetname>/ Any files stored here will be automatically packaged with the stylesheet if we export it later as a site template. The arthemia directory should now be uploaded to the server hosting your Kentico site, and should be placed into the /App_Themes directory as follows: /App_Themes/Arthemia /App_Themes/Arthemia/orig /App_Themes/Arthemia/img /App_Themes/Arthemia/css /App_Themes/Arthemia/js

The /App_Themes/Arthemia/orig directory can be deleted at this point, as we do not need to store our original downloaded files on the server. We have them stored locally if we need them.

So what you should end up with in this case is: @import url(“/App_Themes/Arthemia/css/style.css”); @import url(“/App_Themes/Arthemia/css/pagenavi-css.css”); @import url(“/App_Themes/Arthemia/css/preview.css”);

Now we have our stylesheet we need to prepare our page templates. Firstly, create a page template category under which we can store all of our page templates. Open the CMSSiteManager of your Kentico website. Select the Development tab, and select Page templates. Select the Page templates root node, and select New category. Name your category Arthemia, giving it a code name of Arthemia. Select your newly created Arthemia node, and select New template. Name the new template Master Page, and give it a code name of Arthemia Master Page. When your page template is created, it will be given a template type of ASPX page by default. Change this to Portal page and save your changes. Once the page template is given a template type of Portal page, extra tabs become available. Select the layout tab, copy the entire contents of the home.html file into the custom layout text area, and save your changes. Select the Sites tab and make sure that te page template is enabled for your site. If it is not, check the box next to

Tutorial 023

your website, and save the change. Create another page template. Name the new template Home Page, and give it a code name of Arthemia Home Page. Change the template type to Portal page and save your changes. Select the layout tab, copy the entire contents of the home.html file into the custom layout text area, and save your changes. Select the Sites tab and make sure that the page template is enabled for your site. If it is not, check the box next to your website, and save the change. Create another page template. Name the new template Post Page, and give it a code name of Arthemia Post Page. Change the template type to Portal page and save your changes. Select the layout tab, copy the entire contents of the post.html file into the custom layout text area, and save your changes. Select the Sites tab and make sure that the page template is enabled for your site. If it is not, check the box next to your website, and save the change. Create another page template. Name the new template Category Page, and give it a code name of Arthemia Category Page. Change the template type to Portal page and save your changes. Select the layout tab, copy the entire contents of the category.html file into the custom layout text area, and save your changes. Select the Sites tab and make sure that te page template is enabled for your site. If it is not, check the box next to your website, and save the change. Create another page template. Name the new template Search Page, and give it a code name of Arthemia Search Page. Change the template type to Portal page and save your changes. Select the layout tab, copy the entire contents of the search.html file into the custom layout text area, and save your changes. Select the Sites tab and make sure that the page template is enabled for your site. If it is not, check the box next to your website, and save the change. And now that we’ve created all of the basic building blocks, we can begin putting things together. Open the CMSDesk of your Kentico website. Select the root node of the content tree, press Edit view, select the properties tab, select the general tab, select Arthemia in the CSS stylesheet dropdown list, and save your changes. Select the Template tab and press the Select… button

next to the current template. Choose Categories->Arthemia>Master Page and press the OK button. Select the page tab at this point, and you should see that we now have the beginnings of a working page.

5. Add zones and web parts So we have the beginnings of a working website, but we have zero functionality. Step 5 is the fun part, and is all about beginning to tap into the CMS functionality of Kentico. In essence what this involves is making pages from the page templates we’ve created, and finding pieces of the page that can be replaced with Kentico zones and web parts so the end user is able to dictate the content and behaviour of the site pages. Let’s begin by setting up the master page with the page placeholder web part. Looking at the html of each of the pages, it seems that under this theme a page is made up of the following pieces <div id=”head” class=”clearfloat”>…</div> <div id=”page” class=”clearfloat”>…</div> <div id=”front-popular” class=”clearfloat”>…</div> <div id=”footer”>…</div>

The page div is the only one that really changes substantially across the pages we donwloaded earlier, so what we will do now is replace everything contained within the page div of the master page template with a zone into which we can place Kentico web parts. Open the CMSSiteManager of your Kentico website. Select the Development tab, select Page templates, expand the Arthemia page template category, select the Master Page page template, and the layout tab. Remove everything between <div id=”page” class=”clearfloat”>