Creating & Customizing a WordPress Theme | ITC298

If you plan on being a professional website designer/developer, you should really consider creating your own theme.

The Template Files

Creating a template file structure for a WordPress site is fairly easy to do. I started off by using my same old template structure that I always go back to when designing and producing a new website. This way, I was able to develop a WordPress template file structure (system) that was a familiar build for me.

See Also: Building an HTML Template from Master Art | Premium Design Works

Since I was also familiar with the Anatomy of a WordPress Theme, I was able to take my basic template and break it into the standard template files to begin creating my own WordPress theme:

customizing-00

All I had to do then was add the correct WordPress functions into the proper places in my template files and check out the HTML it wrote to write a proper CSS file. It was that simple.

The Functions

The files of WordPress define many useful PHP functions. Some of the functions, known as Template Tags, are defined especially for use in WordPress Themes. There are also some functions related to actions and filters (the Plugin API), which are therefore used primarily for developing Plugins. The rest are used to create the core WordPress functionality.

— http://codex.wordpress.org/Function_Reference

Let’s take a look at some of the basic WordPress functions that you will need to incorporate into your template files and see how they work.

One of the most basic WordPress functions that will use is the wp_title function:

header.php

Here I have used the wp_title function in my title tag to display a page’s title in my browser’s title bar.

The wp_title function gets the title that you have written for your page:

customizing-03

It will (secretly) look into the the WordPress application to access the statements of the function:

general-template.php

And Bob’s your uncle, it will display your page’s title in the browser’s title bar:

customizing-04

Another common function that you will be using is the wp_list_pages function:

header.php

The wp_list_pages function displays a list of WordPress Pages as links. It is often used to customize the Sidebar or Header, but may be used in other Templates as well.

I use the wp_list_pages function in several places.

First, I use it in my main navigation. I have also set several parameters to the function to tell it how to behave:

<?php wp_list_pages('post_title&amp;depth=1&amp;title_li=&amp;meta_key=navigation&amp;meta_value=main'); ?>

I have set my main navigation to display my top level pages using the post title and displayed as a list.

I have also designated some top level pages as “main navigation” only via my custom fields:

customizing-06

Second, I use it in my sidebar to display my sub-page navigation.

Here, I have used an if/else statement to display my “lecture” sub-page navigation with it’s headline only if “lecture” sub-pages exist:

<!-- Begin Lectures -->
<?php //list sub-pages even if on a sub-page
>if($post->post_parent)
$children = wp_list_pages("title_li=&amp;child_of=".$post->post_parent."&amp;echo=0&amp;meta_key=navigation&amp;meta_value=lecture" ); else

$children = wp_list_pages("title_li=&amp;child_of=".$post->ID."&amp;echo=0&amp;meta_key=navigation&amp;meta_value=lecture");

if ($children) {
?>
<h3>Lectures</h3>
<ul><?php echo $children; ?></ul>
<?php }
?>
<!-- End Lectures -->

The Loop

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post.

— http://codex.wordpress.org/The_Loop