Important Steps to Convert HTML Site to WordPress

  • When it comes to CMS, it is known to be vital for website development. This is the reason why choosing the right CMS platform for website development is requisite. Though there are a number of CMS platforms available that developers can use to create a top-quality website to cater to different needs of businesses.

    You may be thinking about which is the right platform for mobile application development. Right? Of course, WordPress is one of the most popular CMS platforms that earned huge popularity among both developers and businesses.

    According to the survey, WordPress witnessed its use as 62.4% of all websites. You may be thinking about why WordPress is used with such a huge percentage. Well, there are numerous reasons such as easy to use, move/add/delete widgets, accessibility mode for widgets, image editing, and lots more.

    However, it’s also true that a large number of businesses nowadays still use an HTML-based website. The major setback of such a site is that even for small changes, developers need to change. This is another reason why businesses nowadays frequently hire a WordPress website developer.

    So, if you are also looking to leverage the power of WordPress, you need to opt for HTML to WordPress conversion services.


    Important Steps to Convert HTML Site to WordPress

    Before you hire experienced developers to convert HTML to WordPress, it’s important to know about the entire process of conversion in terms of several associated steps. Take a look.

    1. Checklist

    Before you initiate HTML to WordPress conversion, you need to ensure that you already installed WordPress on your hosting account. Besides, you need to also install with just a single click by signing up for the cloudways managed WordPress hosting platform.

    2. Name the Theme

    In the second step, you need to name your theme. To do this, you need to use FTP client to access your WordPress installation. You need to consider the following steps;

    ● Go to WP content
    ● Hover on themes
    ● In the theme folder, create a new folder and name the folder.

    3. Create PHP Files

    In the next steps, you need to create the following PHP files that serve a defined purpose.

    ● style.css (For content themes & CSS files)
    ● index.php (For main content)
    ● header.php (For header elements of themes)
    ● footer.php (For footer elements of themes)
    ● functions.php (For functions in the WordPress theme)

    4. Copy Images, JavaScript, and CSS Folders

    You need to now copy over JS, CSS, image folders from the HTML theme to the new WordPress folder.

    5. Cut HTML into Index, Header, and Footer

    In this step, you need to copy HTML into your header.php file from index.html, which you already created in the theme folder of your WordPress. You can then copy the entire coding as it is, from till

    In a similar way, you can copy the main body elements and also over footer from index.html to index.php and footer.php respectively. After completing the same, you can copy the footer.php file from to .

    You can then also add “body” and “content” into the index.php. After this, you can copy the entire section from .

    You can then make the addition of WordPress function get_header () at the top portion and then get_footer () at the end portion of the index.php file.

    6. Configure CSS

    CSS files tend to make or break the overall appearance of your theme. For HTML to WordPress conversion, you need to copy over your CSS folder to your WordPress theme folder from your HTML theme.

    Now, it’s important to call suh files to change the look of your theme and make it highly attractive. While using CSS files, you are advised to perform double-check. As its name tends to differ. Besides, in the header section, it’s important for you to call in a complete CSS stylesheet in the header.php file. In this file, you can easily replace the following lines;

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

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

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

    With

    <link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/layout.css’; ?>” type=”text/css” media=”screen”>

    <link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/reset.css’; ?>” type=”text/css” media=”screen”>

    <link rel=”stylesheet” href=”<?php echo get_template_directory_uri().’/css/style.css’; ?>” type=”text/css” media=”screen “>

    7. Now Configure JavaScript

    Once you configured CSS successfully, your next job is to configure JavaScript. You will not face any difficulty in configuring the HTML theme, which works using JavaScript.

    In the header.php file, you can easily notice the JavaScript. It’s important for you to focus on the current directory path. In the second part, you will be able to use wp_enqueue_script(), which is basically a WordPress built-in function, in order to call in JS files, with an aim to add higher flexibility in future.

    You will be able to notice your JavaScript final code in header.php like below;

    <script src=”<?php echo get_template_directory_uri().’/js/jquery-1.6.min.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/cufon-yui.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/cufon-replace.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/Open_Sans_400.font.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/Open_Sans_Light_300.font.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/Open_Sans_Semibold_600.font.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/tms-0.3.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/tms_presets.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/jquery.easing.1.3.js’; ?>” type=”text/javascript”></script>

    <script src=”<?php echo get_template_directory_uri().’/js/FF-cash.js’; ?>” type=”text/javascript”></script>

    You can add <img src=”<?php echo get_template_directory_uri().’/img/tm.jpg’;?>” alt=”Image” > to provide a complete path to images.

    8. Use Custom Title

    In order to enable the title in WordPress, you can leverage its bloginfo() with the name of the parameter and also between title tags in header.php files.

    9. Integrate Custom Navigation Menu

    First and foremost, you can easily access the WordPress admin of your website and then navigate to Appearance, and you will not be able to see any option for the menu.

    All you need to do is to enable Menu first by adding the following code

    <?php

    add_theme_support( ‘menus’ );

    ?>


    In functions.php file.

    Doing this helps you in enabling the Menu functionality in your theme. But, it is also highly important to define where to display your custom menu.

    So, it’s crucial for you to find out first, the location of your HTML theme navigation menu. And you can then replace the same with the use of WordPress built-in function wp_nav_menu();

    10. Add the Current Posts to Display on the Homepage

    You have completed your task of HTML to WordPress conversion. Now, you need to give a final touch to the homepage of your WordPress website.

    You can notice that the majority of WordPress websites display the latest posts on the homepage, so you can also adopt the same technique.

    You can use the ‘Recent News’ section of your WordPress to show the latest blog posts on your website. In order to do the same in a proper way, you should first and foremost locate your static HTML code to show your current posts. You will then discover it in index.php under Recent News.

    You will find HTML like this’

    <time class=”tdate-1 fleft” datetime=”2011-05-29″><strong>29</strong>may</time>

    <div class=”extra-wrap”>

    <h5>Utatse eudui pretium</h5>

    sodales proin fermen<br>

    tum condimentum eros quis tincidunt fraesent eleifend tempor nisi, in adipiscing… <a href=”#”>more</a> </div>

    </div>

    <div class=”wrapper”>

    <time class=”tdate-1 fleft” datetime=”2011-05-24″><strong>24</strong>may</time>

    <div class=”extra-wrap”>

    <h5>Felis molestie vitae</h5>

    Sed massa justo pellen<br>

    tesque turpis lorem, ornare sit amet vulpate at, consectetur vitae nunc… <a href=”#”>more</a> </div>

    Replace the entire code with:

    <ul>

    <?php $the_query = new WP_Query( ‘showposts=2’ ); ?>

    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

    <li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>

    <li><?php echo substr(strip_tags($post->post_content), 0, 100);?></li>

    <?php endwhile;?>

    </ul>

    You can use WP_query to show details of pages and posts of your WordPress website.

    Conclusion

    So, the above are some important steps of HTML to WordPress conversion. After going through this information, you are now expected to have in-depth ideas related to the process of HTML to WordPress conversion. So, you can now hire an experienced WordPress website developer to convert an HTML site to WordPress.

Want 10% Off Your First Project?

Enter your email and we’ll send it right over!