How to convert your HTML website into WordPress? – Part 1

August 5, 2021
1:04 am
No Comments

We all know WordPress is a well-known content management system for our website these days. Most of the designers either buying WordPress themes to design their client’s websites. But some are using HTML templates to converted into WordPress. Today we will learn how we will go and convert our HTML template into WordPress.

Before I am starting this session you must know the basics of WordPress theming and folder structure.

wp-admin – define the WordPress admin folder.wp-content – where theme, upload, plugin folder resides.

wp-includes – WordPress core folder and file.

Rest of these files are the core files for WordPress which includes like wp-config.php, wp-setting.php etc.

Before we move I will share some basics of WordPress hooks which we will use in our theme.

1. wp_head() – we will use this hook in our header section. If you are not using this hook you will not get all your plugins CSS and other configuration JavaScript.

2. wp_footer() – we will use this hook in our footer section. Same like I mentioned above if we are omit this then we will not get our plugin javascript which normally comes in our footer.

Lets begin our session with step wise:

1. create a theme folder in your wp-content/theme/themefoldername (example my folder is wontonee)

2. Create a file name style.css. This is one of the most important files in our theme where we define the theme name and also if any stylesheet, we are having then we can link it here. In the bottom code I am defining my theme name, author name, description, version and tag.

    
     /*
Theme Name: Wontonee
Author: Saju Gopal
Description: Theme for wontonee
Version: 1.0
Tags: bootstrap
*/

3. create a filename header.php and paste this code.

    
     
 >
    
        
        
        <?php echo get_bloginfo( 'name' ); ?>-<?php echo(the_title()); ?>

4. Create a filename footer.php and paste this code.

8. Create a function.php where we will initialize our theme. I am not including TGP for default plugin initialization in this.

    
     function wontone_theme_setup(){

  add_theme_support(
    'custom-logo',
    array(
      'height'      => 240,
      'width'       => 240,
      'flex-height' => true,
    )
  );

  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' )
     )
   );

}

 add_action( 'init', 'wontone_theme_setup' );

8. Create a screenshot.png which will create a thumbnail of our theme.

Now zip your folder wontonee and upload through WordPress appearance > theme >upload. This is how my structure look like.