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