Efficient migration to WordPress: How Types and Views help you organize complex mass content and save time

November 28, 2014

How can you migrate to WordPress from other platforms? Sooner or later, every WordPress developer encounters a project in which a website needs to be moved to WordPress. This is when questions begin to appear. Where do we start from? What can you do to keep your development time to a minimum? Instead of reinventing the wheel, let’s see how others manage this process.

Tim Brocklehurst runs a UK digital consultancy that specializes in migrating company websites to WordPress. Today he shares how he handles this process efficiently with help of Types and Views plugins, which support many to many relationships.

About the project

newtonwaterproofing.co.uk
newtonwaterproofing.co.uk

http://newtonwaterproofing.co.uk/ is an upgraded website for John Newton Co. Ltd.

The site was migrated from the .NET framework on a Windows server to WordPress on a server running Linux and Apache.

Project requirements

The objective of this project was two-fold:

  1. Modernize the look and feel to reflect current trends in web design and assist in “future-proofing” it.
  2. Organize the complex mass of content into a meaningful order. This, in turn, should result in better SEO and higher search rankings, while at the same time helping visitors to easily view what solutions and products are offered by the company.

About the author

Tim Brocklehurst
Tim Brocklehurst

Tim Brocklehurst runs Web Inclusion, a digital consultancy in the UK that specializes in migrating company websites to WordPress.

Tim has a magazine publishing background from which he has gained particular strengths in developing content strategy. This includes simple categorization methods to organize text and images into digestible pages, and the ability to link structures with parent/child relationships between content entities to simplify complex groups of content.

Why migrate to WordPress?

“Most of the clients featured on our website have required us to migrate their content from one platform or another to WordPress at some stage. In the past two years, we have provided a migration service from all platforms, to WordPress, and we don’t work with any other CMS except WordPress when developing sites for our clients,” says Tim.

Here’s why he selected WordPress, which he considers to be the most powerful and flexible CMS:

  • WordPress’ lean, out-of-the-box simplicity
  • its unparalleled advantages in achieving good search rankings
  • its unrivalled flexibility with plugins and themes to obtain precisely the right functionality for any web project

“We always install Types and Views very early on and have found them both invaluable to speeding our development time, and also improving the functionality of the sites we provide,” concludes Tim.

Before we present how he implemented the JN-Newton project with Toolset, let’s take the opportunity to learn more about migration.

Tim posted an in-depth article about migration to WordPress
Tim posted an in-depth article about migration to WordPress

Why do people want to migrate their sites to WordPress? When they come to Tim, are they already aware of WordPress’ advantages as a solid CMS? Or does Tim’s team encourage them to move their sites to WordPress?

It varies, explains Tim:

“Some clients (an increasing number) come to us specifically because they want to migrate to WordPress and they have heard we are good at that. Others come because they want a more robust, future-proof solution than they are running currently, but they don’t know which CMS to go for. Others come because they want to improve their SEO and compete better in Google. And others still because they want to take more control of their website’s content and editing.”

Tim says that in each of the latter cases,W his agency knows that WordPress is the best option and it is not difficult to convince their customers of that either.

“I occasionally get some reluctance to WordPress, but it is rare these days, and usually from a client who is still receiving advice from his/her previous developer. For some reason, there are a handful out there still who think WordPress is really only good for blog sites. They haven’t yet appreciated its power and flexibility as a stand-alone CMS in its own right. “

Tim often thinks they are prejudice to Open Source generally. Their arguments focus on the apparent security flaws of WordPress (which are easily eradicated with plugins like Wordfence, for example), or its design inflexibility (an objection which, these days, is unfounded).

For anyone interested in reading more about WordPress migration, Tim wrote an article for Linked In on why so many companies are migrating to WordPress.

What the migration process looks like

Starting off with an in-depth discussion

When Tim’s agency starts on a new project, they begin with an in-depth discussion to understand the client’s visions for their website. As Tim says, clients rarely have a good handle themselves on how they want their content grouped, sorted, and displayed. Therefore, a discussion like this helps them to imagine the perfect outcome. The result provides Tim’s team with something from which to work backwards when creating the content strategy and the web design.

Choosing the design

“We don’t always do the web design. Sometimes we work with a designer who has been chosen by the client. Their creative work is what the client wants and our job, in this instance, is to ensure they deliver a style that works hand-in-glove with the content strategy. We can, and have, created custom themes to match any template, but early discussions with designers at concept stage help them, and us, to ensure the design does what everyone needs.”

Setting up the structures

While the design is under way, they are busy determining what custom post types, custom fields, categories and inter-post relationships are needed. They then create these using Types and usually enter some sample data so that they can test the display and fine-tune the content structure.

This video demonstrates how you can set up your WordPress basic structures quickly with the Types plugin.
How you set up your WordPress basic structures with the Types – video

Tim’s team is particularly skilled in the area of content management and they have developed sophisticated methods for grouping and sorting data in order to take advantage of categories, custom fields, and parent-child relationships.

The Types plugin has a GUI base interface to support the creation of these structures, which allows you to create the basic objects very quickly. Therefore, it’s a must-have for migrating sites with large quantities of data.

How the contents are moved

Tim’s’ agency is able to migrate websites from any platform, as well as straight from HTML sites. Sometimes there is a lot of copying and pasting involved, but for sites that are especially content-heavy, they perform an XML import after the content is grouped into useful chunks. This way they can import common fields and paragraphs of data into custom fields wherever necessary.

When images are an important part of the site’s contents, you must carefully plan their sizes in advance.
How to migrate images

Image sizes are an important consideration. Tim notes they only receive the final pixel sizes once the designer’s page templates are approved, and invariably he needs to request larger images from clients, generally around 2 to 2.5k pixels, to ensure that the images can be cropped to the variety of sizes needed for thumbnails or slider displays.

“Almost without exception, every migration we have ever done has required us to get the original image sizes instead of working with the small sizes uploaded to the previous CMS,” says Tim.

Managing relationships between custom posts

It is not enough to set up the basic structures for large sites.Sites that need to display various, comprehensive data should be carefully planned in advance in order to effectively manage data relationships:

  • How the data are related to each other?
  • Are these one-to-many or many-to-many relationships?
  • Will it be easy for a content administrator to manage related data without jumping from one place to another?
  • What about the front-end visitor perspective? How can related data be presented together without overwhelming the visitor? What tools can be used to keep the implementation phase process to minimum?

These are the questions to consider when migrating to WordPress or creating a new site with WordPress that contains a large volume of data.

Outputting the contents

Once the basic structured and the relationships are established, Tim and his crew can create the pages. This is when they use the Views plugin extensively. We’ll cover this more in the next chapters.

How the John Newton Ltd. Waterproofing Systems site was built with many to many relationships

How the John Newton Ltd. Waterproofing Systems site was built
The John Newton Ltd. Waterproofing Systems site

“Organize the complex mass of content into meaningful order” – this was one of the challenges Tim’s agency initially faced with this project.

Tim recalls: “On the previous site it was possible to link Case Studies to the Products that were used in them. However, this upgrade project required us to go a few steps further.

They now needed not only to link Products to Case Studies, but also to Solutions and Applications. They also needed to link Applications to their related Solutions.”

This was where Toolset plugins, Types, and Views provided Tim’s team with the most elegant and customizable solution. They couldn’t do this without the Toolset and its ability to handle the many-to-many relationships.

Let’s see how John Newton Ltd. Waterproofing Systems was built using Types and Views.

How the Types and Views plugin helped to create basic structures

Following an analysis of John Newton’s website content, the team identified and created:

  • 12 custom post types and 10 custom field groups (Types plugin)
  • Several parent-child relationships between key CPTs to enable meaningful groupings of content on single pages (Types plugin)
  • Several many-to-many relationships between sibling CPTs (Types plugin)
  • 31 views (Views plugins)
  • 35 content templates (Views plugins)

How Views and Content Templates were put together to create a single page.
How Views and Content Templates were put together to create a single page.

Views were used for:

  • creating a set of saved queries and displays
  • automating the provision of link buttons
  • featured images
  • custom field content

The result is a website that pulls from multiple sets of complex content, yet displays it in a meaningful way that is easy to navigate every time, as shown in the picture above.

Handling Products – Case Studies relationships

The use of many-to-many relationships was very important in order for Tim to introduce a strategy for cross-linking the existing content and future content and to help visitors in their navigation of the site.

There are numerous many-to-many relationships used in the site.

Tim smiles: “I fear my attempt to articulate the extent to which Types and Views have been implemented would take me longer than we’ve got.”

So for the purpose of this article, we will concentrate on the example page, for the newton-101-f/ productL, in which the relationship between Case Studies and Products is demonstrated.

Single product page. Product information is displayed in the middle of the page and can be combined with other information related to a product; for example, Case Studies (on the left sidebar).
Single product page

As you can see in the picture, this particular product, Newton 101 F (CW 101), is related to five case studies that are displayed on the left sidebar.

Single case study page. A case study is displayed in the middle of the page and can be combined with other related information; for example, products used in this particular case study (on the left sidebar).
Single case study page

When you click on any of these case studies, you will be redirected to a single case study page.

From a business point of view, each Product can be related to many Case Studies. On the other hand, each Case Study can describe many Products. A classic academic example of the many-to-many relationship can be illustrated in a diagram like this one:

Products - Case Studies many-to-many relationship
Products – Case Studies many-to-many relationship

Creating many to many relationships with the Types plugin

In order to use the Types plugin to present the Products – Case Studies’ many-to-many relationship between two custom post types, you will need to:

  • define the Products custom post type
  • define the Case Studies custom post type
  • create another Custom Post Type named “Case Products,” which is a child of both Products and Case Studies

Compare two pictures below:

The entire list of custom post types in Types on the Newtonwaterproofing site. The custom post types that create the Products - Case Studies relationship are highlighted.
The entire list of custom post types

Case Product custom post type edit screen (Types plugin). The Case Study-Products relationship hinges on both Products and Case Studies being parents of Case Products.
Case Product custom post type edit screen (Types plugin).

How content administrators manage many-to-many relationship posts

Now your content administrator can easily add case studies when editing products and vice versa:

If you are in a single Case Study edit screen and scroll down to Fields table section (see figure below); you will see all the related products. To assign another product to this case study, just click on “Add New Case Product.”

Here are two nice ways in which Types can help you:

  1. When you want to assign a new product to your case study, you will automatically access a dropdown list of all available products. This way you can easily choose the right product post.
  2. After you assign a new product to a case study and switch to the single product edit screen, you will see the case study just assigned. It will be listed in the product’s case studies list (compare the two figures below).

A single case study edit screen (WordPress dashboard). In the Fields table section, you will see all products related to this case study. You can easily assign, edit, or delete products from within this screen.
A single case study edit screen

A single product edit screen (WordPress dashboard). In the Fields table section, you will see all case studies related to this product. You can easily assign, edit, or delete case studies from within this screen.
A single product edit screen

How to use many to many relationships in Views

How to use the post relationship feature in a view

Setting relationships in Types not only allows you to manage the posts easily from within your WordPress dashboard, but it also makes it easy to output them to the front-end using Views.

Views provide you with a special feature found in your View Query filter section: “Select post that are children of the Post where the View is inserted’

A cheat sheet reminder on how to utilize a post relationship when creating a new view based on it (step 1 of 2).
A cheat sheet reminder on how to utilize a post relationship when creating a new view based on it (step 1 of 2).

A cheat sheet reminder on how to utilize a post relationship when creating a new view based on it (step 2 of 2).
A cheat sheet reminder on how to utilize a post relationship when creating a new view based on it (step 2 of 2).

This Views plugin feature is very powerful. Tim uses it a lot. Let’s learn how.

How to display all products related to a single case study

Single case study page. A case study is displayed in the middle of the page and can be combined with other related information; for example, products used in this particular case study (on the left sidebar).
Single case study page

When you visit a single case study page, in the left right sidebar (bottom part) you will see the Products Used section. This shows the different products related to this particular case study.

How the view for handling many to many relationships was built

Tim created the following view to show Products Used for the chosen case study:

The CaseStudyProducts view, which allows you to display Products Used in a chosen case study. It centers on the Case Products CPT being a child of Products and Case Studies (1/3).
The CaseStudyProducts view (1/3)

For the “Content selection” view section, Case Products CPT was used. This is the “connector” custom post type used to handle the many to many relationship using Types and Views.

The CaseStudyProducts view allows you to display Products Used in a chosen case study. The right setting of the “Query filter
The CaseStudyProducts view (2/3)

For the Query filter section, the “Select posts that are children of the Post where this View is inserted” option was selected. This option allows the Views plugin to make a connection between this view and the context in which it is used. In this case, the context was a single case study page. We will discuss more on this later.

The CaseStudyProducts view allows you to display Products Used in a chosen case study in the Layout HTML/CSS/JS section (3/3).
The CaseStudyProducts (3/3)

Finally, in the Layout HTML section, Tim decided to display titles and links to Products.

Please note that in the “Content Selection” section, the Case Products posts that were not to be shown were indicated. Instead, Tim and his team were interested in displaying Products, in particular those that were parents of Case Products posts. This is why he needed to refer to the parent post of the post currently being processed.

For this, he used the id attribute, followed by a $ sign, and the slug of the specific custom post here: product.

{{wpv-post-url id=$product}}
{{wpv-post-title id=$product}}

This how he instructed the Views plugin to display the title and the URL of the Product, which is the parent post of the currently queried post.

How the view was displayed in a sidebar

 

A custom sidebar used on a single case study page. WP Views widget is used to display the CaseStudyProducts view. The Display/Hide Widget section is found in the “Restrict Widgets
A custom sidebar used on a single case study page.

Next Tim displayed this view in the Case Study Left sidebar.

For this, he used another useful feature of the Views plugin, namely a dedicated widget called WP Views, which allows users to easily include a specific view in the sidebar.

Tim played a lot with the different sidebars in the newtonwaterproofing.co.uk site. The Custom Sidebars and Restrict widgets plugins assisted him with achieving various combinations of widgets and sidebars for different pages. In particular, these two plugins helped him to create custom sidebars for use only on the Case Studies and Product sections of the site.

How to display all case studies related to a single product

Since Products and Case Studies are in many-to-many relationships, we are only halfway there. Now we need to display all case studies related to a single product. The steps to be complete are similar.

The entire list of custom post types in Types on the Newtonwaterproofing site. The custom post types that create the Products - Case Studies relationship are highlighted.
The entire list of custom post types

When you visit a single product page, in the left right sidebar (bottom part) you will see the Related Case Studies section. This shows the different case studies related to this particular product.

To show Related Case Studies for a chosen product, Tim created the following view (see picture below).

It is worth mentioning that the CaseStudyProduct intermediate custom post type was used again as the view’s base structure.

The ProductCaseStudies view shows Related Case Studies for a chosen product in the Content selection section (1/3).
The ProductCaseStudies (1/3)

The ProductCaseStudies View shows Related Case Studies for a chosen product in the Query filter section (2/3).
The ProductCaseStudies (2/3)

The ProductCaseStudies view shows Related Case Studies for a chosen product in the Layout HTML section (3/3).
The ProductCaseStudies (3/3)

And here’s how to “call” this view using the WP Views widget:

Product Left Sidebar with the WP Views widget to display the ProductCaseStudies view
Product Left Sidebar with the WP Views widget

If you are still confused how the many to many relationships work in Views, Tim was kind enough to prepare a picture summarizing the Product – Case Study relationship used for the JN Newton site.

Many to many relationship between Products and Case Studies in a nut shell
Many to many relationship between Products and Case Studies in a nut shell

This picture summarizes the many to many relationship between Products and Case Studies and its implementation using Views.

In each case, the view queries the same table and outputs the same field using the “post is child of current page” filter. The only difference in the output is made by specifying id=$product or id=$casestudy.

Conclusion

 

Tim Brocklehurst
Tim Brocklehurst

“Views and Types made it possible for us to create a complex structure of relationships between content types, and satisfy the client’s need for more navigable content. No other set of plugins I know of makes complex content relationships so customizable, flexible, and easy as Types and Views.

The software is so helpful. It really adds a whole new dimension to any WordPress site. Everything we do now is in WordPress, and Types and Views are usually among the first plugins we install,” summarizes Tim.

A note from the editor

Agnes Bury, the case study author
Agnes Bury, the case study author

When I was working on this case study with Tim, he shared with me that they also promote their services through another service at webswift.uk. This one is a more streamlined and quicker operation that is more specifically geared for new websites and migrations.

When I first visited this website, I noticed this tagline “Your New Website – FAST.” Down the page, they promise to act on your project straight away and deliver it quickly. Normally I would treat such a promise as a typical sales pitch. But then, when I discovered how wisely Tim uses Toolset plugins to keep the development time to minimum, I’m sure that these are commitments that become realities.

Congratulations Tim on the outstanding results and all the best for your future projects.

More case studies using Types and Views plugins

How to build a large music catalog with Views and parametric search
How to build a large music catalog with Views and custom search

How to create a site for the luxury market with Types and Views
How to create a site for the luxury market with Types and Views

 

Comments 2 Responses

  1. Hello,

    We are thinking of buying toolset to migrate our website. We have 3000+ posts as different custom post types and we are also using Advanced Custom Fields in our current theme.

    Could you please give us some tips on how to migrate?

    Could we also try toolset – I remember you made a custom installation for me last year to try out the features.

    thanks
    Andreas