Wordpress template from scratch tutorial #2

icon_big Hey, please read Wordpress template from scratch tutorial #1 and learn about possible wordpress theme files structure.

Now it is a good time to create simple wordpress template, we will create basic wordpress template output in this tutorial.

Before we will start, please create some folder and name it with any name , you can name your template folder “glurt”, all files described below should be located in that directory.

This is basic template tutorial, and you will not see any graphics here.

Lets start from our files skeleton :

header.php

<html>
<!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” <?php language_attributes(); ?>>

<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’); ?>” />

<title><?php wp_title(’«’, true, ‘right’); ?> <?php bloginfo(’name’); ?></title>

<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” />
</head>
<body>
<div id=”page”>
<div id=”header”>
<h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>
</div>

<?php language_attributes(); ?> defines blog language attributes automatically defined with wordpress, language attributes set to en by default

<?php bloginfo(’html_type’); ?> Defines html type

<?php bloginfo(’charset’); ?> Like it sounds defines charset, you can remove this line and add manually your charset, like utf-8

<title><?php wp_title(’«’, true, ‘right’); ?> <?php bloginfo(’name’); ?></title> This is our title, changed dynamically once someone clicks on any post or blog page or category

First line defines our stylesheet file location – style.css, the second line used for pingbacks definition.

This is our blog name output, links back to the homepage.

sidebar.php

There is two options to create wordpress sidebar, we could use wordpress API to read all the elements manually, and another option is to create functions file and define dynamic sidebar there, once activated, you can add widgets from your wordpress admin and all the widgets will be shown automatically on your blog’s sidebar.

Manual sidebar definition code

<div id=”sidebar”>
<h2><?php _e(’Categories’); ?></h2>
<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>

<h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</div>

<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?> this api code will output categories not in hierarchical structure

You can exclude one or more categories from being listed by adding exclude=1 variable in API url , for example

<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0&exclude=1′); ?>

<?php wp_get_archives(’type=monthly’); ?> This code will output monthly archives.

Creating automatic sidebar register sidebar.

create file called functions.php in your template directory and enter the lines

<?php
automatic_feed_links();
if ( function_exists(’register_sidebar’) ) {
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
}
?>

Next open sidebar.php and enter the code

<div id=”sidebar”>
<?php
if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<h2><?php _e(’Categories’); ?></h2>

<ul>

<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>

</ul>

<h2><?php _e(’Archives’); ?></h2>

<ul>

<?php wp_get_archives(’type=monthly’); ?>

</ul>
<?
endif;
?>
</div>

Now when the dynamic sidebar defined, all the widgets will be shown on our sidebar, and if it is not defined, API code will be shown.

index.php

Now is our index.php, index.php is our blog’s homepage and so called template bootstrap. Enter these lines into your index.php

<?php

get_header(); ?>
<div id=”content” >

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>

<small><?php the_time(’l, F jS, Y’) ?> <!– by <?php the_author() ?> –></small>
<div>
<?php the_content(’Read the rest of this entry »’); ?>
</div>

<p><?php the_tags(’Tags: ‘, ‘, ‘, ‘<br />’); ?> Posted in <?php the_category(’, ‘) ?> | <?php edit_post_link(’Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>

</div>
<?php endwhile; ?>

<?php else : ?>
<div>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>
<?php get_search_form(); ?>
</div>
<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The index.php code reads post entries and outputs it in our blog’s homepage. If specified category or archive, it will call all the post in the specified category or achive.

footer.php

Footer is a code that closes every single and multiple page, it’s a bottom part of our wordpress blog.Copy and paste this code into your footer.php file

</div>

</body>
</html>

<b><?php bloginfo(’name’);?> ©</b> – we just printed our blog name and the copyright symbol.

Now when the footer.php created , we can create our CSS style.css file.

style.css

style.css is our template style sheet file. You can copy and paste code below and save it as your style.css file in template directory.

body {
font-size: 12px;
font-family: Arial, Helvetica, Tahoma, sans-serif;
background: #fff url(’images/body_bg.png’) repeat-x;
color: #333;
text-align: center;
margin: 0 0 20px 0;
padding: 0;
}

#page {
background-color: white;
border: 1px solid #959596;
text-align: left;
background-color: white;
margin: 20px auto;
padding: 0;
width: 900px;
border: 1px solid #959596;
}

#header {
border: 2px #a2a2a2 solid;
}

#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;

}

#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}

#delimiter {
clear: both;
}

#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}

.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

html>body .entry li {
margin: 7px 0 8px 10px;
}

.entry ul li:before, #sidebar ul ul li:before {
content: “\00BB \0020″;
}

.entry ol {
padding: 0 0 0 35px;
margin: 0;
}

.entry ol li {
margin: 0;
padding: 0;
}

.entry form {
text-align:center;
}
.post {
margin: 0 0 40px;
text-align: justify;
padding:1em;
}

Our next #3 tutorial will be on editing stylesheet.css and adding additional code into our template.

Good luck

Add Twitter response to this post...
Twitter username :
Twitter password :
Response to http://tinyurl.com/pfgpb7

Post Metadata

Date

July 5th, 2009

Author

glurt