Developing a WordPress theme from scratch

To get started with your wordpress site, you first need to download and install wordpress. Setting up wordpress is pretty easy. Visit their official site to do this. 

Once you have completed your HTML, you can start integrating your HTML into wordpress. Starting with the theme creation, firstly create your theme folder under wp-content/themes directory. Create a new directory there of your theme name.

There are 2 main files that you need to create initially – index.php and style.css. 

Declare your theme like below:

Rename your index.html file that you had created to index.php. Your theme is now created and it will show under Appearance -> Themes. Go ahead and activate it. Technically your theme is ready. Now all you need to do is convert your static code into dynamic code and start dividing your page into various sections as per wordpress standards.

So your theme will comprise of

index.php

header.php

footer.php

sidebar.php

functions.php

1. header.php

First step towards making code dynamic is to start with moving all your header code to header.php and including it in your index file as 

<?php get_header();  ?>

Your css will be included in header file now with a dynamic path as below:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

2)  footer.php

Like header you will have the footer file included as <?php get_footer(); ?> by moving footer code to footer.php

You need to create widgets using functions.php and include in your header/footer or wherever necessary. Here is the code example:

3) sidebar.php

This is needed when you have a left or a right column in your website. Most of the websites have and if its a blog website, you will certainly want to have one. Include all you sidebar code in this file and simply call this file in your index.php

4) functions.php

All the widgets that you need in the site, need to be create in this file. See example below for the syntax:

5) index.php

So your index file now only has references to all your files. You are simply calling all your files here.

<?php get_header(); ?>

<?php get_sidebar(); ?>

</div> <!– /.row –>

<?php get_footer(); ?>

Thats it! The theme is ready to fetch things dynamically exactly like a wordpress site should.

If you need professional help with your wordpress site, hire wordpress developer India that can provide you quality services at affordable rates. For more information please visit www.kinsh.in.