Search This Blog

How To Create Wordpress Theme From Scratch #2

We've successfully create our first Wordpress theme. Actually, we didn't create real theme, that just static HTML and CSS that identified as theme by Wordpress. Now, we will make that static script to become real Wordpress theme.

See screen shot above, that's common web page design pattern with four areas: contain header, main content, sidebar and footer area. In Wordpress, you need to create header.php for header area, sidebar.php for sidebar, footer.php for footer, while the main content will be served by our own script, we create content.php as main content container.

Wordpress has several function to load those theme parts:
get_header() to load header part;
get_sidebar() to load sidebar part;
get_footer() to load footer part;
get_template_part() to load custom template part, in this example our content.php.


Important: Always add comment on your script, at least give the description and version. You may also add additional info: author name, license and path to the file.
Example:
/**
* @author: Otong.
*  Location; /wp-content/themes/dummy.
*  License: BSD License.
*/

That's good coding practice.

Remember that we created index.php before, we will split our index.php into header.php, content.php, sidebar.php and footer.php. Our index.php become:

<?php
/**
 * The main template file.
 *
 * This is the Wordpress theme Dummy. Developed by dummies, for dummies.
 *
 * @package WordPress
 * @subpackage Dummy
 * @since Dummy 0.000001
 */

get_header(); //load the header.php
get_template_part('content', 'index'); //load the content.php
get_sidebar(); //load the sidebar.php
get_footer(); //load the footer.php
?>


Example header.php:
<?php
/**
 * The Header containing header with logo, site name, site description and the top navigation menu, end with id=main div.
 *
 * @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">


Example of sidebar.php:
<?php
/**
 * The Sidebar containing the main menu or other widget.
 *
 * @package WordPress
 * @subpackage Dummy
 * @since Dummy 0.000001
 */
?>
        <div id="sidebar">
            <h2>I'm sidebar</h2>
        </div><!-- end sidebar -->


Example of footer.php:
<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content after
 *
 * @package WordPress
 * @subpackage Dummy
 * @since Dummy 0.000001
 */
?>
</div><!-- end main -->

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


Example of content.php:
<?php
/**
 * The default template for displaying content
 *
 * @package WordPress
 * @subpackage Dummy
 * @since Dummy 0.000001
 */
?>
        <div id="content">
            <h2>I'm content</h2>
        </div><!-- end content -->



OK, our theme still not load data from database, we will learn on the next series. Stay tune!

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 :