Tutorials PHP Creating a WordPress Theme

Creating a WordPress Theme

Today I'll teach you how to create a custom WordPress theme from scratch. Why would you do this when there are so many themes out there? Challenge, efficiency, or the fact that stuff that's mainstreamed for everybody isn't tailered for you.

The Essential Files

A WordPress theme requires a minimum of two files, but usually has at least five. The two core files required are index.php and style.css placed in the root directory of the theme. The index.php file can be structured like a typical web document with a few minor changes and the style.css file needs a few lines of code at the top.

style.css

The style.css is a typical css file that requires a few extra lines of code at the top. WordPress uses the style.css data to display information about the theme on your WordPress admin panel.

/*
Theme Name: BareBones Website
Theme URI: http://www.magicmediamuse.com
Description: BareBones Website for WordPress is the bare minimum required to have a functional theme.
Version: 1
Author: Richard Hung
Author URI: http://www.magicmediamuse.com
*/

/*********************** CSS starts here ***********************/

index.php

The index.php file can be styled like a typical web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?></title>

<!-- Get header data -->
<?php wp_head(); ?>

</head>

<body>

<!-- Display the menu -->
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

<?php
if (have_posts()) { // If there are posts
  while (have_posts()) {
    
    // Iterate the post index 
    the_post();
?>  

<!-- Display the title -->
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>  

<!-- Display the content -->
<?php the_content(''); ?>  

<!-- Display the author, time, comments and category information -->
<p>Posted by <?php the_author() ?> on <?php the_time('F j, Y, g:i a'); ?>. <?php comments_number(); ?> Comments. Category: <?php the_category(', '); ?></p>  
  
<?php
  } // End while have_posts
  
  next_posts_link('Older Posts');
  echo ' | ';
  previous_posts_link('Newer Posts');
  
} else { // If there are no posts
?>  
  
<h1>Error</h1>  
  
<p>There are no posts. Please login with privilages to post.</p>  
  
<?php } // End if have_posts ?>  

<!-- Get footer data -->
<?php wp_footer(); ?>

</body>
</html>

What does it all mean?

There are so many different functions that you can use to power your theme and the comments explain it pretty well. For a full list of all the functions, check out WordPress Codex. The main thing you have to watch out for is wp_head and wp_footer. They are both very important functions. A lot of plugins require their own code on the page and these functions allows that to happen.

What are other files you can add?

page.php is for single pages.

single.php is for single posts.

header.php can be called by get_header().

sidebar.php can be called by get_sidebar().

footer.php can be called by get_footer().

screenshot.png can be used to show up on the WordPress admin panel.

Have fun playing around with WordPress. Although I know how to use it, I still stick with my original statement that a CMS built from scratch for you will always be better than an open-source CMS built for everyone. Most people don't want, need, or even know how to use 90% of the features offered in a standard CMS, but it's still wasting space and bandwith for both the user and host.

PS. I'm running out of topics to cover so I won't be updating regularly anymore. I'll post a new tutorial whenever I find something worthy to tutor.

Posted by on . Category: PHP


Comments

No comments posted yet

You need to register or login to post new comments.