How to develop wordpress theme from scratch

You can create a website using html, css, javascript and php beautifully. But It takes lots of time and hard work to make and still not get the look what client want. WordPress can be used in that case. WordPress give you a readymade website with basic theme which can be used to create website. After that wordpress allow to customize it and create own theme which can convert wordpress from a simple bloggin platform to shopping website or company website or restaurant website. Here we will learn to create wordpress theme

GOALS

  • Install WordPress
  • Convert existin html website to wordpress theme

Getting started: The desing

Outside of configuring wordpress, everything you do in wordpress will be in wp-content folder. All other files are core code and you should not edit it.

In finder, go thorough wp-content > themes to arrive at theme folder. There will be three default themes twentyfifteen,  twentyfourteen,  twentythirteen – and index.php which is provided by wordpress. Here you can create your custom theme . I called it customWordpressTheme.

A WordPress theme needs only two files to exists -style.css and index.php

Style.css

/*
ThemeName: customWordpressTheme
Author: Ashish Singhal
Description: A css file to custom theme
Date: 31 Jan 2019
*/

Create style.css file in theme folder customWordpressTheme . This file for just indication. You can write more css code accroding to your requirement.

Index.php

Create index.php file in customWordpressTheme folder. Data from this file will be rendered to wordpress site as home page will load.

<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″> <meta name=”description” content=””>
<meta name=”author” content=””>
<title>Blog Template for Bootstrap</title>
<link href= “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” rel=”stylesheet”> <link href=”<?php echo get_bloginfo( ‘template_directory’ );?>/blog.css” rel=”stylesheet”>
</head>
<body>
This is a custom wordpress theme.
</body>
</html>

This is sample code. You can customize it and can add changes as you want and you have knowledge of html,css and javascript.

Apply theme in wordpress

Now your theme has been created. Go to wordpress dashboard, click on Appearance > themes. You will see your theme with default themes.

Activate the theme and go back to main url. Your theme will start to display. Congrates. Of course, It can’t do much more a staic htmle website do. But you are all setup now.

In next tutorial We will see how to customize it more and show default post from wordpress database to your themes, make more beautiful designs

How to make Html page

Requirements

  • Text Editor
  • Internet Browser(Chrome or Internet Explorer)

Introduction

When you open web page on the internet, the browser doing a lot of work. The browser reads the all necessary files (Html, Css, Javascript) and create process them and create a web page that looks we see.

Step 1: Open text Editor

Open simple text editor. It shoud not be word processor. It shuld be simple editor which show data same as you write.

STEP 2: Write html code

To write html page some basisc code should be written. Within basic structure, within body tag you can write whatever you want to show in browser 

 <!DOCTYPE html>
 <html>   
 <head>    
   <title>My First Web Page!</title>            </head> 
<body>   
  <h1>Hello World!</h1>  
 </body> 
</html>

Step 3: Save file

After writing the code, yoou have to save file to run in browser. You have to remember few things while saviing file
1. Save file with .html extension like demo_first.html
2. File should not have special character. Only contain dash(-) or underscore(_)

Step 4: Open file in browser

Open web browser. It can be internet explorer or chrome(preffered). Go to file->open and select your file. You will be able to see file data as Hello world As it is in body tag.  

Step 5: congrates

Congrates. Your web page is ready. Now you have created first html page of your website. You are on the way to web designer. For more tags which will be used within body tag to format design in web page you can refer w3schools.com