PART 1
First We have to install WordPress. I think You know how to install WordPress . Here I am working on Live Server and we will use Filezila Client
For Hosting I am using webcore.in Hosting services
You can also work on localhost but here I am working on Live Server. If you want to by hosting you can by from webcore.in they are providing Lightspeed Webserver and price is reasonable
Once installed WordPress its look like below
Now open FileZilla and connect your server like below
Go to the /public_html/project/wp-content/themes folder and create a new folder bornfeel.
Note: bornfeel is our theme folder name you can give any name what ever you want.
For HTML to WordPress theme we have to create some files under the newly created theme folder
- style.css
- header.php
- footer.php
- functions.php
- index.php
- front-page.php
- single.php
- sidebar.php
- search.php
- archive.php
- page.php
Firs we have to understand what is style.css in WordPress and why it is required?
WordPress reads the comments that you place in the style.css file. This is where you specify specific information about the theme you are building. It control the visual design and layout of your website pages.
For more information you can go through the WordPress official link
style.css
/*
Theme Name: bornfeel
Theme URI: https://techblog369.in
Author: techblog369
Author URI: https://techblog369.in
Description: This is a Full Customized theme
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bornfeel
*/Once complete the style.css file you can see the theme template under the Appearance->themes like below
Now you can see we have no image template so before active the theme we will create theme image
Note: File name should be screenshot.png and file size should be 1200X900
Once created the screenshot.png file we have to upload the same under the theme folder which is bornfeel theme folder.
Now Active the theme and your website will be blank. First we have to copy our css file and paste into wordpress css file like below
header.php
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prospera Free - New Amazing HTML5 Template</title>
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- CUSTOM STYLE -->
<link rel="stylesheet" href="css/template-style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<?php wp_head(); ?>
</head>
<body class="size-1140">
<!-- PREMIUM FEATURES BUTTON -->
<a target="_blank" class="hide-s" href="../template/prospera-premium-responsive-business-template/" style="position:fixed;top:120px;right:-14px;z-index:10;"><img src="img/premium-features.png" alt=""></a>
<!-- HEADER -->
<header role="banner">
<!-- Top Bar -->
<div class="top-bar background-white">
<div class="line">
<div class="s-12 m-6 l-6">
<div class="top-bar-contact">
<p class="text-size-12">Contact Us: 0800 200 200 | <a class="text-orange-hover" href="mailto:contact@sampledomain.com">contact@sampledomain.com</a></p>
</div>
</div>
<div class="s-12 m-6 l-6">
<div class="right">
<ul class="top-bar-social right">
<li><a href="/"><i class="icon-facebook_circle text-orange-hover"></i></a></li>
<li><a href="/"><i class="icon-twitter_circle text-orange-hover"></i></a> </li>
<li><a href="/"><i class="icon-google_plus_circle text-orange-hover"></i></a></li>
<li><a href="/"><i class="icon-instagram_circle text-orange-hover"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Top Navigation -->
<nav class="background-white background-primary-hightlight">
<div class="line">
<div class="s-12 l-2">
<a href="index.html" class="logo"><img src="img/logo-free.png" alt=""></a>
</div>
<div class="top-nav s-12 l-10">
<p class="nav-text"></p>
<ul class="right chevron">
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a>Services</a>
<ul>
<li><a>Service 1</a>
<ul>
<li><a>Service 1 A</a></li>
<li><a>Service 1 B</a></li>
</ul>
</li>
<li><a>Service 2</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header><?php wp_head(); ?> will help to print style sheet and other for the website similarly we have to call WordPress default function <?php wp_footer(); ?> footer section.
footer.php
<!-- FOOTER -->
<footer>
<!-- Social -->
<div class="background-primary padding text-center">
<a href="/"><i class="icon-facebook_circle icon2x text-white"></i></a>
<a href="/"><i class="icon-twitter_circle icon2x text-white"></i></a>
<a href="/"><i class="icon-google_plus_circle icon2x text-white"></i></a>
<a href="/"><i class="icon-instagram_circle icon2x text-white"></i></a>
</div>
<!-- Main Footer -->
<section class="section background-dark">
<div class="line">
<div class="margin">
<!-- Collumn 1 -->
<div class="s-12 m-12 l-4 margin-m-bottom-2x">
<h4 class="text-uppercase text-strong">Our Philosophy</h4>
<p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>
<div class="line">
<h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8 margin-m-bottom">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
<!-- Collumn 2 -->
<div class="s-12 m-12 l-4 margin-m-bottom-2x">
<h4 class="text-uppercase text-strong">Contact Us</h4>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-placepin text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><b>Adress:</b> Responsive Street 7, London, UK</p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-mail text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><a href="/" class="text-primary-hover"><b>E-mail:</b> contact@sampledomain.com</a></p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-smartphone text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><b>Phone:</b> 0700 000 987</p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-twitter text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><a href="/" class="text-primary-hover"><b>Twitter</b></a></p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-facebook text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11">
<p><a href="/" class="text-primary-hover"><b>Facebook</b></a></p>
</div>
</div>
</div>
<!-- Collumn 3 -->
<div class="s-12 m-12 l-4">
<h4 class="text-uppercase text-strong">Leave a Message</h4>
<form class="customform text-white">
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-6">
<input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
</div>
<div class="s-12 m-12 l-6">
<input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
</div>
</div>
</div>
<div class="s-12">
<textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
</div>
<div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div>
</form>
</div>
</div>
</div>
</section>
<hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">
<!-- Bottom Footer -->
<section class="padding background-dark">
<div class="line">
<div class="s-12 l-6">
<p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
<p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
</div>
<div class="s-12 l-6">
<a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
</div>
</div>
</section>
</footer>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/template-scripts.js"></script>
</body>
<?php wp_footer(); ?>
</html>//Landing Page Code
front-page.php
<?php
/*
Template Name: Home
*/
get_header();
?>
<!-- MAIN -->
<main role="main">
<!-- Main Carousel -->
<section class="section background-dark">
<div class="line">
<div class="carousel-fade-transition owl-carousel carousel-main carousel-nav-white carousel-wide-arrows">
<div class="item">
<div class="s-12 center">
<img src="img/01-boxed.jpg" alt="">
<div class="carousel-content">
<div class="padding-2x">
<div class="s-12 m-12 l-8">
<p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">Prospera is the New Amazing HTML5 Template</p>
<p class="text-white text-size-16 margin-bottom-40">Duis autem vel eum iriure dolor in hendrerit in vulputate velit<br> esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="s-12 center">
<img src="img/02-boxed.jpg" alt="">
<div class="carousel-content">
<div class="padding-2x">
<div class="s-12 m-12 l-8">
<p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">With Fully Responsive Components</p>
<p class="text-white text-size-16 margin-bottom-30">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 1 -->
<section class="section background-white">
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<img class="margin-bottom" src="img/img-01.jpg" alt="">
<h2 class="text-thin">Clean Design</h2>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
<div class="s-12 m-12 l-4 margin-m-bottom">
<img class="margin-bottom" src="img/img-02.jpg" alt="">
<h2 class="text-thin">Valid code</h2>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
<div class="s-12 m-12 l-4 margin-m-bottom">
<img class="margin-bottom" src="img/img-03.jpg" alt="">
<h2 class="text-thin">Totally free</h2>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</section>
<!-- Section 2 -->
<section class="section background-primary text-center">
<div class="line">
<div class="s-12 m-10 l-8 center">
<h2 class="headline text-thin text-s-size-30">We are Web Design Heroes</h2>
<p class="text-size-20">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>
</div>
</div>
</section>
<!-- Section 3 -->
<section class="section background-white">
<div class="full-width text-center">
<img class="center margin-bottom-30" style="margin-top: -210px;" src="img/bio.png" alt="">
<div class="line">
<h2 class="headline text-thin text-s-size-30">Fully <span class="text-primary">Responsive</span> HTML5 Template</h2>
<p class="text-size-20 text-s-size-16 text-thin">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>
<i class="icon-more_node_links icon2x text-primary margin-top-bottom-10"></i>
<p class="text-size-20 text-s-size-16 text-thin text-primary">Try resize your browser window</p>
</div>
</div>
</section>
<hr class="break margin-top-bottom-0">
<!-- Section 4 -->
<section class="section background-white">
<div class="line">
<h2 class="text-thin headline text-center text-s-size-30 margin-bottom-50">From Our <span class="text-primary">Blog</span></h2>
<div class="carousel-default owl-carousel carousel-wide-arrows">
<div class="item">
<div class="margin">
<div class="s-12 m-12 l-6">
<div class="image-border-radius margin-m-bottom">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-05.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8 margin-m-bottom">
<h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
<div class="s-12 m-12 l-6">
<div class="image-border-radius">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-03.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8">
<h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="margin">
<div class="s-12 m-12 l-6">
<div class="image-border-radius margin-m-bottom">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8 margin-m-bottom">
<h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
<div class="s-12 m-12 l-6">
<div class="image-border-radius">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-02.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8">
<h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="margin">
<div class="s-12 m-12 l-6">
<div class="image-border-radius margin-m-bottom">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-01.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8 margin-m-bottom">
<h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
<div class="s-12 m-12 l-6">
<div class="image-border-radius">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-06.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8">
<h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<? get_footer(); ?>We need to add get_header and get_footer code for getting the header and footer part for more information you can go through the WordPress official website.
Now one by one upload css js and other external file into the theme folder and link it like below
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prospera Free - New Amazing HTML5 Template</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/components.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/icons.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/responsee.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/owl-carousel/owl.theme.css">
<!-- CUSTOM STYLE -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/template-style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/validation.js"></script>
<?php wp_head(); ?>
</head> <?php echo get_template_directory_uri() ?> this WordPress Default code will help to link your path dynamically
Now you can see our websites looks is changed like below
Thanks for reading… Next Part will be published ASAP
