Wednesday, May 19, 2021

    Complete Guide to Convert HTML Website to WordPress

    Must Read

    We started this site to inspire young minds to motivate and encourage them towards Programming Language. In this site you will get programming tutorials, tech, programming facts, programming fun and programming blogs.

    In the age of dynamic satisfied and rich interactive interfaces, static HTML websites just don’t cut it. Even if you do conduct to create an amazing HTML/CSS website, you will then allocate the rest of your time count tags to every decision you ever want to publish or cultivation your client to do the same.

    Enter WordPress.

    Cited by millions as the most user-friendly and easy-to-manage CMS out there, WordPress doesn’t desire coding skill to be administrated accordingly. The coding languages (HTML, CSS, JavaScript, and PHP for scripting, and MySQL for a database) coupled with the amazing APIs mean that an efficient developer can do much more with WordPress than he/she could with just HTML and CSS in given amount of time.

    Insensitive to your reasons, you are accomplishing the right choice convert to WordPress. This guide is to take you step-by-step through the HTML to WordPress conversion technique without losing your content.

    Step 1. Choose your Hosting Plan

    WordPress flare  in two ‘flavors’: the managed and the self-hosted For our purpose, we will want the self-hosted solution.

    This means you’ll have to appoint a hosting plan (VP, dedicated, shared, etc.) established by your site traffic and WordPress requirements (server must support PHP 5.6 or above and MySQL 5.6 or above).

    Step 2. Go to WordPress Download  and Install WordPress

    Go to WordPress download page and download the zip package. Install WordPress and log into WP admin.

    Step 3. Decide which HTML  code you want to transfer

    • If you want to keep you HTML site’s design, you will need to code a custom theme for yourself (as described in steps. 4 to 8). Note that you’ll want a code editor and knowledge of HTML, CSS, and PHP to do that.
    • If you can forego the HTML website’s design and just need to transfer the content, skip to Step 9.

    Step 4. Create a new Theme folder

    Create a new folder on your desktop. Let’s name it HTML Theme. This will be your theme’s name. Yes, you can rename it.

    Open code editor (Notepad++, Komodo, etc.) and create files named:

    1. Style.css
    2. Index.php
    3. header.php
    4. sidebar.php
    5. footer.php

    …and so on. These files are the theme’s templates. Leave them empty and save them in the HTMLTheme folder.

    Step 5. Copy Existing CSS into Style.css file

    Your previous HTML website likely used CSS to style page elements. Copy it and paste it into Style.css file. This will direct the arrival of select components crosswise the entire site and all its pages.
    If you are doing this for a client, it’s good form to add the following bit at the top of stylesheet:

    It’s optional, but it helps your clients stay in touch with you.

    Step 6. Cut up your current HTML

    Also called ‘chopping’, this is simpler  than it sounds. In HTML Theme folder (on a desktop), there are some files we created in Step 4.

    Open your current site’s index.html in the code editor:

    1. Copy all the data from the top, right up to the tag div class=“main”. Go to theme folder, open header.php and paste it there. Save it and close.
    2. Copy the tag and everything inside aside class= “sidebar”. Go to theme folder, open sidebar.php, and paste it there. Save it and close.

    …and so on.

    You have to recognized HTML tags for different page elements and paste them into the related HTML tags for various page elements and paste them into the associated php file. Once that’s done, copy everything that hasn’t been posted in its own PHP file. Paste in into index.php. Save it.

    Step 7. Finalize Your Index.php File

    Your index.php should be able to call up all the new sections (template files we created in the previous step).

    This is how you call the header:

    At the bottom (after the rest of the code in index.PHP, you call the sidebar and the footer like this:

    Almost done…

    Recognizing that WordPress theme anatomy has two powerful peripherals which is characteristic to all, especially the template hierarchy and The Loop. The loop parade your post content to the visitors. Add this bit of code within the willing section of your index.php:

    Save and close. You are now done creating the theme.

    Step 8. Install your New Theme

    Your theme files are finished and saved neatly in the folder on the desktop (we named it HTMLTheme). Now you’ll have to place this theme folder inside WordPress installation directory to make it available.

    Open WordPress install folder in your organize and copy-paste the theme folder (HTMLTheme) inside /wp-content/themes/.

    Now launch WordPress and go to WP Admin >> Appearance >> Themes. This is where all themes you create/download and install will appear. You should be able to see your custom theme by name there. Activate it.

    Step 9. Importing HTML Content

    Remind that if you earlier found a ready-made (free or premium) theme you liked, you may simply download the theme folder and install it in the same manner as directed in Step 8. Go to your admin dashboard, then go to Appearance>> Themes>> Add New to activate it.

    Now all that’s left is to import your previous HTML website’s content. This is damn easy, thanks to Stephanie Leary’s plugin HTML Import 2, “absolutely one of the easiest tools in the converting/importing industry” as one reviewer calls it. Before you install the plugin and import a directory of your content, make sure you go through the user guide carefully. And you are now, officially done! Welcome to WordPress, Scott.


    Keep in mind that you’ll want to address specific issues specifically  to you (poor quality HTML code, no CSS, etc…) in your own way. As long as your web developers are prepared to spend some time and energy gaining the WordPress Template Hierarchy and The Loop, there should be no hassles.

    See more:


    Best WordPress Books

    Latest Articles

    More Recipes Like This