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.


<!doctype html>
<html class="no-js" <?php language_attributes(); ?> >
    <head><meta charset="UTF-8">
        ">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="manifest" href="site.webmanifest">
        <meta name="yandex-verification" content="a7ebb03bf6def160" />
       <!-- Style.css -->
<link rel="preload"  as="style" href="<?php echo get_bloginfo( 'template_directory' );?>/style.css">
<!-- Here how we custom CSS  -->
<link rel="stylesheet" href="<?php echo get_bloginfo( 'template_directory' );?>/asset/css/style.css">
        <?php wp_head();?>
    </head>
    <body data-rsssl=1>

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


<!--this will be any custom javascript ->
<script type="rocketlazyloadscript" src="<?php echo get_bloginfo( 'template_directory' );?>/js/default/active.js" defer></script><?php wp_footer(); ?> <script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body></html>

5. Create a index.php and paste this below code. This will call our header and footer.


<?php get_header(); ?>
<?php get_footer(); ?>

6. Create a page.php for pages.


<?php get_header(); ?>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();

get_template_part( 'content', get_post_format() );

endwhile; endif;
?>
<?php get_footer(); ?>

7. Create a single.php for blog posts and page this code.


<?php
get_header(); ?>
<div class="conatiner">
    
    <div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8">
            <!-- Blog Details Area-->
            <div class="single-blog-details-area">

<?php if (have_posts()):
    while (have_posts()):
        the_post(); ?>
       
        <?php get_template_part("content", get_post_format());
    endwhile;
endif; ?>
</div>
           
          
          </div>
          </div>
</div>
<?php get_footer();

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.

About

Services

Contact

410 C, Jaina Tower-1, District Center, Janak Puri New Delhi-110058, India.