wordpress

How to convert HTML site to WordPress

wordpress

Indubitable, WordPress is the most widely used CMS for website development. All owes to its rich and endless features. Initially, most of the websites were developed using static HTML but with the technological advancement we, now, have the privilege of different website development platforms. The transition is due to the increase in the complexity level of sites providing users with new functionality in order to retain them plus to thrive in the market competency.

WordPress is one such result of technological advancement, though, it started out as a blogging platform but soon gained popularity due to its features and to top it all, it’s an open source and free.

If you’re thinking that converting your existing HTML website to WordPress would be a lengthy and strenuous process as you have to start from the scratch again, then you’re wrong. Do you need to start all over again and put in all your efforts and time? Nope!!!! Conversion is actually easy and the benefits it brings is just immeasurable.

To convert or not to convert?

Still not convinced?

Well, to emphasize on WordPress’ importance and popularity allow me to present some facts about it.

– widely used and most popular CMS.

– 26% of all the globally websites use WordPress.

– 37 billion global Google searches for WordPress are made per month.

– Right now, there are more than 45,000 plugins for different functionality.

– Easy to use and manage.

Last but not the least, this platform has been assisting some notable sites like TIME.com, NBC, Williams, Thought Catalog, New York Observer, Fortune.com, USA Today, Spotify, CNN, New York Post, TechCrunch and much more. If they can do it, then you can do it too. Therefore, organizations are investing in WordPress development services and justifies the upsurge in the web development process.

This blog post will outline the conversion process of an HTML website to WordPress. We’ve also focused on some problems that you’ll face and if there’s any alternative, we have got it all for you.

CREATE A NEW THEME FOLDER AND FILES:

This is the basic step before converting your HTML site to WordPress. Create a folder in your code editor where you can place all the necessary files. You can create different folders for different functionality like

Index.php

Style.php

Header.php

Footer.php

sidebar.php

Now, you need to bring over the styles from the existing website and place them to your own style.css from style sheets. Follow these simple steps:

– Open style.css

– Replace the details of the file like Description, Name etc.

– Paste it in the style.css

CREATE HEADER:

The next step is to create the header for your new theme. For that, you have to merge the structure of the current code base with that of WordPress’ templates. Follow these steps:

– Replicate the current HTML structure and replace it with the WordPress static menu.

– Use WordPress’ title tag

– Merge other relevant tags from the previous header.

 

YOUR HTML CODE

 

<!DOC HTML>

<html>

<head>

<title>XYZ</title>

<meta http-equiv=”Content-Type” content=”text/html/>

<meta name=”” />

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />

href=”http://www.XYZ.com” />

<script type=”text/javascript” src=”//use.typekit.js”></script>

<script type=”text/javascript”>try{Typekit.load();}catch(e){}</script>

</head>

<body>

<a href=”http://XYZ.com”><h1 id=”logo”>XYZ</h1></a>

<href=”http://XYZ.com”>Products</a></li>

<li><a href=”http://XYZ.com/wallpaper.php”>Wallpaper</a></li>

<li><a href=”http://XYZ.com/about.php”>About</a></li>

<li><a href=”http://XYZ.com/contact.php”>Contact</a></li>

 

MERGING HEADER

<!DOC html>

<html>

<head>

<title><?php wp_title(  ); ?></title>

<meta http-equiv=”Content-Type” content=”text/html;

<metaname=”” href=”http://www.XYZ.com” />

<script type=”text/javascript” src=”//use.typekit..js”></script>

<script type=”text/javascript”>try{Typekit.load();}catch(e){}</script>

<?php wp_head(); ?>

</head>

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

<header>

<a href=”http://XYZ.com”><h1<

‘wallpaper’ => ‘primary’,

‘about’ =>false,

‘contact’ => ‘menu’

) ); ?>

<header>

 

COPY EXISTING CSS INTO NEW STYLESHEET:

Before copying existing CSS into new stylesheet you need to edit your style.css file. You need to add the following code:

/*

Theme Name: Replace with your Theme’s name.

Theme URI: Your Theme’s URI

Description: A brief description, Author Bio

Author URI: Your websites’ address.

*/

What follows next is that you need to separate your current HTML files with that of WordPress and retrieve data from its underlying database. Your WordPress site should know where to display all your modified files and for doing that follow these simple steps:

– Open your site’s index.html and copy and paste everything into your header.php file and save it.

– Now, open the index.html file again and highlight class=’sidebar’ and everything inside it and paste it into your sidebar.php file.

– Select everything in your index.html and paste it in the footer.php file.

– Finally, select everything in your index.html and paste it into index.php

FINALIZING YOUR index.php FILE

It’s time to put back all the elements together and see if the steps till now have been correct. At the very top of your index.php file, add the following code.

<?php get_header(); ?>

And at the bottom of the file. Add the following code.

<?php get_sidebar(); ?>

<?php get_footer(); ?>

UPLOAD YOUR THEME

You need to have access to your WordPress install directory and upload your theme. Place your new theme folder inside /wp-content/themes/. Then go back to WP Admin > Appearance > Themes and you’ll find your created theme there. Select it and activate it. There are thousands of free and premium themes available and depending on your requirements and objectives you can choose one. But before choosing a theme, decide which will work best for your site and also consider the compatibility factor and if possible, you should read up on which themes are designed to cater to your requirements and browse by theme categories.

Once you’ve chosen the theme have its zip file package ready for downloading. Go back to WP Admin > Appearance > Themes > Add New and install/activate the selected theme. After you’re done with this step you have your WordPress theme and you’re ready to import your HTML’s content.

Now, go again to WP Admin and click Plugins > Add New and search for HTML Import 2 plugin. Install and activate it and import the entire directory of HTML pages to the WordPress site.

IMPORT CONTENT

It’s time to import all the content of existing HTML site to your WordPress site and making your site up and running. Start by viewing the list of content importing scripts in the codex. if you find a match, then its perfect otherwise, you can manually migrate all the files. Simply copy and paste the content path and all the URLs. Meanwhile, as you migrate manually keep a track of the migration only to avoid getting confused.

REVIEW YOUR SITE

Before making it live, you need to review all the functionality of your WordPress website just to ensure that everything is working perfectly and the conversion process is a success. Check for any Broken Links, Broken Functionality, Broken Styles, Temporary Links so that you provide enriching user experience even with the WordPress site.

GOING LIVE

Follow these simple steps:

– Relocate WordPress in the directory folder

– Point the domain name from the old server to the new WordPress server and point to the new server.

Final Words

There you are. Now you have an outline of the process and know is privy to the process of converting your existing HTML to WordPress and it’s just the beginning. There’s more to it and as you get accustomed to your WordPress site, it’ll be a fun for you to operate it encountering new challenges and new ideas to solving them. Simply put, there’s a lot to learn.

If you have views to express, feel free to share in the comments section below.

Author Bio:

Jessica Alba is an ed-tech enthusiast and has been associated with CWS Technology as a writer for more than 5 Years. CWS is the leading web development company that also provides android, iPhone, HTML to WordPress service and other IT solutions. Jessica has a passion for writing on emerging technologies like application management outsourcing, consulting, system integration etc.