Top 3 Methods to Convert Your Old Website Into a WordPress Website
Eager to convert your old website from HTML to WordPress? Jumping to any trending technology compels you to dive into complete information and gather all necessary details before making your mind.
The market of WordPress is growing dynamically with every passing day. As of 2021, more than 455 million websites are active on WordPress, and the number of websites is expected to grow in upcoming years.
Key Statistics About WordPress
- WordPress is the most user-friendly open-source content management system, with 1.1 million new downloads every six months and more than 2 million every year.
- It powers 62% of all CMS websites, such as Joomla or Shopify.
- It offers more than 54,000 plugins, 11,000 themes, and different layouts for customized website development.
- WooCommerce is the most used eCommerce Plugin of WordPress and contributes 7% of overall online sales.
Why choose WordPress for website development?
Taking the pain of importing your website to WordPress is worthless if you don’t understand the significance of this content management system. Before jumping to WordPress, let’s have a little explanation of why you should think about WordPress for your web development:
- WordPress websites are SEO friendly and help users to boost their solid digital presence on Google’s SERP.
- When you are projecting your business through websites, you seek accessibility, customization, and expansion for user engagement. With WordPress, it gets easy to expand and update the websites to share valuable insights.
- Integrating the bespoke features into your websites will get easy using 54,000 ready-to-use plugins. It will help to make your website project more dynamic and responsive.
- WordPress is an open-source content management system. It has a vast online community of experts that make this CMS more progressive and approachable. It makes website maintenance more productive.
Step by Step Conversion of HTML to WordPress
While moving towards the conversion of HTML to WordPress, you need to change the HTML design to a WordPress theme. Being a newbie in the IT world, you may feel a cumbersome task to convert your website. Therefore, search for the best WordPress website development services for seamless conversion. It will help to clone a website into WordPress.
However, if you are keen to replace the existing website with WordPress, ensure to follow a ready-to-implement plan step-by-step:
Method 1: Convert HTML to a WordPress Theme Manually
Now, time to show your technical expertise and knowledge of HTML, CSS, and PHP. In this manual conversion, you have to perform copy and paste:
Step 1: Create a New Theme Folder and Files
Create a new theme folder on your desktop and name it. Go to the code editor and create five text files:
- Style.css
- Index.php
- Header.php
- Sidebar.php
- Footer.php
Step 2: Replace existing CSS with WordPress Style Sheet
Another essential step to convert a website to WordPress is to copy and paste. Make sure to copy the complete CSS coding from the website into a WordPress Style Sheet. It means you need to create a style.css file and complete the following details:
- Theme Name: Reflects the name of your theme
- Theme URL: Website address
- Author: Your name
- Author URL: Signifies a link to your homepage in which you are working
- Description (optional): Describe your theme
- Version: It’s about your theme. You can put 1.0 as it’s not going to be published.
- License, License URL, Tags: These details are significant when you submit your theme to the WordPress theme directory.
Step 3: Separate Existing HTML
On WordPress, developers use PHP to extract database information. That’s why they need to divide HTML into various pieces and allow CMS to bind those pieces together to reflect complete details.
Click to index.html file and open it. Now, copy the code from WordPress and paste it into the following sections:
Header.php: It covers the area between the top of your HTML code and main content in terms of “<main> or <div class=”main”>.” Copy and paste <?php wp_head();?> just after </head>.
Sidebar.php: Copy the content under the section <aside> to the WordPress file.
Footer.php: Footer section describes the information from the end of the sidebar to the end of the file. After that, paste <?php wp_footer();?> before </body>.
Close the “index.html” file and save necessary data into the theme folder.
Close all files except header.php and index.php.
Step 4: Change the Header.php and Index.php for WordPress
Change the Header.php and Index.php to make them compatible with WordPress format.
For Header.php
Start with searching for a similar link to “<link rel=” stylesheet” href=” style.css”>” in the <head> section.
Replace the link with:
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />.
Save and close the header file.
For Index.php
Your Index.php may be blank so, paste the below-mentioned information in it:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Note: Maintain the space between the header and the sidebar for adding the loop.
Step 5: Capture Screenshot and Upload
A final and essential step is to take a screenshot of your theme. Before uploading it, make sure it would be about 880×660 pixels.
For more clarification, the screenshot is for the backend process of WordPress. You can preview your site using the screenshot. So, save the file as a screenshot.png and include it in your theme folder.
Upload the theme to WordPress using the following steps:
- Create a zip file.
- Go to WordPress. Pick the desired appearance, themes, and click add new at the top.
- Upload the theme and then upload the zip file.
- Tab to “Install Now.”
- Activate the theme
Method 2: Use of WordPress Child Theme
Manual conversion seems technical and a little bit complicated. But, you can manage everything using WordPress Child Theme. It needs a parent theme but allows you to make necessary modifications.
Step 1: Select a Theme
Choose a theme from the WordPress theme directory resembling your existing design.
Install it, but don’t activate it.
Step 2: Create a New Folder
Create a new theme folder as you have created in the previous method. Make sure to name the folder as the parent theme and add the adjective “child” at the end without any space.
Step 3: Prepare a Style Sheet
Set up a style sheet as we performed on the previous method and add a tag called “template.” For proper functioning of the sheet, ensure to include the parent theme name.
Step 4: Create a Functions.php
While working on a child theme, you need to create a functions.php file and inherit the parent styles. For that, create a new file and name it as functions.php that should start it off with <?PHP. Now, paste the following codes in the file:
Step 5: Activate the Child Theme
Finally, activate the child theme. Make sure to take a screenshot first that needs to be featured on the WordPress backend processing. Create a zip file and upload it. Now, adjust the design accordingly.
Method 3: Install Plugin to import content
Connect with a WordPress website development company if you don’t know how to create a new WordPress site without deleting the old site. Or, apply the third method and convert the website into WordPress via plugins.
Step 1: Install a Plugin
Go to Plugins in WordPress and search for HTML Import 2. Find the required Plugin, install it, and activate it.
Step 2: Ready to Import
Upload the pages that you want to import to the same server as your WordPress installation. To import needed files, you need to enter the following information in the required tabs:
- Directory to Import: Enter the path of existing HTML code files.
- Old site URL: Enter your old URL. It is used as a redirect.
- Default file: Share info of index.html.
- File extensions to include: The extensions of files that need to be imported.
- Directories to exclude: Any file that you don’t want to import.
- Preserve file names: It will default use the name of the file as the new URL.
Once you are done with the above steps, navigate to the content tab and configure the HTML tag. Now, proceed to the following tabs:
- Inform your Plugin about the titles you want on the HTML templates.
- Use a custom tag to import the custom data.
- Define your categories and tags to the imported content.
- In the tool tab, import necessary tools from HTML to WordPress.
Save your setting and start importing
Making a more dynamic and responsive website is the ultimate requirement to outgrow the business precisely. Implementing the understanding and learning of business into a website enlights the concept of customized web designing.
Today, we are paying more attention to custom web designing to meet our business demands completely. If you also need to design a customized website or project your requirement into an existing website, best to hire WordPress developers. Approach a top WordPress development company and share your requirement to make your website speak your viewpoints most appropriately.
Final Thoughts
Hence, you can choose the best way according to your understanding that can replace your old site with a new WordPress site. WordPress will help you to implement the desired web design and features to your websites. Apart from that, hire an experienced WordPress developer from the WordPress website design company and access the best WordPress web development services.
