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.
[wpm_post_image id=”1″]
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.
- 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. - Install WordPress For Getting The Environment
You will need to install WordPress on your domain to get you WordPress environment for importing your content. - Import your content
Using the importing tool you can now import and organize your content right away. - Setting up of Design
This includes your theme, colors, logo, menu structure, links, and so forth. - 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. - Make the site live on Web
This involves either moving your domain to your new host or pointing your URL to your new site - 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. - 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
- 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.
- Settings and Plugins
While the WordPress is installed, some minor adjustments need to done - 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.
- Form management
- 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.
- 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. - 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. - 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> - 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
- 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. - Meta tags
The reference of meta tags to the style sheet being inserted automatically via wp_enqueue_style in the functions.php file. - 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. - 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. - 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. - 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. - 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.
- 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 -->
<?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.
