How To Convert Your Old Website Into WordPress Site

Due to the wide possibility of WordPress and dynamic content management system now it is powering 17% of the website on the web. So, why not you convert your website from old content management system to new efficient CMS of WordPress? Don’t be afraid of being losing all the resources, content and data because are not going to lose anything during the process. Fortunately converting a website into WordPress is quite easy than you actually think. In this article you will have a detail outline and overall steps that you need to learn for migration. We have also tried to list down the possible challenges and their possible that you might face at the time of migration.

How To Convert Your Old Website Into WordPress Site

Our Objectives

  • Migrate Your Site Effectively to WordPress Platform
  • Introducing the technical process associated with migration
  • Make the resources and ideas available to solve challenges

Fundamental Steps Of The Process

Hope you will find the under mentioned steps beneficial for migrating your site. The steps are highly recommended for you.

  1. Assess your Current Website
    Check your current website thoroughly and identify the features that you presently have. This will let you determine the special new features that you need to include like pages, posts, galleries, links, etc.
  2. Install WordPress For Getting The Environment
    You will need to install WordPress on your domain to get you WordPress environment for importing your content.
  3. Import your content
    Using the importing tool you can now import and organize your content right away.
  4. Setting up of Design
    This includes your theme, colors, logo, menu structure, links, and so forth.
  5. 5 Final Reviews
    It is mandatory that before you make your site open for all you should check images,                   media, content, menus, plugins, widgets and other to ensure that all are working well. Adjust the setting and URL redirects and release it for live.
  6. Make the site live on Web
    This involves either moving your domain to your new host or pointing your URL to your new site
  7. Start With A Plan
    Converting a whole website is a group of task and it needs doing all the things properly that’s why a powerful plan is enviable.
  8. Focusing on Content
    •  The number of pages, images and data need to be imported
    • Import manually, or do you need a tool depending on the volume
    • The required tools are either on your site or it need to be integrated
    • Does custom fields and taxonomies need extra content need to be stored
    • Will the URL structure change? If so, will the old URLs need to be redirected
  9. Existing Functionality
    • Integrating of any third-party services like data collection and reservations
    • Forms need to be migrated like contact forms and application forms
    • Restricted content
    • Website offer selling products
    • If any administrative tools need to be carried over

 Installing WordPress

To work with WordPress at the very first time you will need to install it. But if you are just trying to do some experiment on it you can make a local installation. But in case of real need of migration you need to set up WordPress on your current host.

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.

  1. Settings and Plugins
    While the WordPress is installed, some minor adjustments need to done
  2. Update permalinks
    To change the permalinks you need to go into the settings. In most cases, it switch to “postname”-style permalinks.For any updated projects we need to install some plugins initially, and the plugins that needs to be   preinstall are:

    • Form management
      There are lots of form management plugins are available out there some of them are Gravity Forms and Contact Form 7.
    •  SEO management
      Search engine optimization is a crucial sector for WordPress websites and content should be crated for the visitors and not for the search engines. If yours old website includes custom meta descriptions, giving them a new home during the importing process. Plugin for marinating SEO is somewhat controversial but still many webmaster love it. We recommend WordPress SEO.
    • Multiple languages
      If you want your old website to have the features of supporting multiple language then WPML could be a good choice however you can use the MultilingualPress undoubtedly for this purpose.
    •   WordPress Security
      As the popularity of WordPress is increasing the number of business website built on this platform has been increased as well. Therefore this platform becomes a potential source of security attack of unethical hacker. Usually a poorly secured hosting environment or an outdated or poorly developed plugin creates problems and use of managed WordPress hosting for the majority of my projects, offers a good foundation for solid WordPress security. The hosting which is mostly recommended includes WPEngine, ZippyKid, Pagely and Synthesis. Some security plugins are also available here like WP Security or Wordfence. ). Last but not least, review the “Hardening WordPress” guide in the Codex.
    • Backups
      To ensure extra protection of data layer some wonderful options are available for your like VaultPress), CodeGuard, BackupBuddy and BackWPup. You can use them to backup and manage hosting right away.
    • Updated Design
      Tons of awesome WordPress website themes are available over the web. You just take a look at them. You may find the in the official repository and in third-party marketplaces such as ThemeForest and Creative Market. You can easily decorate your website with many excellent themes out there.
  3. Working With Source Code
    You can directly play with source code by loading it through the browser. While having access to the original hosting environment can be helpful 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. Modifying source code in browser is more comfortable and save tons of time of developmental process. In case of Google chrome you can do it by go to Menu → Tools → View Source.

Create A Custom Theme

Migration with the existing website is more preferable than building a completely new website. Download a copy (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
    The first step of migration is to replace the styles from the old website. The source code for refers to .css and you need to copy and pasting the contents from those style sheet into your own style.css. Follow the steps …> 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.
  2. About Images
    Search for and update any references to images when you migrates the style. You can keep all images in images folder within the theme’s directory. If the location is changed images should be referenced in the original CSS.  And make sure to update all references in the style sheet and templates accordingly.
  3. Header
    Second step of the migration is building a header of the new theme. You just need to merge the structure of the current code base with WordPress’ templates.Follow the following steps…> copy the HTML structure of the old website.
    >paste 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.For example look into the under mentioned code
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>WpMania Sample Code Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="google-site-verification" content="your google site varification code" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link rel="shortcut icon" href="http://www.domian.com/favicon.ico?v=2" />

    <body>
    <a href=”http://domain.com”><h1 id=”logo”>WpMania logo</h1></a>
    <ul class=”menu”>
    <li><a class=”active” href=”http://domain.com”>Products</a></li>
    <li><a href=”http://domain.com/wallpaper.php”>Wallpaper</a></li>
    <li><a href=”http://domain.com/about.php”>About</a></li>
    <li><a href=”http://domain.com/contact.php”>Contact</a></li>
    </ul>
  4. 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="xxxxxx" />   <link rel="shortcut icon" href="http://www.domain.com/favicon.ico?v=2" />
    <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    <header>
    <a href="http://domain.com">
    <h1 id="logo">Vegan Food Pyramid</h1></a>
    <?php wp_nav_menu( array(             'theme_location' => 'primary',            'container' => false,            'menu_class' => 'menu'      ) ); ?>
    </header>

Understanding

Major challenge of migration is identifying the codes that you really need to be improved. If you have enough time and opportunity then we suggest improving the code thoroughly.

The following changes are recommended

  1. Doctype
    Usually the original HTML always has an HTML5 doctype. Using a modern doctype in a code base written for an older code like XHTML or HTML4 could break the layout.
  2. Meta tags
    The reference of meta tags to the style sheet being inserted automatically via wp_enqueue_style in the functions.php file.
  3. Scripts
    Script regarding every page such as a tracking script or font script, putting directly in the header file is a wise decision. Here the recommended practice is to register all scripts and add them to the header via wp_enqueue_script.
  4. wp_head
    Leave <?php wp_head(); ?> at the bottom of the </head> tag in the merged header file. WordPress uses wp_head, 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.
  5. body_class
    The 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 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.
  6. WordPress menus
    One of the complex tasks of migration is to deal with the WordPress-powered menu. The wp_nav_menu function is highly flexible and offers built-in functionality to handle the current state of an element in the menu.
  7. Footer
    The relevant parts of the original source code should be merged in the migration process.Let’s go for it..Original HTML

    <div id="footer">
    <p>© 2013 domain.com</p>
    </div>
    </body>
    </html>

    Merged Footer (footer.php)

    <div id="footer">
    <p>© <?php echo date('Y'); ?> domain.com</p>
    </div>
    <?php wp_footer(); ?>
    </body>
    </html>

Explanation

Footer with complex menu and widgets are hard to migrate. The merging of HTML with footer template, make sure to preserve reference to the wp_footer hook.

  1. Home Page
    Many webmaster find it difficult to convert homepage of the website in migrating process. You can adopt the simple way by 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.Follow the example for your purpose..Original HTML

    <div id="content">
    <div id="poster">
    <a href="http://domain.com/images/image.jpg"><img class="product-img" src="http://domain.com/images/image.jpg" /></a>
    <div class="description"><h2>Poster</h2>
    <a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=xxxxx">Buy</a>
    </div>
    </div>
    </div> <!-- end content -->
    Merged Home Page

    <?php/** * 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/image.jpg" /></a>      <div class="description">         <h2>Poster</h2>
    <a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=xxxxx">Buy</a>
    </div>
    </div>
    </div>
    <!-- end #content -->
    <?php get_footer(); ?>

Explanation

By default front-page.php template begins and ends with a reference to the header and footer and the rest of the HTML is merged, use the get_stylesheet_directory_uri function, which will dynamically generate references to the images folder in theme.

Standard Page Template

The standard templates are usually quite easy to merge. To do it shortly just go to merged templates.

Merged Template (page.php)

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

You need to focus on several items of this:

The loop

The #content container may feel too complex for new user. The “loop” is code used by WordPress to display a post’s content. You need to make sure that it’s in there, or else the content you save in WordPress won’t show up.

 get_template_part

The handy get_template_part function is a great way to keep content organized, especially in complex projects.

post_class

Adding a reference to <article> makes customization of the website much easy.

Full-Width Template (full-width.php)

Though the standard page template is changed to a narrow width the the design includes a full-width template for use on the “Wallpaper” page

. 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>
<?php get_footer(); ?>

Explanation

Now from the “Edit Page” interface, find the “Page Attributes” box and select “Full-Width Template” from the “Templates” dropdown menu.

Extras

Some other minor issues that may come as challenges while you will work with migration process.

Breadcrumbs

Breadcrumbs are commonly found on websites. They can be reproduced by using plugins. We recommended Breadcrumb NavXT and WordPress SEO for this purpose.

Widgets

If yours old website has a sidebar it can be either reproduce or integrate through WordPress widgets to allow for a dynamically managed sidebar.  

Restricted content

With default password protection system you can restrict your desired content. For more intense control you can use plugins like Members, s2Member, WP-Members.

Custom Post Types

Custom post is important especially when the migrating website has different types of content. But you can handle the different content easily by using the plugins like Custom Post Type UI and Types.

Review Website

After the completion of migration process you need to operate a checkup throughout the code to ensure the website you have converted is perfectly working with the new environment. The under mentioned topics should the taken under review:

Broken links

A sound conversion usually has active links and all the links work as they should. You can check the links either manually or automatically using plugins such as Integrity or Xenu’s Link Sleuth.

Broken styles

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.

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.

Setting Up Redirects

If the link structure of migrated website has been changed you need to ensure that visitors are redirected from the old pages to the new. The suitable way to set up redirects is to add them to the .htaccess file.

Here are the rewrite rules for links:

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

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

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

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

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

Making Live

To make the prepared website live on web two more tasks is still remaining:

>Just Relocate WordPress from the development folder to the root directory.

> And select the domain name from the old server to the new WordPress server.

Last Word

Now you have all the knowledge that you need to migrate from old system to new WordPress content management system. You already gained the outline and challenges you might encounter and their possible way out.  So enjoy migrating from  the outdated platform to advanced platform of WordPress.

Recent Posts

WORDPRESS WEBSITE MANAGEMENT SERVICES

Imagine an all in one service that completely does away with the need of a costly $2,000+/month webmaster! Simple & affordable pricing for all of your website needs​Â