Tutorial
Click on thumbnailed images to enlarge
(possible typos ahead - same tutorial that was on my site)
the first step is, of course, to create a new theme. so, make a new theme, title it whatever you want.. i really dont care. the folder title has no effect on the theme title. i swear.
your theme folder should have:
-index.php - copied from the "classic" layout. i have customized mine a bit, and if you already have a customized one, use it. this is your blog page.
-sidebar.php - dont copy this from "classic". ill give you the codes to my sidebar.
-comments.php - copied from "classic", unless you already have a customized one. i dont care.
-style.css - your stylesheet. this is where we will position everything. ill give you my stylesheet to use, unless you already have one. but only use it IF YOU KNOW HOW TO USE CSS.
-header.php - this is where most of it happens. weee.
ok, so lets start out with the stylesheet (style.css). im only going to show you the parts you need to know about. there are a lot of useless things lying in my css.
feel free to ask me questions, and tell me if this tutorial was helpful.
next is the main index template (index.php)
you can customize this if you want. i have taken out categories (they annoy me), and added a comment plugger.
you shouldnt copy this. im just showing it to you for educational purposes
so now, your blog page will have something on it.
now for the sidebar..which is...the sidebar.
example of a sidebar:
my header.php:
now go to your blog page.
your layouts there! yay!
but..wait..what about the rest of the pages..
create a dynamic header.php file (..path to your site/header.php)
paste and edit this into that file. never change this.:
so, you need to know your path.
now, on every one of your pages, place this at the beggining.:
(updated 4/12/07)
the first step is, of course, to create a new theme. so, make a new theme, title it whatever you want.. i really dont care. the folder title has no effect on the theme title. i swear.
your theme folder should have:
-index.php - copied from the "classic" layout. i have customized mine a bit, and if you already have a customized one, use it. this is your blog page.
-sidebar.php - dont copy this from "classic". ill give you the codes to my sidebar.
-comments.php - copied from "classic", unless you already have a customized one. i dont care.
-style.css - your stylesheet. this is where we will position everything. ill give you my stylesheet to use, unless you already have one. but only use it IF YOU KNOW HOW TO USE CSS.
-header.php - this is where most of it happens. weee.
ok, so lets start out with the stylesheet (style.css). im only going to show you the parts you need to know about. there are a lot of useless things lying in my css.
/* the width of your image */
div#everything {
width: 881px;}
/* positions the sidebar */
#sidebar {
position: absolute;
width: 174px;
top: 476px;
left: 14px;}
/* styles the sidebar */
.side{
background: #B8B16D;
font-size: 11px;
font-family: tahoma;
color: #F0F4B7;
text-transform: none;
border: 0px solid #53768A;
margin: 0px;
padding: 3px;
}
/* positions and styles the blog and content */
#blog {
position: absolute;
top: 610px;
left: 230px;
width: 540px;
font-family: tahoma;
font-size: 11px;
color: #F0F4B7;
background: #B8B16D;
padding: 3px;
margin: 0px;}
div#everything {
width: 881px;}
/* positions the sidebar */
#sidebar {
position: absolute;
width: 174px;
top: 476px;
left: 14px;}
/* styles the sidebar */
.side{
background: #B8B16D;
font-size: 11px;
font-family: tahoma;
color: #F0F4B7;
text-transform: none;
border: 0px solid #53768A;
margin: 0px;
padding: 3px;
}
/* positions and styles the blog and content */
#blog {
position: absolute;
top: 610px;
left: 230px;
width: 540px;
font-family: tahoma;
font-size: 11px;
color: #F0F4B7;
background: #B8B16D;
padding: 3px;
margin: 0px;}
feel free to ask me questions, and tell me if this tutorial was helpful.
next is the main index template (index.php)
you can customize this if you want. i have taken out categories (they annoy me), and added a comment plugger.
you shouldnt copy this. im just showing it to you for educational purposes
<?include ("header.php"); ?>
<div id="blog">
<style type="text/css">
p {
margin-top: 0;
}
</style>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_date('','<h1>','</h1>'); ?>
<h2><div class="post" id="post-<?php the_ID(); ?>"></div>
<div class="meta"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> </a> @ <?php the_time() ?> <?php comments_popup_link(__('Loves (0)'),__('Loves (1)'),__('Loves (%)')); ?> </div></h2>
<?php the_content(); ?>
<br>~<b><?php the_author() ?></b>
<br><br><?php mdv_comment_plugger(); ?>
</p><p>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
<div id="blog">
<style type="text/css">
p {
margin-top: 0;
}
</style>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_date('','<h1>','</h1>'); ?>
<h2><div class="post" id="post-<?php the_ID(); ?>"></div>
<div class="meta"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> </a> @ <?php the_time() ?> <?php comments_popup_link(__('Loves (0)'),__('Loves (1)'),__('Loves (%)')); ?> </div></h2>
<?php the_content(); ?>
<br>~<b><?php the_author() ?></b>
<br><br><?php mdv_comment_plugger(); ?>
</p><p>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
so now, your blog page will have something on it.
now for the sidebar..which is...the sidebar.
example of a sidebar:
<div class="side">
<h1>hello</h1>
this is an example of a sidebar
</div>
<h1>hello</h1>
this is an example of a sidebar
</div>
my header.php:
<!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" dir="ltr" lang="en">
<title>seizure.ill-wed.com</title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<div id="everything">
<div id="image"> </div>
<div id="sidebar">
<?include ("sidebar.php"); ?></div>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<title>seizure.ill-wed.com</title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<div id="everything">
<div id="image"> </div>
<div id="sidebar">
<?include ("sidebar.php"); ?></div>
now go to your blog page.
your layouts there! yay!
but..wait..what about the rest of the pages..
create a dynamic header.php file (..path to your site/header.php)
paste and edit this into that file. never change this.:
<?php require('/home/path/to/your/blog/wp-blog-header.php'); ?>
<?php get_header(); ?>
<?php get_header(); ?>
so, you need to know your path.
now, on every one of your pages, place this at the beggining.:
<?include ("header.php"); ?><div id="blog">
(updated 4/12/07)
Tutorial Comments
Showing latest 2 of 2 comments
i dont get ANY of it XD
By ScarlettRaine on Apr 24, 2008 7:30 am
got a question how do i make one of those layout sites i see on mypace everywhere
By bman007 on Jun 21, 2007 1:48 pm
