Blogs are an important part of an ecommerce solution, especially for a small company—they provide a way of directly connecting with customers, they are an inexpensive way to differentiate your client from their competition, and they provide real benefits for search engine optimization.
In many cases, however, designers are engaged to build an ecommerce solution for their client’s business and understandably spend most of the available time and budget on the online store—focusing on product presentation, categories, navigation and checkout. A blog is frequently an out-of-the-box, bolt-on solution to complete the site’s feature set—especially for a designer that has limited development resources.
Typical integration focuses on the navigation and presentation however—a common header and style are used across both the application that powers the store and the application that powers the blog—but stops there. Data cannot be shared easily, authenticated sessions are not supported, and any changes to common elements need to be updated in multiple locations, but that’s just the start of the support woes.
WordPress’s plug-in architecture is a huge advantage for most users—having developers around the world add features and functionality gives designers and clients a wide variety of options to extend their blog’s functionality. But with any plug-in architecture, you need to stay current as platform upgrades impact plug-ins. This is just another aspect of the maintenance hurdles that can grow into costly maintenance tasks over time.
Smaller design firms working with small or medium sized businesses need to maximize their efficiency and reduce long-term support costs. You should be focusing your effort on delivering value for your client, and keeping support costs low.
Even designers who recognize this issue find themselves in a larger hole: the cost to change is sometimes greater than the cost of dealing with support issues. Most full service platforms acknowledge that and provide tools to assist migrating an existing site into a new platform.
Adobe Business Catalyst provides tools to migrate an online business onto their platform—including blogs. Blogs represent a special case because blogs contain structured data with relationships that cross articles. For instance, most blogs have comments and comment threads, they are assigned to categories, and have a history. In this article, we’ll walk through migrating your blog into a new
Business Catalyst site and set up a seamless template based on your current
WordPress blog.
Beyond blogs,
Business Catalyst is really a platform for an online business and provides tools for integrated ecommerce, marketing and content management. Other articles in the series cover those topics in more detail.
Make a Plan
Everything starts with a plan. I’m a big believer in planning before jumping in, so take a few minutes and plan it out, here are the steps we know we have to take:
- Create a new BC site
- Create a template
- Set up your blog layout
- Create your blog
- Export/Import current blog
- Fine tune and set as start page
Along the way I’ll identify a few more details, but this is basically what we’ll cover.
Moving In
There are actually two steps I’m going to cover in the process of moving into Business Catalyst—the first is about setting up a template to wrap your content. We’ve done this in prior articles, but in this one, the design constraint that I am applying is that you want to keep the current site template in place that is on your WP blog.
In order to set that up, the fastest way is to import your current site and then create a template from that content. After we set up the template, we’ll work on moving the blog content into the template. Sound good? OK, let’s get started.
Import the site
Business Catalyst provides a wizard that makes it easy to move a site onto the platform. It builds out the file system and moves all of the content and supporting assets into a directory structure in Business Catalyst. This step is important if you want to base your new site template on your existing site. If you are taking this opportunity to create a new template, you don’t need to do the import site step, you can skip to the
Import Blog step further along.
I’ll assume you’ve created a new account and are familiar with the
Partner Portal (if not, see
Introduction to Adobe Business Catalyst), go to
Create Site and select a
Pro site type and click on the “
Import your current website” radio button. This will load a subsection where you can enter the URL of your current site.
note:
You can restrict this to a subsection of the current site by specifying the directory to begin; BC will only import pages under that directory.
Once you have entered the URL/path click
Next and then you’ll need to enter a bit more information to finish setting up the new site on your account.
Click
submit and the page will reload with verbose status of the import process. Pretty cool. Depending on the size of your site, this might take a while. At the end you see a confirmation message “
Congratulations! You have successfully signed up …”
Now the fun part begins.
Create the Template
The first task is check out the new site—open a new browser window and hit the URL you created for the imported site. I’ve decided to work with a fictional company targeting coffee enthusiasts called Koffee Klubbe.
Check out the links, they should all work. What you’ll see are static copies of everything your old site contained. Unfortunately, that also includes seemingly dynamic items like a search box and comment forms. They won’t work—at least not as you’d expect since they are still pointing to the old site. We’ll walk through that clean up in just a moment.
Remove WP tags and content
Note: If you view source, you’ll see that some items in your site still reference the old WordPress site—including the stylesheet. You should take the time to identify and migrate those files to your BC site once you have your blog set up.
We’ve covered the basics on setting up templates in an earlier article so if you need a refresher, click here. I’m going to focus on the steps you’ll need to take to make a new template out of your existing WordPress page.
In the WP theme I was using, the
div containing the content is
. I simply brought up my
Default page in the
Web Pages Details editor and found the beginning and the end of the
div. Replace all of the content within the
div with a simple
{tag_pagecontent} tag:
If you toggle back over to
Design view, you’ll see that the content was replaced with the tag. Right now, BC isn’t parsing that tag since this is a static page—we’ll set up the template next.
Copy the HTML for this page, click on
Admin > Manage Site-wide Templates and create a new template for the site. Name the template, toggle to
HTML view, paste the content, save and publish. Go back to the
Web Pages, create a new page as
index.html, give it a name and select your new template:
OK. You’re actually halfway there. Now, let’s build your blog.
We’re going to start with the blog layout. In addition to the site-wide templates that let you define common elements that will show up as a consistent frame to your content across sections of your site, you can also define layout for your blog that will control how the text, comments, links to other articles and categories will be displayed within the
{tag_pagecontent} section of your larger layout. Got it? Let’s get started.
Navigate to
Admin > More Customization Options, then click on
Blog Layouts.
Next, select the
Overall Blog Layout to edit.
That will bring up a standard editing window but this time you’ll see all of the modules related to blogs—blog content, tags, comments, trackback links etc. If you toggle over to the
HTML view, you can control the layout down to the level of detail you need.
Now your template and your Blog layout are all set up, let’s go add the blog to your site.
Go to
Web Pages > Blog and create a new blog. Like most BC applications, you’ll name the blog and select the template to use when displaying the content. I selected to enable the
trackback function and the
RSS feeds—common features on most blogs.
On the next screen, you’ll see that your blog has no content—yet. We’ll import your blogs from WordPress next.
Import Blog
The first thing you’ll need for the import is your data—go to your WordPress site, log into your
Dashboard and click
Export under the
Settings menu.
In the next screen, narrow the scope of the export to meet the ranges that match what you want to move into your new site. In my case, I’m moving all of the articles over.
The export should result in a datestamped xml file being downloaded. Save the file to a local directory—you’re going to use it in a minute.
Go back to your Business Catalyst site, and click on
Admin,
Import Data. Select the
Blog import.
You’ll have to select the blog to import into, select the blog engine, in this case “
WordPress” and then select the export file. Click
next to begin the import.
You’ll be prompted twice to confirm that you are ready to do the import—click through the prompts and you’ll see a successful confirmation.
Now, go to
WebSite > Blogs and click on
Blog Posts in the right hand nav and you’ll see all of your content:
Remember that a Blog is really just a data-driven application—web apps are set up as
Modules within Business Catalyst and this gives you tremendous flexibility to extend applications and share data across applications.
Like other BC webapps, you’ll need to add this to a page in order to see the blogs on your site.
Let’s go back to the
Blog Details page using the right hand navigation above the
Action Box or by going to
Website > Blogs and clicking on your new blog.
In that action box, you’ll see the link to
Set as Start page.
Click on the link and you’ll see a modal confirming that your blog is now the default page on your site.
As you can see, the blog structure dynamically builds navigation to the Recent Posts, Tags, and the postings by monthly archive. You may also see that the import didn’t completely respect the formatting you may have had on WP. But that’s a great reason to check out the new blog editor. Navigate back to
Blogs > Blog Posts and then select the
Edit with new UI link.
You can edit the posting, add tags, categories, update the publishing date and of course use the WYSIWYG editor.
Search
As I noted above, you’ll need to trim some of the legacy items from your template, one of them is the search box. Since all of the underlying content is stored in the database, it’s easy to add search capabilities to your site—without any coding.
Navigate to
Modules > Site Search and you can quickly build a new search portal. Click on
Create New Search and then name it and determine the scope of the content you want to search against. We’ll select
Blog and then
Save the search module.
In order to add the search module to your site, go back to
Admin > Manage Site Templates and select your Blog template to edit.
Toggle over to
HTML view and create a new
div for your search module. Select
Modules from the
Action list, and select a
Search form to add to your page.
Position the cursor inside the new
div and click
Insert to place the search box code into your template. The insert will also place the search results tag directly after the tag. I moved mine to the main section of the template just above the
{tag_pagecontent} tag. This is perfect for a bit of jQuery to style a nice blind to open up with your search results. You can add as much chrome and UI behavior as you want.
Why migrate?
If you are completely satisfied with the solution you have in place, you wouldn’t be looking at migration strategies. The most common pain points that designers experience are the costs of ongoing maintenance and the effort of maintaining a site spread across disparate infrastructure.
The advantage of a platform like
Business Catalyst is that your entire online business can be managed from one platform allowing you to leverage data, analytics and marketing tools across all of the web apps on your site—not just a blog. Consider this an opportunity to future-proof your solution by moving into a hosted platform that will grow as your business grows. Content management, fully integrated ecommerce, cross sell capabilities, email marketing are all driven from the same underlying platform.
Migrating from one platform to another is never completely painless, but
Business Catalyst’s tools let you design the site, template and blog with as much fine-grained control as you want. If you follow the quick migration path I’ve outlined above, you’ll still want to clean up your template to ensure that the CSS, JS and related assets are all under your control and hosted on the same platform.
Questions? Comments? Let me know!
Tips for tuning up:
These are a few of the quick changes you should make in your site-wide templates after you directly import your site from WordPress. Again, you don’t need to do the site import step—if you want to design a new one from scratch, your blog data will flow into whatever template you design.
- Remove the search box.
- Create a local version of your CSS and JS files.
- Remove just about all of the meta and link tags from the
head—do not remove the CSS link until you recreate your style sheet locally.
- Remove the
feedarea
- Remove the comments at the top that capture the time it took to generate the page.
- Remove the RSS feeds.
- Remove the Footer.
- Replace the
headerimage div.
