Since HTML site has become a thing of the past, users are encouraged to make a change and try something new. An array of open source site building tools, like WordPress, brings webmasters more flexibility on website design and development than what is made with static HTML. This guide on how to convert a HTML site to WorPress is just about the way for that purpose.
Once converting your HTML site to WordPress, numerous plugins and themes make it possible for you to create a functional site with modern design. Lay the groundwork for the conversion, and then convert web design and all web content to WordPress.
Preparations for HTML to WordPress Conversion
A trust-worthy WordPress hosting solution is the first thing you should take into consideration, which enables powerful control panel, sufficient resource allocation, easy installation for WordPress and thoughtful technical support. And then, you are required to create a new site and install WordPress on it via control panel. Perhaps, download the latest version of WordPress via WordPress.org and then upload it to your website by using FTP.
Once having the WordPress installation done, you should get started to migrate all content from the HTML site to this new site created on WordPress. Log into your WP admin and explore this great site building method with abandon.
Appearance Customization for Your WordPres Site
Method 1: WordPress has released thousands of themes for website design and also allows users to create a custom one. If you plan to make a new look for your website, then select a premium theme via WP admin > Appearance > Themes > Add New. Perhaps, download a pre-made theme from WordPress.org and then upload it to your WP admin.
Method 2: If you wish to stay the same design with HTML site, a custom theme is a solid option for you. Before everything, create a folder to hold all files made for theme customization. And then, create several files, including header.php, footer.php, sidebar.php, index.php and style.php, in a frequently-used editor like Notepad++. All those files should be included in the newly created folder.
Copy and paste the following lines of code to style.css file for website style customization. Place those lines to the top of the style.css file upon the existing CSS code. Modify the theme name, theme URL, description, author and author URL according to actual situation.
/* Theme Name: Theme URL: Description: Version: Author: Author URL: */
Since WordPress works with PHP and calls data from database with this server-side scripting language, we are going to chop the existing HTML file up and add each part to index.php, header.php, footer.php and sidebar.php file created just now. Open the index.html file in an editor and then highlight anything enclosed in aside class=”sidebar”. Copy and paste those parameters in the sidebar.php file.
Copy from the top of your HTML file to the div class=”main” tag and then paste the selected content in the header.php file. Besides, all lines enclosed in thetag should be inserted into the hearder.php file.
The index.php file is where to hold the second part of the HTML code. Open this file and insert the following php to the top of this file.
<?php get_header(); ?>
Place the following lines to the bottom of the index.php file.
<?php get_sidebar(); ?> <?php get_footer(); ?>
In this way, the three PHP files including header.php, sidebar.php and footer.php will be displayed in the index.php file. Finally, insert something actual into the lines of code by using the following code and that should be added to the content section of index.php file.
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <div class="entry clear"> <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div><!--end entry--> <div class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--> <?php else : ?> <?php endif; ?>
Having all changes done, access to cPanel > Files > File Manager and target the root access /public_html/wp-content/themes. Copy and paste the custom theme folder you’ve created just now to this document root. And then, go back to WP-admin to activate this theme.
However, it is much easier to make a use of a pre-made theme than create a custom one. If you are a new beginner to this field and wish to simplify matters, we suggest you to go with the first method instead of the second one.
Migrate Content from HTML Site to WordPress
Having the theme customization done, web content migration is the second consideration you should keep in mind. That can be done with the help of a WordPress plugin and the one selected in the following guide is HTML Import 2. This plugin is designed for importing HTML files to WordPress website in an easy manner.
Posts, pages and any custom post types are allowed to be imported to WordPress. That is also accessible for the linked media files. You can set tags and categories to manage all web content in perfect order. Search and install this plugin via WP admin upon activation.
An item called “HTML Import” is shown under Settings. Go to Settings > HTML Import and access to HTML Import Settings page. An array of tabs available for HTML web content import and the Files tab determines what will be migrated from the HTML site to WordPress. Type the absolute path to the files that need to be imported correctly in “Directory to import” field.
Fill out the “Old site URL” and that is used to generate .htaccess redirects accurately. Enter the default file for holding the directories on the current server. The “File extensions to include” field requires you to type all extensions to be recognized and that should be separated by commas. You can also determine which directories will be excluded by typing the name of those directories in the “Directories to exclude” field. Save changes to confirm all settings in this tab.
The Content tab enables three methods to select content, including HTML tag, Dreamweaver template region and Import entire file. Select one according to personal needs and then check more content options if needed.
The Title & Metadata tab is where to determine the way to select title, title position, phrase to be removed, post types of import file, author, and so on. Set the status of import files as “publish” to publish it once converting your site to WordPress. Perhaps, set the status as “draft”, “private” and “pending” to make it not public.
The Custom Fields tab allows you to add as many custom fields as needed for better web content management. Name each custom field properly and determine the way to select a certain field.
To manage all imported posts in a perfect order, go to Categories & Tag tab and assign categories or tags to those files. Click the “Save settings” button to confirm all settings in this tab.
The Tools tab list links to several plugins that enable more possibilities for you, like Broken Link Checker, Search and Replace, Redirection, and so on. Access to the info page of each recommended tool and download it if needed.
And now, you have converted the original HTML site to WordPress successfully. Preview the site on the front-end and check if there is something to be modified. Take a good use of WordPress themes and plugins to make your site eye-catching and functional.