23
Migrating A Website To WordPress Is Easier Than You Think â Smashing Magazine Now powering over 17% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user. But what about websites built with an outdated CMS or without a CMS at all? Does moving to WordPress mean starting over and losing all the time, energy and money put into the current website? Nope! Migrating a website (including the design) over to WordPress is actually easier than you might think. In this guide, we'll outline the migration process and work through the steps with a sample project. We'll also cover some of the challenges you might encounter and review the solutions. About This Guide Before we get to work, let's establish some context. First, this guide was written primarily with beginners in mind and will be most helpful for basic websites. Some of you will likely encounter advanced aspects of WordPress migration, but they are beyond the scope of this guide. If you're tackling an advanced migration and get stuck, feel free to share your difficulty in the comments below. Objectives The objective of this guide is to help you with the following: Plan an effective migration to WordPress. Walk through the technical steps involved in migrating. Get ideas and resources to solve common migration challenges. Assumptions I assume you have basic familiarity with WordPress. Previous development experience with WordPress would be helpful, but not necessary. I also assume you have an existing website and design that you want to migrate to WordPress.

Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

Embed Size (px)

Citation preview

Page 1: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

Migrating A Website To WordPress Is Easier Than You Think� Smashing Magazine

Now powering over 17% of the Web, WordPress is increasingly becoming the content managementsystem (CMS) of choice for the average user. But what about websites built with an outdated CMSor without a CMS at all? Does moving to WordPress mean starting over and losing all the time,energy and money put into the current website? Nope!

Migrating a website (including the design) over to WordPress is actually easier than you might think.In this guide, we'll outline the migration process and work through the steps with a sample project.We'll also cover some of the challenges you might encounter and review the solutions.

About This Guide

Before we get to work, let's establish some context. First, this guide was written primarily withbeginners in mind and will be most helpful for basic websites. Some of you will likely encounteradvanced aspects of WordPress migration, but they are beyond the scope of this guide. If you'retackling an advanced migration and get stuck, feel free to share your difficulty in the commentsbelow.

Objectives

The objective of this guide is to help you with the following:

Plan an effective migration to WordPress.

Walk through the technical steps involved in migrating.

Get ideas and resources to solve common migration challenges.

Assumptions

I assume you have basic familiarity with WordPress. Previous development experience withWordPress would be helpful, but not necessary. I also assume you have an existing websiteand design that you want to migrate to WordPress.

Page 2: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

1

Basic Steps

Here are the basic steps that I recommend you follow for a typical WordPress migration:

Evaluate website.

Work carefully through the pages on your existing website, identifying all of the types of content(standard pages, photo galleries, resource pages, etc.) and noting any areas that need specialattention.

Set up environment.

Set up WordPress and get ready to import.

Import content.

Bring over and organize your content, whether via an importing tool, manual entry (for a smallamount, when no tool is available) or a custom importing process.

Migrate design.

Incorporate your existing design into a custom WordPress theme.

Review website, go live.

Carefully review the import, making adjustments where needed, set up any URL redirects, and thengo live.

With this outline in mind, let's work through each step in detail.

Start With A Plan

Page 3: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

The key to a successful migration is to carefully evaluate your current website. You need to figureout how to import and structure the content in WordPress before carrying over the design.

While the principles are the same across migration projects, the details often vary. So, below are twolists of questions to ask as you work out a plan.

Imported Content

How much content needs to be imported (number of pages, number of images, etc.)?

Is the volume low enough to be imported manually, or do you need a tool?

If you need a tool, does one already exist?

Can the content be categorized into the standard "posts" and "pages," or does it call for custom posttypes?

Does extra content need to be stored for certain pages (custom fields, taxonomies, etc.)?

Will the URL structure change? If so, will the old URLs need to be redirected?

Existing Functionality

Does the website integrate any third-party services (data collection, reservations, etc.)?

Do any forms need to be migrated (contact forms, application forms, etc.)?

Is access to any content restricted (such as members-only content)?

Does the website sell products (digital or physical)?

Do any administrative tools need to be carried over (such as custom CMS functionality)?

A Working Example

My brother, Joshua Wold, has volunteered a website to serve as an example; it's for a side project ofhis in which he sells posters and postcards of a Vegan Food Pyramid2. He built the website in plainHTML, with some basic PHP includes for the header and footer. Below is a screencast of meevaluating the website to give you a sense of how the process will work. Enjoy!

Set Up WordPress

Before importing the content, we need to get WordPress ready to go. If you're just experimenting orif you prefer offline development, start with a local installation of WordPress3. Otherwise, the nextstep is to install WordPress with your current hosting provider; or you could use the migrationprocess as a great opportunity to move to a new host.

Once WordPress is up and running, you're ready for action!

Page 4: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

4

For our example, we've installed WordPress with the same host, setting it up in a /wp directory forthe duration of the migration process.

Settings and Plugins

With WordPress installed, we'll make a few minor adjustments:

Update permalinks.

Go to Settings -> Permalinks to make changes. In most cases, I'll switch to "postname"-stylepermalinks.

Update users.

I create an admin-level account for myself and any admin or editor accounts that are needed forclients and collaborators. I also remove the default "admin" user name if it exists (a basic but wisestep for WordPress security).

Depending on the needs of the project, we might have to preinstall plugins. Here are the majorcategories of plugins:

Form management

Migrating a form "as is" is usually a mess; simply recreating it using a forms plugin is usually easier.My current favorite is Gravity Forms5 ($39+ per license). Other options are Formidable6 (with freeand pro versions) and Contact Form 77 (entirely free).

SEO management

Search engine optimization (SEO) is a touchy subject. My philosophy is to build content for people,not for search engines. That being said, there is a common-sense approach to SEO that is solidlysupported by the WordPress plugin ecosystem. And if your old website includes custom meta

Page 5: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

descriptions, giving them a new home during the importing process is important. I recommendWordPress SEO478 (free).

Multiple languages

If your old website supports multiple languages, WordPress has you covered. My plugin of choice isWPML9 ($79 per license, free for non-profits). Another option is qTranslate10 (free).

Security

WordPress security is a topic near and dear to me. The increasing popularity of WordPress has madeit a target for security attacks. WordPress itself is rarely the problem; a poorly secured hostingenvironment or an outdated or poorly developed plugin usually is. I use managed WordPress hostingfor the majority of my projects, which offers a good foundation for solid WordPress security. Optionsinclude WPEngine11, ZippyKid12, Pagely13 and Synthesis14. In addition to managed hosting (andespecially if you opt for a non-managed host), consider installing a security plugin, such as BetterWP Security15 (free) or Wordfence16 (also free). Last but not least, review the "HardeningWordPress17" guide in the Codex.

Backups

If you opt for managed hosting, backups are usually included (make sure, though). If you'remanaging backups yourself or you want an extra layer of data protection, great options areavailable, including VaultPress18 ($15+ a month), CodeGuard19 ($5+ a month), BackupBuddy20($75+ per license) and BackWPup21 (free).

Import Content

With WordPress up and running, it's time to bring over all of your content.

If your old website has a CMS, an importing tool might be available. Start by viewing the list ofcontent-importing scripts22 in the Codex. If there's a match, great! Follow the instructions and getto work. If all goes well, you'll have migrated the content over without any trouble.

If your old CMS is not in the list or you don't have a CMS at all and you've got fewer than 100pages, then manual migration is probably the way to go. Copy and paste the contents, noting the oldURLs as you go (tracking the migration in a spreadsheet is a good idea).

Page 6: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

23

If you've got a custom CMS or a database of records without an importing tool and a high volume ofcontent, then you might want to bring in a specialist to move the content over before continuing. Thehigher the volume of content, the higher the chance of human error and the more importantautomating it becomes.

For our project, I've migrated the content manually and replaced the existing navigation with aWordPress menu. You can watch the process in this next screencast:

Bring Over The Design

With our content in WordPress, it's time to bring over the design. Incidentally, if you're consideringa new design, then now is a great time to look at the many excellent WordPress themes out there,both in the official repository24 and in third-party marketplaces such as ThemeForest25 andCreative Market26. For our purpose, I'll assume that you're happy with your design.

Evaluating A Design

Evaluate the source code of a prospective design as best you can before tackling the migration. Ifthe code is table-based or more complex than you're comfortable with, then migrating the designmight not be worth the effort. While anything is possible (I've migrated some complex table-baseddesigns in my time), not everything is practical.

Working With Source Code

In my experience, the easiest way to migrate is to work directly with the source code in the browser.While having access to the original hosting environment can be helpful (especially when workingwith a lot of images and downloadable files), the ways that websites are built vary so widely thatyou'll often have to reverse-engineer the original architecture in order to derive anything useful.

Page 7: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

27

Going directly to the source code in your browser of choice will save a lot of time and, barring anyimportant "behind the scenes" functionality, give you everything you need. Google Chrome28 iscurrently my browser of choice, and I've pulled our source-code samples directly from the browser.(In Chrome, go to Menu -> Tools -> View Source, or just right-click to bring up the contextualmenu.)

Create A Custom Theme

If you're new to them, learn about using themes29 in the Codex. For the migration process, you caneither build a new WordPress theme from the ground up or modify an existing theme to meet yourneeds. I recommend the latter.

Most of my migration projects have started with the latest version of WordPress' default theme(currently Twenty Twelve30). Recently, I stripped down the default theme to create my ownmigration starter theme, which I'll use in our example and which you're welcome to use yourself31.(Feel free to suggest improvements!) Let's get to work.

Download a copy32 (ZIP) of the migration starter theme or follow along in your own theme of choiceas we work through the relevant theme files.

1. Style Sheet

Our first step is to bring over the styles from the old website. In most cases, this is as simple assearching the source code for references to .css and then copying and pasting the contents fromthose style sheet(s) into our own style.css. Let's get to it.

Open up style.css.

Replace the details of the theme ("Name," "URI," "Description," etc.) with your own.

Paste in the styles from the old website.

Page 8: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

A Note About Images

As you migrate the style sheet(s), search for and update any references to images. In general, I liketo keep all images in an /images/ folder within the theme's directory. More often than not, changingthe locations of images referenced in the original CSS is necessary, and I make sure to update allreferences in the style sheet and templates accordingly.

2. Header

The next step is to create the header for our new theme. Our objective here is to merge the structureof the current code base with WordPress' templates. Here's what we're going to do:

Replicate the HTML structure of the old website.

Replace the static menu with a WordPress-powered menu.

Use WordPress' title tag and leave the wp_head hook in place.

Merge any other relevant tags from the old header.

Let's get into the code!

Original HTML

!DOCTYPE HTML

html

head

titleVegan Food Pyramid posters, postcards and wallpapers/title

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta name="google-site-verification"content="PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" /

link rel="stylesheet" type="text/css" href="style.css" media="screen" /

link rel="shortcut icon" href="http://www.veganfoodpyramid.com/favicon.ico?v=2" /

script type="text/javascript" src="//use.typekit.net/tty6xpj.js"/script

script type="text/javascript"tryTypekit.load();catch(e)/script

/head

Page 9: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

body

a href="http://veganfoodpyramid.com"h1 id="logo"Vegan Food Pyramid/h1/a

ul class="menu"

lia class="active" href="http://veganfoodpyramid.com"Products/a/li

lia href="http://veganfoodpyramid.com/wallpaper.php"Wallpaper/a/li

lia href="http://veganfoodpyramid.com/about.php"About/a/li

lia href="http://veganfoodpyramid.com/contact.php"Contact/a/li

/ul

Merged Header (header.php)

!DOCTYPE html

html

head

title?php wp_title( '|', true, 'right' ); ?/title

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta name="google-site-verification"content="PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" /

link rel="shortcut icon" href="http://www.veganfoodpyramid.com/favicon.ico?v=2" /

script type="text/javascript" src="//use.typekit.net/tty6xpj.js"/script

script type="text/javascript"tryTypekit.load();catch(e)/script

?php wp_head(); ?

/head

body ?php body_class(); ?

header

Page 10: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

a href="http://veganfoodpyramid.com"h1 id="logo"Vegan Food Pyramid/h1/a

?php wp_nav_menu( array(

'theme_location' = 'primary',

'container' = false,

'menu_class' = 'menu'

) ); ?

/header

Explanation

One of the challenges of migration is deciding whether to improve code as you go along. Our projecthas a few areas that could be improved, but Joshua and I agreed to leave them as is. Most of you willbe tackling the migration of a design that hasn't been coded to current best practices (although, infairness to the original coder, they may have been best practices at the time).

33

If time and opportunity allow, I encourage you to improve on the code. Otherwise, take comfort inthe fact that, with the website now on WordPress, improvements will be a whole lot easier down theroad.

Let's work through the changes we've made!

Doctype

Make sure to carry over the same doctype. In this case, the original HTML already has an HTML5doctype (a relatively rare occurrence on old websites). Using a modern doctype in a code basewritten for an older specification (such as XHTML or HTML4) could break the layout (especially in

Page 11: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

old browsers).

Meta tags

I usually bring over the majority of meta tags as is, replacing them in WordPress. The exception inour case is the reference to the style sheet, which is being inserted automatically viawp_enqueue_style34 in the functions.php file.

Scripts

Scripts can be tricky. If a script belongs on every page (such as a tracking script or font script), thenputting it directly in the header (or footer) file is fine. If it needs to appear only on certain pages,then a conditional tag35 will do the trick. As a best practice, register all scripts and add them to theheader (or footer) via wp_enqueue_script36. If you're up for the challenge, I recommend doing it thisway. (Check out a tutorial on enqueuing TypeKit37 the right way.)

wp_head

Leave ?php wp_head(); ? at the bottom of the /head tag in the merged header file. WordPress useswp_head38, among other things, to enqueue scripts and style sheets that are referenced in thetheme (usually in functions.php) and in plugins that you've installed. Without wp_head in place, mostfront-end plugins won't work.

body_class

Notice our use of the ?php body_class(); ? tag. WordPress uses this to provide a series of helpfulclasses to the body tag depending on the page being viewed. In our example, the body classesweren't being used. Yours might have unique IDs or classes on each page, in which case you cancreate a custom function using conditional tags to add the appropriate classes to the correspondingpages. Have a look at the Codex39 for some examples.

WordPress menus

Switching to a WordPress-powered menu is one of the more complex tasks in most basic migrations.It will be fairly straightforward for us. We have a menu with simple markup that uses an active class(generated via PHP) to indicate which page the visitor is viewing. The wp_nav_menu40 function ishighly flexible and offers built-in functionality to handle the current state of an element in the menu.I've updated the references in the style sheet to the active class and changed them to use theequivalent generated by wp_nav_menu, which is current-menu-item. Watch the screencast onimporting content to see how I've set up the menu for our example.

And that's a wrap! Let's move on to the next piece.

3. Footer

The footer is usually the most uneventful template in the migration process. As with the header, ourobjective is to merge the relevant parts of the original source code. Let's get to it!

Original HTML

Page 12: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

div id="footer"p© 2013 VeganFoodPyramid.com/p/div

script type="text/javascript"

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js'type='text/javascript'%3E%3C/script%3E"));

/script

script type="text/javascript"

try

var pageTracker = _gat._getTracker("UA-6992755-1");

pageTracker._trackPageview();

catch(err) /script

/body

/html

Merged Footer (footer.php)

div id="footer"p© ?php echo date('Y'); ? VeganFoodPyramid.com/p/div

script type="text/javascript"

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js'type='text/javascript'%3E%3C/script%3E"));

/script

script type="text/javascript"

try

var pageTracker = _gat._getTracker("UA-6992755-1");

Page 13: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

pageTracker._trackPageview();

catch(err) /script

?php wp_footer(); ?

/body

/html

Explanation

Some footers are hard to migrate (such as ones with complex menus and widgets), but most aresimple. In this case, we've merged the HTML with our footer template, making sure to preserve ourreference to the wp_footer41 hook. We've also changed the date reference to use PHP, ensuring thatit updates with each year.

4. Home Page

One of the challenges of a migration is that there are so many different ways to get the job done. Thehome page is a good illustration of this because it tends to be the most different from the rest of thewebsite. Adopting the simplest method is usually best. I've opted to put all of the home page'scontent directly in the template. Changes will be rare and can easily be made by editing thetemplate.

Let's look at the code, excluding the header and footer, which we've already covered.

Original HTML

div id="content"

div id="poster"

a href="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg"img class="product-img" src="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg" //a

div class="description"

h2Poster/h2

pA 30×20-inch poster illustrating over 125 vegan food items as an alternative to the traditional foodpyramid. This poster will catch people's attention and serve as a suggestion for food ideas./p

Page 14: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

h3$30 each/h3

pIncludes free shipping worldwide/p

a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_--xclickhosted_button_id=2FKQT879CXYYG"Buy/a

/div

/div

div id="postcard"

a href="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg"img class="product-img" src="http://veganfoodpyramid.com/images/postcard-splash.jpg" alt="Postcard Splash" //a

div class="description"

h2Postcards/h2

pBeautiful 4×6 postcards that can be mailed and shared with friends and family. Hand them out atevents. Post them on walls. Share the vegan love!/p

h3$50 for 50/h3

pIncludes free shipping worldwide/p

a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_--xclickhosted_button_id=EN387WHNSSFMW"Buy/a

/div

/div

/div !-- end content --

Merged Home Page (/page-templates/front-page.php)

?php

/**

* Template Name: Front Page Template

*/

Page 15: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

get_header(); ?

div id="content"

div id="poster"

a href="?php echo get_stylesheet_directory_uri(); ?/images/Vegan-Food-Pyramid-New.jpg"imgclass="product-img" src="?php echo get_stylesheet_directory_uri(); ?/images/Vegan-Food-Pyram-d-New.jpg" //a

div class="description"

h2Poster/h2

pA 30×20-inch poster illustrating over 125 vegan food items as an alternative to the traditional foodpyramid. This poster will catch people's attention and serve as a suggestion for food ideas./p

h3$30 each/h3

pIncludes free shipping worldwide/p

a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_--xclickhosted_button_id=2FKQT879CXYYG"Buy/a

/div

/div

div id="postcard"

a href="?php echo get_stylesheet_directory_uri(); ?/images/Vegan-Food-Pyramid-New.jpg"imgclass="product-img" src="?php echo get_stylesheet_directory_uri(); ?/images/postcard-splash.jpg"alt="Postcard Splash" //a

div class="description"

h2Postcards/h2

pBeautiful 4×6 postcards that can be mailed and shared with friends and family. Hand them out atevents. Post them on walls. Share the vegan love!/p

h3$50 for 50/h3

pIncludes free shipping worldwide/p

Page 16: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_--xclickhosted_button_id=EN387WHNSSFMW"Buy/a

/div

/div

/div !-- end #content --

?php get_footer(); ?

Explanation

The front-page.php template begins and ends with a reference to the header and footer that we'vejust prepared. In between, we'll merge the rest of the HTML, and we'll use theget_stylesheet_directory_uri42 function, which will dynamically generate references to the imagesfolder in our new theme.

5. Standard Page Template

With the header and footer done, the standard templates are usually quite easy. For brevity's sake,we'll go directly to the merged templates.

Merged Template (page.php)

?php

/**

* The template for displaying all pages.

*/

get_header(); ?

div id="content"

?php while ( have_posts() ) : the_post(); ?

Page 17: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

?php get_template_part( 'content', 'page' ); ?

?php endwhile; ?

/div

?php get_footer(); ?

Content Template (content-page.php)

?php

/**

* The template used for displaying page content in page.php

*/

?

article ?php post_class(); ?

?php the_content(); ?

/article

Explanation

There are several items to point out here:

The loop

If you're new to WordPress or programming in general, this piece of code in the #content containermight look intimidating. The "loop" is code used by WordPress to display a post's content. You canlearn more about the loop43 in the Codex. Meanwhile, just make sure that it's in there, or else thecontent you save in WordPress won't show up.

get_template_part

Page 18: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

Our page template here employs the handy get_template_part44 function, which is a great way tokeep content organized, especially in complex projects. Our website is simple enough not to warrantit, but I left it in just to show you.

post_class

I also added a reference to article (with the corresponding post_class45 function) to make furthercustomization of the design easier.

5. Full-Width Template (full-width.php)

Although not illustrated in the screencast, the design includes a full-width template for use on the"Wallpaper" page, while the standard page template is changed to a narrow width.

Let's have a look.

Merged Template (templates/full-width.php)

?php

/**

* Template Name: Full-Width Template

*/

get_header(); ?

div id="content" class="full-width"

?php while ( have_posts() ) : the_post(); ?

?php get_template_part( 'content', 'page' ); ?

?php endwhile; ?

/div

Page 19: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

?php get_footer(); ?

Explanation

With the template created, all that remains is to assign it to a page. From the "Edit Page" interface,find the "Page Attributes" box (usually right below the "Publish" box) and select "Full-WidthTemplate" from the "Templates" dropdown menu.

6. Extras

Now let's tackle some of the "extras" that sometimes come up as challenges during a WordPressmigration.

Breadcrumbs

Breadcrumbs are relatively common on websites. The easiest way to reproduce them is with aplugin. My current favorite is Breadcrumb NavXT46 (free). WordPress SEO478 also offers built-inbreadcrumbs.

Widgets

If the design you're migrating has a sidebar, you could either reproduce it as is (the migration themehas a sample sidebar in place) or integrate WordPress widgets to allow for a dynamically managedsidebar. The folks at Automattic have prepared a handy guide to widgetizing themes48. Start there.

Restricted content

In case some content needs to be restricted, WordPress offers basic password protection49 bydefault. If you want more control, use a plugin. For basic role management and content permissions,I recommend Members50 (free). For more advanced control (especially if payment is involved),consider Membership51 (which has basic and premium versions), s2Member52 (also free andpremium) and WP-Members53 (free).

Custom Post Types

Some migrations, especially ones with a lot of different types of content, call for "custom post types."You can learn about custom post types in the Codex54. To set them up, I recommend using a plugin.Two good choices are Custom Post Type UI55 and Types56 (both free).

Review Website

Now that we've wrapped up work on the theme, it's time for a review. Work carefully through thepages on the migrated website. For a large website, focus on the different templates. As you review,here are some things to watch out for:

Broken links

Make sure all links work as they should. If you have only a few pages, you can check manually. Foran automated check, use Integrity57 (free, for Mac) or Xenu's Link Sleuth58 (free, for Windows).

Broken styles

Page 20: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

Occasionally, for one reason or another, a design element of your website might have broken duringthe migration. Carefully compare the old HTML to the new to make sure you haven't missed anyimportant code and that the corresponding style sheet rules have been carried over. If all else fails, aquick rebuild of the design element on the new website Wp Twin might be in order.

Broken functionality

Test any functionality that you've migrated over, such as "Buy now" buttons, contact forms,newsletter opt-ins, "members-only" content, embedded maps, media players, etc.

Temporary links

Depending on how you've carried out the migration, temporary links to a subfolder or testing domainmight appear in your content or theme. You'll want to update these before going live. Use the Searchand Replace59 plugin (free) to check for and update links in your content.

Setting Up Redirects

If your link structure has changed (and it usually will, even if only slightly), make sure that visitorsare redirected from the old pages to the new. For small amounts of content, one of the easiest waysto set up redirects is by adding them to the .htaccess file.

Open the .htaccess file in the WordPress directory. If you don't see it, set your FTP client to showhidden files. Now, create redirect rules for each of the old pages. Be sure to put these rules afterWordPress' block of rules.

Here are the rewrite rules for our links:

Redirect 301 /wallpaper.php http://veganfoodpyramid.com/wallpaper/

Redirect 301 /about.php http://veganfoodpyramid.com/about/

Redirect 301 /contact.php http://veganfoodpyramid.com/contact/

Redirect 301 /contactthanks.php http://veganfoodpyramid.com/contact/thanks/

If editing your .htaccess file is not an option or if you're dealing with a lot of redirects, then have alook at Redirection60 (free).

Advanced tip: If the volume of redirects is very high (which is likely with a large-scale migration anda custom importing process), then consider building a function that hooks into template_redirect61,compares a generated list of cases, and then uses the wp_redirect62 function to redirect anymatches.

Going Live

Going live with a website usually involves one of two tasks:

Relocate WordPress from the development folder to the root directory.

Point the domain name from the old server to the new WordPress server.

Page 21: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

63

Relocating WordPress

If you set up WordPress in a subfolder (as we did), then going live involves a few simple steps.Follow the guide to using a pre-existing subdirectory installation64.

Once you've made the change, check immediately for any broken links that you may have missed inthe final review.

Pointing to a New Server

If you set up WordPress on a new server, then you probably used a temporary domain. Accordingly,remove references to the temporary domain before pointing the domain to the new server.

Also, if you're planning to update the name servers for your domain, then first resolve anydependencies in the current DNS records (such as hosted email and third-party services). I usuallygo live with a domain by updating the A records, leaving the name servers in place.

Conclusion

And there you have it! A successful WordPress migration is all about the details, and while this guideis by no means comprehensive, you now have a good outline of the process and a sense of some ofthe challenges you'll encounter, along with ideas for solving them. If you run into challenges alongthe way, share them in the comments below. Now get migrating!

(al)

Footnotes1 http://www.smashingmagazine.com/wp-content/uploads/2013/04/2.png2http://www.veganfoodpyramid.com/3http://codex.wordpress.org/Installing_WordPress#Local_Installation_Instructions4http://www.smashingmagazine.com/wp-content/uploads/2013/04/3.png5http://www.gravityforms.com/6 http://wordpress.org/extend/plugins/formidable/7http://wordpress.org/extend/plugins/contact-form-7/8

Page 22: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine

http://wordpress.org/extend/plugins/wordpress-seo/9 http://wpml.org/10http://wordpress.org/extend/plugins/qtranslate/11 http://wpengine.com/12https://www.zippykid.com/13 https://page.ly/14 http://websynthesis.com/15http://wordpress.org/extend/plugins/better-wp-security/16http://wordpress.org/extend/plugins/wordfence/17http://codex.wordpress.org/Hardening_WordPress18 http://vaultpress.com/19https://www.codeguard.com/20 http://ithemes.com/purchase/backupbuddy/21http://wordpress.org/extend/plugins/backwpup/22 http://codex.wordpress.org/Importing_Content23http://www.smashingmagazine.com/wp-content/uploads/2013/04/4.png24http://wordpress.org/extend/themes/25 http://themeforest.net/category/wordpress26https://creativemarket.com/themes/wordpress/27http://www.smashingmagazine.com/wp-content/uploads/2013/04/5.png28https://www.google.com/chrome/29 https://codex.wordpress.org/Using_Themes30http://wordpress.org/extend/themes/twentytwelve31 https://github.com/sirjonathan/migration-theme/32 https://github.com/sirjonathan/migration-theme/archive/master.zip33http://www.smashingmagazine.com/wp-content/uploads/2013/04/6.png34http://codex.wordpress.org/Function_Reference/wp_enqueue_style35http://codex.wordpress.org/Conditional_Tags36http://codex.wordpress.org/Function_Reference/wp_enqueue_script37http://wptheming.com/2013/02/typekit-code-snippet/38http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head39http://codex.wordpress.org/Function_Reference/body_class40http://codex.wordpress.org/Function_Reference/wp_nav_menu41http://codex.wordpress.org/Function_Reference/wp_footer42http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri43http://codex.wordpress.org/The_Loop44http://codex.wordpress.org/Function_Reference/get_template_part45http://codex.wordpress.org/Function_Reference/post_class46http://wordpress.org/extend/plugins/breadcrumb-navxt/47http://wordpress.org/extend/plugins/wordpress-seo/48 http://automattic.com/code/widgets/themes/49http://codex.wordpress.org/Using_Password_Protection50http://wordpress.org/extend/plugins/members/51http://wordpress.org/extend/plugins/membership/52http://wordpress.org/extend/plugins/s2member/53http://wordpress.org/extend/plugins/wp-members/54 http://codex.wordpress.org/Post_Types55http://wordpress.org/extend/plugins/custom-post-type-ui/56http://wordpress.org/extend/plugins/types/57 http://peacockmedia.co.uk/integrity/58http://home.snafu.de/tilman/xenulink.html59http://wordpress.org/extend/plugins/search-and-replace/60http://wordpress.org/extend/plugins/redirection/61http://codex.wordpress.org/Plugin_API/Action_Reference/template_redirect62http://codex.wordpress.org/Function_Reference/wp_redirect63http://www.smashingmagazine.com/wp-content/uploads/2013/04/7.png64http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory#Using_a_pre-existing_subdirectory_install

? Back to top

Tweet itShare on Facebook

http://www.smashingmagazine.com/2013/05/15/migrate-existing-website-to-wordpress/

Page 23: Migrating A Website To WordPress Is Easier Than You Think – Smashing Magazine