Search This Blog

How To Create Wordpress Theme From Scratch

Wordpress is popular bloging platform that evolve into self-publishing-site platform. And you may be wonder how to create Wordpress theme. I share my experience learning Wordpress theme here.

1. Create a new folder in /wp-content/themes according to your theme name, I name it dummy. Important: use only lowercase and no space. If you gonna create theme name the most awesome, then name it themostawesome.

2. Create file index.php and style.css in that folder.
Insert this code into index.php:
<?php
/**
 * The main template file.
 *
 * This is the Wordpress theme Dummy. Developed by dummies, for dummies.
 *
 * @package WordPress
 * @subpackage Dummy
 * @since Dummy 0.000001
 */
?><html>
<title>The awesome Wordpress theme</title>
<head>
</head>
<body>
<div id="page-wrapper">
    <div id="header">
        <h1>I'm header</h1>
    </div><!-- end eader -->
   
    <div id="main">   
        <div id="content">
            <h2>I'm content</h2>
        </div><!-- end content -->

        <div id="sidebar">
            <h2>I'm sidebar</h2>
        </div><!-- end sidebar -->
    </div><!-- end main -->

    <div id="footer">
        <h2>I'm fotter</h2>
    </div><!-- end footer -->
</div><!-- end page wrapper -->
</body>
</html>

Important: Wordpress will look index.php in theme directory. This is the mother of all scripts in Wordpress template system. The line between /** ... */, is description of about what file its is.

3. Insert code below into style.css:
/*
Theme Name: Dummy
Theme URI: http://www.galuhpakuan.com/
Description: the super duper yummy theme for dummies
Author: the GaluhPakuan team
Version: 0.000001
License: GNU General Public License
License URI: license.txt
Tags: simple, white, black
*/

Important: This header line will appear in Admin dashboard. I think you now meaning of each line :), its self-describe.

4. Go to your admin dashboard > Apearance > Theme, then activate this theme.


5. Time to test our dummy theme...

Next we will learn how to use Wordpress code to fill our theme with dynamic data. See you soon...

How to create Wordpress theme from scratch part 1
How to create Wordpress theme from scratch part 2
How to create Wordpress theme from scratch part 3

share and comment


Related Posts :