Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Migrating A Website To WordPress Is Easier Than You Think

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!

HTML Website To WordPress

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.

Further Reading on SmashingMag: Link

About This Guide Link

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 Link

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 Link

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.

Basic Steps Link

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

  1. 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 special attention.
  2. Set up environment.
    Set up WordPress and get ready to import.
  3. Import content.
    Bring over and organize your content, whether via an importing tool, manual entry (for a small amount, when no tool is available) or a custom importing process.
  4. Migrate design.
    Incorporate your existing design into a custom WordPress theme.
  5. Review website, go live.
    Carefully review the import, making adjustments where needed, set up any URL redirects, and then go live.

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

Start With A Plan Link

The key to a successful migration is to carefully evaluate your current website. You need to figure out 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 two lists of questions to ask as you work out a plan.

Imported Content Link

  • 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 post types?
  • 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 Link

  • 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 Link

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

Set Up WordPress Link

Before importing the content, we need to get WordPress ready to go. If you’re just experimenting or if you prefer offline development, start with a local installation of WordPress6. Otherwise, the next step is to install WordPress with your current hosting provider; or you could use the migration process as a great opportunity to move to a new host.

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

Setting Up WordPress

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

Settings and Plugins Link

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”-style permalinks.
  • Update users.
    I create an admin-level account for myself and any admin or editor accounts that are needed for clients and collaborators. I also remove the default “admin” user name if it exists (a basic but wise step for WordPress security).

Depending on the needs of the project, we might have to preinstall plugins. Here are the major categories 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 Forms7 ($39+ per license). Other options are Formidable8 (with free and pro versions) and Contact Form 79 (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 solidly supported by the WordPress plugin ecosystem. And if your old website includes custom meta descriptions, giving them a new home during the importing process is important. I recommend WordPress SEO4610 (free).
  • Multiple languages
    If your old website supports multiple languages, WordPress has you covered. My plugin of choice is WPML11 ($79 per license, free for non-profits). Another option is MultilingualPress12 (free).
  • Security
    WordPress security is a topic near and dear to me. The increasing popularity of WordPress has made it a target for security attacks. WordPress itself is rarely the problem; a poorly secured hosting environment or an outdated or poorly developed plugin usually is. I use managed WordPress hosting for the majority of my projects, which offers a good foundation for solid WordPress security. Options include WPEngine13, ZippyKid14, Pagely15 and Synthesis16. In addition to managed hosting (and especially if you opt for a non-managed host), consider installing a security plugin, such as Better WP Security17 (free) or Wordfence18 (also free). Last but not least, review the “Hardening WordPress19” guide in the Codex.
  • Backups
    If you opt for managed hosting, backups are usually included (make sure, though). If you’re managing backups yourself or you want an extra layer of data protection, great options are available, including VaultPress20 ($15+ a month), CodeGuard21 ($5+ a month), BackupBuddy22 ($75+ per license) and BackWPup23 (free).

Import Content Link

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 of content-importing scripts24 in the Codex. If there’s a match, great! Follow the instructions and get to 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 100 pages, then manual migration is probably the way to go. Copy and paste the contents, noting the old URLs as you go (tracking the migration in a spreadsheet is a good idea).


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

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

Bring Over The Design Link

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

Evaluating A Design Link

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

Working With Source Code Link

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 working with a lot of images and downloadable files), the ways that websites are built vary so widely that you’ll often have to reverse-engineer the original architecture in order to derive anything useful.


Going directly to the source code in your browser of choice will save a lot of time and, barring any important “behind the scenes” functionality, give you everything you need. Google Chrome28 is currently 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 contextual menu.)

Create A Custom Theme Link

If you’re new to them, learn about using themes29 in the Codex. For the migration process, you can either build a new WordPress theme from the ground up or modify an existing theme to meet your needs. 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 own migration 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 choice as we work through the relevant theme files.

1. Style Sheet Link

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

  1. Open up style.css.
  2. Replace the details of the theme (“Name,” “URI,” “Description,” etc.) with your own.
  3. Paste in the styles from the old website.

A Note About Images Link

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

2. Header Link

The next step is to create the header for our new theme. Our objective here is to merge the structure of 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 Link

<title>Vegan 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="" />
<script type="text/javascript" src="//"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<a href=""><h1 id="logo">Vegan Food Pyramid</h1></a>
<ul class="menu">
   <li><a class="active" href="">Products</a></li>
   <li><a href="">Wallpaper</a></li>
   <li><a href="">About</a></li> 
   <li><a href="">Contact</a></li>

Merged Header (header.php) Link

<!DOCTYPE html>
   <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="" />
   <script type="text/javascript" src="//"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <?php wp_head(); ?>

<body <?php body_class(); ?>>

      <a href=""><h1 id="logo">Vegan Food Pyramid</h1></a>
      <?php wp_nav_menu( array( 
            'theme_location' => 'primary',
            'container' => false,
            'menu_class' => 'menu'
      ) ); ?>

Explanation Link

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

Website Review

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

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 HTML5 doctype (a relatively rare occurrence on old websites). Using a modern doctype in a code base written for an older specification (such as XHTML or HTML4) could break the layout (especially in old browsers).
  • Meta tags
    I usually bring over the majority of meta tags as is, replacing them in WordPress. The exception in our case is the reference to the style sheet, which is being inserted automatically via wp_enqueue_style33 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), then putting it directly in the header (or footer) file is fine. If it needs to appear only on certain pages, then a conditional tag34 will do the trick. As a best practice, register all scripts and add them to the header (or footer) via wp_enqueue_script35. If you’re up for the challenge, I recommend doing it this way. (Check out a tutorial on enqueuing TypeKit36 the right way.)
  • wp_head
    Leave <?php wp_head(); ?> at the bottom of the </head> tag in the merged header file. WordPress uses wp_head37, among other things, to enqueue scripts and style sheets that are referenced in the theme (usually in functions.php) and in plugins that you’ve installed. Without wp_head in place, most front-end plugins won’t work.
  • body_class
    Notice our use of the <?php body_class(); ?> tag. WordPress uses this to provide a series of helpful classes to the <body> tag depending on the page being viewed. In our example, the <body> classes weren’t being used. Yours might have unique IDs or classes on each page, in which case you can create a custom function using conditional tags to add the appropriate classes to the corresponding pages. Have a look at the Codex38 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_menu39 function is highly 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 the equivalent generated by wp_nav_menu, which is current-menu-item. Watch the screencast on importing 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.

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

Original HTML Link

<div id="footer"><p>© 2013</p></div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6992755-1");
} catch(err) {}</script>


<div id="footer"><p>© <?php echo date('Y'); ?></p></div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6992755-1");
} catch(err) {}</script>

<?php wp_footer(); ?>


Explanation Link

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

4. Home Page Link

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

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

Original HTML Link

<div id="content">

<div id="poster">
<a href=""><img class="product-img" src="" /></a>
<div class="description">
<p>A 30×20-inch poster illustrating over 125 vegan food items as an alternative to the traditional food pyramid. This poster will catch people’s attention and serve as a suggestion for food ideas.</p>
<h3>$30 each</h3>
<p>Includes free shipping worldwide</p>
<a class="button" href="">Buy</a>

<div id="postcard">
<a href=""><img class="product-img" src="" alt="Postcard Splash" /></a>
<div class="description">
<p>Beautiful 4×6 postcards that can be mailed and shared with friends and family. Hand them out at events. Post them on walls. Share the vegan love!</p>
<h3>$50 for 50</h3>
<p>Includes free shipping worldwide</p>
<a class="button" href="">Buy</a>

</div> <!-- end content -->

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

 * Template Name: Front Page Template

get_header(); ?>

<div id="content">

   <div id="poster">
      <a href="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg" /></a>
      <div class="description">
         <p>A 30×20-inch poster illustrating over 125 vegan food items as an alternative to the traditional food pyramid. This poster will catch people’s attention and serve as a suggestion for food ideas.</p>
         <h3>$30 each</h3>
         <p>Includes free shipping worldwide</p>
         <a class="button" href="">Buy</a>

   <div id="postcard">
      <a href="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/postcard-splash.jpg" alt="Postcard Splash" /></a>
      <div class="description">
         <p>Beautiful 4×6 postcards that can be mailed and shared with friends and family. Hand them out at events. Post them on walls. Share the vegan love!</p>
         <h3>$50 for 50</h3>
         <p>Includes free shipping worldwide</p>
         <a class="button" href="">Buy</a>

</div> <!-- end #content -->

<?php get_footer(); ?>

Explanation Link

The front-page.php template begins and ends with a reference to the header and footer that we’ve just prepared. In between, we’ll merge the rest of the HTML, and we’ll use the get_stylesheet_directory_uri41 function, which will dynamically generate references to the images folder in our new theme.

5. Standard Page Template Link

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) Link

 * The template for displaying all pages.

get_header(); ?>

<div id="content">

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

      <?php get_template_part( 'content', 'page' ); ?>
   <?php endwhile; ?>


<?php get_footer(); ?>

Content Template (content-page.php) Link

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

   <article <?php post_class(); ?>>
      <?php the_content(); ?>

Explanation Link

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 container might look intimidating. The “loop” is code used by WordPress to display a post’s content. You can learn more about the loop42 in the Codex. Meanwhile, just make sure that it’s in there, or else the content you save in WordPress won’t show up.
  • get_template_part
    Our page template here employs the handy get_template_part43 function, which is a great way to keep content organized, especially in complex projects. Our website is simple enough not to warrant it, but I left it in just to show you.
  • post_class
    I also added a reference to <article> (with the corresponding post_class44 function) to make further customization of the design easier.

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

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) Link

 * 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; ?>


<?php get_footer(); ?>

Explanation Link

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-Width Template” from the “Templates” dropdown menu.

6. Extras Link

Now let’s tackle some of the “extras” that sometimes come up as challenges during a WordPress migration.

  • Breadcrumbs
    Breadcrumbs are relatively common on websites. The easiest way to reproduce them is with a plugin. My current favorite is Breadcrumb NavXT45 (free). WordPress SEO4610 also offers built-in breadcrumbs.
  • Widgets
    If the design you’re migrating has a sidebar, you could either reproduce it as is (the migration theme has a sample sidebar in place) or integrate WordPress widgets to allow for a dynamically managed sidebar. The folks at Automattic have prepared a handy guide to widgetizing themes47. Start there.
  • Restricted content
    In case some content needs to be restricted, WordPress offers basic password protection48 by default. If you want more control, use a plugin. For basic role management and content permissions, I recommend Members49 (free). For more advanced control (especially if payment is involved), consider Membership50 (which has basic and premium versions), s2Member51 (also free and premium) and WP-Members52 (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 Codex53. To set them up, I recommend using a plugin. Two good choices are Custom Post Type UI54 and Types55 (both free).

Review Website Link

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

  1. Broken links
    Make sure all links work as they should. If you have only a few pages, you can check manually. For an automated check, use Integrity56 (free, for Mac) or Xenu’s Link Sleuth57 (free, for Windows).
  2. Broken styles
    Occasionally, for one reason or another, a design element of your website might have broken during the migration. Carefully compare the old HTML to the new to make sure you haven’t missed any important code and that the corresponding style sheet rules have been carried over. If all else fails, a quick rebuild of the design element on the new website might be in order.
  3. 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.
  4. Temporary links
    Depending on how you’ve carried out the migration, temporary links to a subfolder or testing domain might appear in your content or theme. You’ll want to update these before going live. Use the Search and Replace58 plugin (free) to check for and update links in your content.

Setting Up Redirects Link

If your link structure has changed (and it usually will, even if only slightly), make sure that visitors are redirected from the old pages to the new. For small amounts of content, one of the easiest ways to 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 show hidden files. Now, create redirect rules for each of the old pages. Be sure to put these rules after WordPress’ block of rules.

Here are the rewrite rules for our links:

Redirect 301 /wallpaper.php
Redirect 301 /about.php
Redirect 301 /contact.php
Redirect 301 /contactthanks.php

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

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

Going Live Link

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

  1. Relocate WordPress from the development folder to the root directory.
  2. Point the domain name from the old server to the new WordPress server.

Going Live!

Relocating WordPress Link

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 installation62.

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

Pointing to a New Server Link

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 any dependencies in the current DNS records (such as hosted email and third-party services). I usually go live with a domain by updating the A records, leaving the name servers in place.

Conclusion Link

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


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62

↑ Back to top Tweet itShare on Facebook

Jonathan Wold is the husband of a beautiful redhead named Joslyn and the father of a baby boy named Jaiden. He works at Sabramedia, a web design and development company that specializes in WordPress powered media sites. He is also a core developer and evangelist for Newsroom, a newspaper paywall and CMS built for the newspaper industry.

  1. 1

    Ertuğrul Sağlam

    May 15, 2013 1:12 am


  2. 2

    Very useful! Good post!

  3. 3

    Michael Marlovics

    May 15, 2013 2:59 am

    Excellent, indeed! Where did you get the “powering over 17% of the Web” figure?

  4. 7

    Very interesting article. Just made the move from static asp classic pages (asp used only for use of include files for header and footer) to WordPress a few weeks ago.

    Built a custom spider in PHP that crawled my old site, saved the html to database, stripped away repeated code, ran it through tidy, then manually mapped each page to a newly set up WordPress page list. I used this plugin for quickly creating all the empty pages – – then pushed them straight into WP.

    The redirecting was done with the mapping-data in my database (with fields: clean html, old url, WP url) in a custom small classic ASP snippet.

    Hell of a process, but the result of getting it all in place – finally – is well worth it. Maintaining the site is for the first time not a one man job, or a total pain. See:

  5. 8

    This is something interesting and I’m so new to WordPress. I guess I can start working with wordpress soon!!

  6. 9

    Ruly Aperta

    May 15, 2013 3:59 am

    Aww … Nice guide!

  7. 10

    These days you should go away from WordPress :)

    • 11

      I love when people make blanket statements like that and then fail to provide a single piece of relevant information as to why.

      • 12

        Scott Lawrence

        May 15, 2013 4:49 pm

        1. It’s a CMS designed for blogs

        This article assumes that the reader wants to migrate to WordPress, it also assumes that WordPress is the right tool for the job, which in lots of cases it’s not .

        • 13

          To give you some alternative choices that would probably be better than wordpress for your site if it’s not a blog:

          Apostrophe 2 CMS (a JavaScript cms based on Node.js. You’ll get faster response than php and mysql)

          There’s Joomla, Drupal, Concrete5 and CushyCMS just to name a few.
          Look them up and you might find one which has strengths more suitable to your needs.

          For everyone else, there’s WordPress.

          Personally, I hate cms’s for my personal sites. I’d rather manage them from my VS 2013 or Dreamweaver CC and update them via ftp. clients on the other hand get whatever they want :)

          • 14

            WordPress is not a blog CMS ANYMORE. I use WP for any kind of site, from small to medium sizes, from blog to e-commerce, from presentation to creative sites. It’s powerful and easy to use and customize.

  8. 15

    John Saddington

    May 15, 2013 4:25 am

    VaultPress now has a $5 option as well.

  9. 16

    Nice article.
    I suggest you Polylang for multiple languages.

    • 17

      Polylang is a much better free multilingual plugin. qTranslate has some issues.

  10. 18

    I would argue, that while this article goes into great detail and length about the steps of transferring a website from one CMS to WordPress (You can pretty much use the steps outlined above for any CMS), the title should be re-worked. This can easily turn into a complicated process. A bunch of our clients are unhappy on their current CMS, and are shocked to find out how much it costs to build it in another CMS. The problem is that you have to build everything over to fit the “themes” or use the custom CMS elements of the CMS you are transferring to. While dividing it into 5 steps can make it seem “easy,” this is deceiving to clients who know nothing about building websites. The 5 high level steps are loaded with exceptions and scenarios. Also, the import content in an of itself is a beast. Our clients mostly opt to manually do this because the cost for tools that do the import are not cheap, and not to mention, they end up having to go back and fix some character and spacing issues that occur from the transfer. As you can imagine, this is both time consuming and frustrating to them. On some level, I think it allows them to revisit the content and determine the pages that need updating or that can be removed completely, however the changes they make are miniscule to the bulk of the content.

    I just don’t think it should ever be said that transferring from one CMS to another is “easy.” It’s basically rebuilding the site in another CMS. Some clients think it’s as simple is “importing” from one system to another with some type of utility, which obviously is not the case.

    • 19

      Haha, spot on Rachel. The content transfer is by large the hardest part of the process. For those going with large, enterprise sites, check out a company named Kapow out of Texas. They were a tremendous help to us at UNC-Chapel Hill. That said, it was a flawed, expensive process. Money is everything if you’re going with an automated content transfer.

    • 20

      Spot on. Also, glad to see a bigger post in between mostly one-liners :]

      Perhaps if you run a simple blog it’s easy to swap CMS, and maybe Smashing thinks most readers maintain small business sites, portfolio pages and whatnot. They could well be right in that.

      Though, as for all the people that build web apps, e-commerce sites and intranets (etc), they’ll probably see WordPress in the title and think to themselves “ah well, maybe they’ll have something more interesting tomorrow”.

    • 21

      Larry Kokoszka

      May 15, 2013 9:48 pm

      Rachel, well said. I thought the same thing while reading.

      Guys, you’ve provided a good checklist of items to cover but I agree that there a lot more ‘exceptions’ and ‘scenarios’ that you have to deal with, as well as the issue of working things into themes.

      For example, with the Vegan site example, presumably the site owner wants to move to WordPress because they want more control over their content. That being the case, giving them an HTML-heavy page will just lead to frustration on their end and they will, surely, mess up the structure and need to call you to fix it. If they were good enough to do the HTML correctly, they could probably do the migration themselves.

      Additionally, the code you were working with in the non-wordpress site was structured 10x better than any HTML to WP conversion I’ve ever done, so I don’t feel that it is realistic.

      Really, the best way, imho, to do the ‘wallpaper’ page is set up a wall paper custom post type and make the ‘wallpaper’ link in the main nav go to an archive page. This way, the end user, who (again) doesn’t know html or they would cut and paste it themselves, can just fill in a form in the ‘wallpaper’ custom post type without needing HTML. It’s intuitive and less error prone.

      You guys have a very clear writing style and good, short, clear videos, but I would like to see you break this into 5 different posts and deal with the ‘ugly’ stuff in detail. It’s more common that we see that.

    • 22

      Rob McGuire

      May 17, 2013 8:09 am

      This is a general outline of a blog migration, but Rachel is right about how some of the key components are breezed over.

      I do a lot of HubSpot migrations to WordPress, and I do this with a combination of scripts and manual work which covers topics that many people just don’t realize needs to happen in order for the migration to be successful.

      And for custom CMS sites, those vary depending on how the site was originally built and how the database (if it exists) is structured. Some can be bent to allow for easier migration, while others may not have that option and less desirable alternatives have to be explored.

    • 23

      @Jonathan Wold – I don’t remember when (and if) I ever saw the full and informative tutorial like the one above. Thank you!

      @Rachel, I totally agree that CMS migration is definitely not an easy task, but the post above at least outlines the major points, which better demonstrate the complexity of the whole process. Other than that, I disagree as to the import tools and their price. WordPress offers free import tools for some platforms, there are some reasonably priced extensions too. I used Cms2Cms at, it worked awesome to migrate my Joomla website to WordPress, and cost little.

      @Arvo, of course, migration is always a risk for SEO (unless your URLs don’t change). But there’s 301 redirect to help you keep most of your rankings (you can see the rules above). However, even if you redirect properly, Google may take its time to index your new location, and until then expect a drop in traffic (my previous site took about 3 weeks to recover). The best plugin is Redirection, (it’s actually mentioned in the post)

      • 24

        @David – look into .Net CMS-based import tool pricing :-)
        And actually my point was that these tools never completely did the job in it’s fullest. We always have to go back and “clean up” the text and formatting on a bunch of pages, thus defeating the purpose of the import tool.

  11. 25

    Evert Albers

    May 15, 2013 7:19 am

    As we speak, I am in the process of moving a website FROM WordPress to Bolt

    I have nothing against WP, but it does not always work for my clients.

  12. 26

    Henri Lotin

    May 15, 2013 1:04 am

    Thanks Jonathan, very useful !

  13. 27

    Fantastic information that I will be sharing with prospective clients indeed! I look forward to following your future posts.

  14. 28

    Jonathan Motes

    May 15, 2013 12:11 pm

    You don’t need a custom-named template for the home page. Files named front-page.php and placed in the theme root are used automatically for the page set as the Front Page in Settings > Reading – eliminating the need to assign a custom template to your Home page.

  15. 29

    Hi nice tutorial for wordpress migration.
    Its really help full for those looking for a simple solution for their basic HTML site to wordpress, just like we are doing. ;)

  16. 30

    Hector Calleja

    May 15, 2013 1:35 pm

    Wonderful! :)



  17. 31

    Why does wordpress doesn’t work if we rename the folder on which installed the wordpress ? It must be easy to implement this feature.

  18. 33

    Charles-Henri Lison

    May 15, 2013 6:38 pm

    Folks, out of topic I know, I wanted to access this article from my RSS reader (Netvibes) and the link took me to this page:

    I’ve got the feeling you didn’t want to do that.

  19. 34

    Great write-up, Word press is one of the most powerful and flexible platforms out there right now while still being very simple to use. It can seem overwhelming to move your entire site over but it really will help in the long run. Thanks for showing it isn’t as daunting as one might think!

  20. 35

    Boris Kuzmanov

    May 17, 2013 2:02 pm

    Great article Jonathan!

  21. 36

    If I transfer my existing website to WordPress site, will this hurt my Google visibility rankings, and what is the best plugin to maintain the SEO management?

  22. 37

    Francesco Stiffoni

    May 18, 2013 8:14 am

    I enjoy reading your article, Jonathan. A very good job as usual :)

  23. 39

    Linda Watson

    May 20, 2013 3:30 am

    I’m stuck half-way through a migration from Squarespace 5 to WordPress. The text content came over fine but I can’t get the images to come among nicely. It’s a pretty big site ( Cook for Good) and I’d like to keep my SEO, such as it is. Any tool suggestions or advice?
    Yaaay, vegan food pyramid!

  24. 40

    Fernando Seminario

    May 20, 2013 6:21 am

    Great Article! I had been looking for a one stop for most initial WP setups.

    I encountered a PHP error when testing out your theme though.

    The error was on line 24 of header.php.

    “Parse error: syntax error, unexpected ‘[‘, expecting ‘)’ in /home/content/33/10499733/html/wp/wp-content/themes/migration-theme-master/header.php on line 24”

    A parenthesis was missing:

    ‘primary’ ); ?>

    • 41

      Jonathan Wold

      May 24, 2013 4:09 pm

      Whoops, sorry about that! Another gentleman caught the same submitted a pull request on Github. I’ve accepted it and we should be good to go!

  25. 42

    Hi Jonathan

    This is a great tutorial for a beginner like me. I come from a eLearning background and learning wordpress and joomla to create custom designs is tough. This has helped me a lot.

    I am also thinking of converting your article to a e-learning video. What are your thoughts?

    • 43

      Jonathan Wold

      May 31, 2013 9:52 am

      You are more than welcome to create your own guide based on the article – I’d love to see it when you’re done!

  26. 44


    May 21, 2013 9:52 pm

    Good tips to migrate to WordPress. I hope I can try them out to implement it on my website. And you can also see this recent PPT on Setting up a WordPress websites in this link

  27. 45

    Nikki Snodgrass

    May 22, 2013 9:13 am

    Great post. At the moment, we’re bringing our WordPress blog content over to our agency’s website (in the canonical sense), so this is really helpful, thinking in “reverse” terms

  28. 46

    “Migrating A Website To WordPress Is Easier Than You Think”… until you use plugins or themes. Enjoy as you bask in the outdated plugins, 10 copies of 4 different versions of jquery, 4 copies of different versions of the thumbnail php file. WordPress is so much fun!

  29. 47

    Ronald Mason

    May 25, 2013 6:11 am

    Amazing how a CMS/Framework designed for blogging has slowly become so popular and easy to adapt to suit the needs of almost any business online.

    Great article Jonathan.


    Ronald Mason
    Web / UI Designer

  30. 48

    You gave wonderful tutorial. This is great help for me. I have started my work to covert my website to wordpress. Thanks for great help!

  31. 49

    Great tutorial but with me being a newbie to converting a html site to wordpress it seems a very daunting task i’m debating on just modding a theme up to look like my website but i guess that wouldn’t be exact. Just wish there was a complete guide on how to migrate a html 5 site to wordpress every tutorial i read seems to be missing steps as such.

    can anybody please help me do this with a dummies guide ? i feel dumb even though i come from a php background (out of touch now)

    • 50

      Yes, I’m in the same situation, and this guide didn’t make it that much clearer. He makes it look easy to migrate the design, but I also feel like I’m missing a lot of steps.

      If you’ve found something in the time from your comment to mine.. please share! Otherwise, best of luck!

  32. 51

    Hatim Zuzzer Shamsuddin

    August 17, 2013 3:07 am

    Excellent! Just what I needed! Thanks Jonathan!

  33. 52

    This is wonderful. I am building a site with login page, registration page, member area that allows the users to upload their profile pictures and couples of some social functions. Is it possible to run it on wordpress? (I would want my login & registration pages to be different from wordpress default). Can I run all of these?

  34. 53

    Can you suggest a more in-depth tutorial or guide to styling the menu? My current site has a left-hand vertical menu using images – how would I set this up using your “migration” theme?

  35. 54

    Very useful post. Im in the process finishing up development on my portfolio site and wanted to have blogging integrated with it. Im still a student and was unsure as to how I would accomplish this. I knew I wanted to use WordPress for my blogging purposes but didnt know how or if I could use my own code in the cms. This made my day. Thanks a ton. Now to do some more research. ..

  36. 55

    the heading of this cought me out.. its Not easy!
    with a lot of work and intelligence it might be easy. I have neither, that is why the heading cought me out.

  37. 56

    Brilliant tutorial!

  38. 57

    michal czerlikowski

    October 31, 2013 2:09 am

    just amazing and so simple to follow

  39. 58

    Thanks for this fabulous and informative post…

  40. 59

    Brahim BOULOUAYZ

    November 21, 2013 3:54 am

    Easier than we think, but it still for beginners !

  41. 60

    philip Hewitson

    December 5, 2013 12:38 am

    Hi Jonathan

    Thanks for the detailed guide, I moved my HTML site over to wordpress in May mainly to improve the design and as I find wordpress easier to use, plugins, adding users, scheduling content etc.
    The week after I did notice a drop in traffic but thought it would bounce back after a month but it never did.
    The site gets new content on a daily basis and has done for a few months now but search engine traffic never seems to grow, on average the search engine traffic is 50 visits a day.
    I’ve been tracking some of the pages by monitoring the targeted keywords in serpfox and it’s seems serp positions go from one extreme to another bouncing from high and low pages/positions then disappearing completely.

    Do you think I have done something wrong when migrating my site because when it was a HTML site I never had any of these issues or am I missing something?

    Any help or advice would be very much appreciated.

  42. 61

    Thank you so much for the “migrate-existing-website-to-wordpress” tutorial.

  43. 62

    Rubén David Bello Gómez

    December 6, 2013 2:38 pm

    Hi! I have this website design for a website/blog I have to develop and I have chosen wordpress as my main tool for all the advantages it offers me (tags, users, and everything related with the posts management). The problem comes when I have to adapt the design that can’t be untouched to the future website, the suggestions I read in the article are either create a new theme from the ground or to modify an existing theme, I’ve tried modifying a theme but it’s just too tricky to make it look like my design, I have knowledge in html, css and php, I’d just wish there were some easy way to make it look like my exact design, any help on how to take the first steps will be appreciated.
    Thank you.

  44. 63

    Thanks. I knew there is a way. But I am one of those that have different kind of problem. My site is old and by today standards ugly. I want to make new desigh from the scratch but I want to keep using existng detabase. It is property agency web site and you can imagine how big db of 10 years worth of data collecting could be. Is it possible to keep using that db in new wp site?

    Tnajks in advance

  45. 64

    Thanks for providing the detailed tutorial on migrating a website to wordpress.

  46. 65

    You mean 17% of the .03% of the internet we can access via regular browsers. Get your facts straight.

  47. 66

    Robin Solanki

    March 18, 2014 7:44 am

    This post is incredible, all my queries to migrate from a static HTML to wordpress has been resolved.

    Thanks a lot of sharing this.

  48. 67

    dude you just saved me $500
    thank you for this tutorial !
    Now I’m going to try to build my theme from scratch

  49. 68

    Krishnakumar K A

    March 28, 2014 9:37 am

    Hi, Thank you for this article. I have a free blog posting website using ArticleSetup. I would like to migrate that website to WordPress. Issue with ArticleSetup another website called ArticleSynergy automatically posts Articles. Currently my website Articles crossed 40k! Will it be possible to migrate the website to WordPress?

  50. 69

    I am currently facing the same problem.

    I have to migrate a PHP website (non-wordpress, non-CMS) to WordPress 3.8.3!
    My real problem is on “Importing content” part. How to modelize the existing datas in WordPress? A priori, there are 6 custom post fields!

    How to develop it? I think about using plugins: Pods framework or other!!

  51. 70

    Wow!!! Its really simple to learn the conversion of the CMS into WordPress from your blog…I had gone through many blogs, websites, etc but none of them are easy to learn…Finally, after reading your blog, I get to know more about how to convert the HTML to WordPress in an easy manner…Thanks for sharing the post with us…

  52. 71


    First of all, thanks for providing this tutorial on converting a HTML website to WordPress.

    I have a project that I am working on for a client that requires multiple menu’s/navigation bars on five different pages on their website.

    For example the home page requires:

    Top navigation bar with links to four other pages followed by content and then an additional navigation bar with links to four other pages followed by additional content. The top and bottom navigation bars on each page will have links to different pages.

    I have not been able to find a solution for this as yet in WordPress. If I build this site in HTML/CSS, would I be able to migrate this over to WordPress? I have not been able to find a theme that supports the requirement of the Client site.

    Thanks in advance for your assistance in answering this question.


    On the About Us page this pattern would be repeated

    This pattern will be repeated on three other pages.

    • 72

      Vijeet Deliwala

      June 24, 2015 11:25 am

      Hi Ross,

      I came across the same issue as the HTML site used a custom menu with custom structure and it was nested few levels deep……..
      The solution I found through some custom functions is to use custom function in functions.php

      function draw_nav_menu() {
      $menu_name = ‘nav-menu’; // specify custom menu slug
      if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
      $menu = wp_get_nav_menu_object($locations[$menu_name]);
      $menu_items = (array) wp_get_nav_menu_items($menu->term_id);

      $menu_list = ” .”\n”;
      $menu_list .= “\t\t\t\t”. ” .”\n”;
      foreach ((array) $menu_items as $key => $menu_item) {
      /* your menu structure here */
      $menu_list .= ” .”\n”;
      $menu_list .= “\t\t\t”. ” .”\n”;
      echo $menu_list;

      and then place this function in header.php


      Hope this helps somebody………….

      And very nice Tutorial Jonathan,I really enjoyed it :)

  53. 73

    Great post.
    An easy way to migrate HTML site to WP is to make the theme from current design (online or via plugin):

  54. 74

    This is such a great article! We also created an article related to this. These 12 reasons will help website owners decide to convert their html site to WordPress. You may check it here

  55. 75


  56. 76

    This is a great article and I have a lot of respect for you guys over at Smashing Magazine.

    I originally learned WordPress themes from a video tut on WordPressTuts and it has served me well ever since.

    I have also put together a ten part video series on how to build a WordPress website that I’d love to share with you and your readers. Here is the link to the first post

    As always, your posts are thorough, well-written, and engaging. Thanks for putting all this together!

  57. 77

    I have built a tool that lets you convert any site into a WordPress theme. The tool is free and lets you download the theme as a zip file. It might interest some people.

  58. 79

    Very insightful and clear, thanks for this.


  59. 80

    imtiyaz Nabi masoodi

    March 15, 2015 3:01 pm

    Thanks !!
    I always used to open and close wordpress just because there is no funtionality to change the code.Few days back one of my clients told to change html into wordpress.I was forced to see if there is any option.I got headache because there was no article online much satisfactory.I downloaded videos.Although good enough but they could not give me what you gave.Thanks again now i will never leave wordpress for ever.And credit goes to you.
    My salam to you and also thanks for red headed lady.Pay my salam to her also for getting such a nice husband.
    THanks again with regards

  60. 81

    Hi, I’m glad that I came into this blog post. This is very helpful especially that I’m a WordPress beginner and working on migrating most of our websites to WordPress.

    Now, I have a problem, but I haven’t really thoroughly search of the solution. We are using WordPress as a multi-site solution. One install for all our websites. I have already setup this and can choose different themes per site(using the UI). Please, can you give me some hint or tips on how to create/migrate different contents for these multi-sites.

    Thank you very much. I would appreciate your response.

  61. 82

    This is seriously a great guide!!

  62. 83

    I originally learned WordPress themes from a video tut on WordPressTuts and it has served me well ever since.

  63. 84

    Really great article, very simple and concise, I remember when I tried to build my first wordpress theme(years back). I read an article that was like 40 pages, I think it took me like a week to finally work out the bugs in it. It’s just awesome when people don’t over complicate things that could be made simpler. So thank you again for a great article. I’ve been building wordpress themes for a couple of years now, infact I’ve actually made my own html to wordpress theme conversion program.

  64. 85

    Nice article! I almost feel like I could migrate my FrontPage site using this article as a guide. Do these instruction apply to MS FrontPage generated sites? Is it possible to recommend someone capable of doing this with 100-200 of the best pages from my site?

    • 86

      Lenny, so I’m not the only one who still has a website made with FrontPage?

      I learned FP in a weekend in 2001, have been using it since. Still use it to update the site.

      Only thing it doesn’t do I wish it did: be able to collect comments. (Yes, as we’re doing now.)

      Moving to WP will not be painless.

  65. 87


    May 15, 2015 1:57 pm

    This is seriously a great guidelines for a beginners. as your way of explanation fro m original to migration wordpress pattern is very good idea!!

  66. 88

    This is a evry helpful article, thank you for posting it! This seems like a neat way to deal with website migration. I have recently stumbled upon another article on the same issue, which offers an automated way of migration, seems even simpler to perform. If anybody’s interested, here is a link to the article

  67. 89

    How do you add pagination with this Template?

  68. 90

    How would one go about using a responsive theme. Meaning taking a static site and turning it into a WordPress CMS WITH responsive design?

  69. 91

    Justin Spencer

    July 8, 2015 5:50 am

    Very easy and clear steps shared to migrate a simple website to wordpress. The images shared make me more clear about the coding part too. Recently i came across ( for my website migration.


↑ Back to top