Here is a tutorial showing you how to make a layout that is WordPress friendly. Create a new folder with the name of your layout. For this example, I’m making a “Heart Broken” layout with Blair Waldorf from Gossip Girls. I’m calling my file “hbb” – “heart broken blair”. You can call your file anything you’d like.

*Note that this layout does not include a sidebar, but a navigation menu at the top of the page.

Step 1: Create the Layout Images

Personally, I like making all my images first, then working with widths and sizes etc. I have four standard images that I make everytime, as you can see in the screenshot below.

1 – The header for your layout – This should be attractive, and should have your site name, or some text on it. The header should also have the background color, and the top part of the content area.
2 – The repeating pattern for the body of your layout – The background of the body of my layouts, where the content goes, is a simple repeating design. Once you’ve made your header use the selection tool, select the portion of the header that is the top of the content (thought don’t copy the top of the content area), and this is normally fine. I say that it’s normally fine because you may have added fancy designs in your header that spill over onto the top of the content section. Be careful in what you select in this case, as it will repeat down your page.
3 – The footer for your layout – This should provide a clear “end” to the page, so that users with slow internet don’t wait for more information to load. Most people have their credits here as well.
4 – The background color – Some browsers interpret hexadecimal colors differently, resulting in your layouts background being different to the main background of the page. To avoid this problem, just copy a small square of the main background color from the header, and save it as the layouts color or main background.

Save all the images in a folder called “images” inside your main folder.

Step 2: Create the Generic Layout Code

In this step, you will code the layout the same way you code any other layout. I strongly suggest using div’s in your layout, over tables, as Div’s are easier to integrate in a WordPress layout, with fewer mistakes. It also allows for a lot more flexibility in the layout. I personally prefer using Dreamweaver to code my layouts, however you can use textedit, notepad, anything.

Create a main container div around your entire layout. This will contain everything you do in your layout, as can be seen by the container, or blue line.
Not split your layout into a header, content and footer area.
The header contains your header image, as well as the navigation links that appear at the top of the page.
The content contains your blog posts, resources, contents, photos, poems or anything else that you will have on your site.
The footer ends the page, and contains copyright information. You usually copyright your site to youself if your site was entirely made by you. You can also credit people who inspired your site, or helped with your layout.

Save this code in your “hbb” file, and name it as a generic or basic layout for your theme. For example, “hbb_generic”.

Make sure you test your layout in as many different browsers as you can. The main browsers to test with are Google Chrome, Firefox, Safari and Internet Explorer.

To code your layout, split it up into three (or four, if you have a sidebar) areas.

Step 3: WordPressing – CSS

Now comes for the trickier parts of creating your WordPress theme. WordPress uses PHP Includes to include different parts of your code into the theme. Have your hbb_generic file open, but make sure you don’t edit anything in this file. Now copy ALL the css text in the file, without the

<style type="text/css"> and </style> tags. Paste your CSS codes into a new document called style.css. Make sure it has the .css extension, or you will run into some problems.

Next, copy the following CSS and paste it at the top of your style.css file. Edit it as necessary. When you upload your theme to wordpress, wordpress uses the information listed below to get information about your layout.

/*
Theme Name: NAME OF YOUR LAYOUT
Theme URI: URL OF THEME’S WEBSITE (WEBSITE THAT THE THEME CAN BE ACCESSED FROM)
Description: DESCRIPTION OF YOUR THEME
Version: 1.0.0
Author: YOUR NAME

Author URL: YOUR WEBSITE URL
*/

Step 4: WordPress – Header

Go back to the generic layout you coded. Now copy everything from the top of the layout to the <div id="content"> tag. Get rid of the <style type="text/css"> and </style> tags, as well as the CSS codes inside them if you haven’t already.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>SITE NAME HERE</title>
</head><body>

<div id="container">

<div id="header">

<div id="nav">
Navigation Links

</div>
</div>
<div id="content">

Save this as a new document called header.php. This makes up the header of your site. To make this wordpress-friendly, you need to add a few code snippets into the header of the code. The first code we use is going to call your css file. Insert this code under your <title> tags, but before you close the head tag.

<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />

If you use pingbacks, RSS or Atom feeds, you will need the following codes. If you’re not sure what they are, put them into your layout anyway. They are a way for other people to follow your site easily.

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(‘name’); ?> RSS Feed" href="<?php bloginfo(‘rss2_url’); ?>" />

<link rel="alternate" type="application/atom+xml" title="<?php bloginfo(‘name’); ?> Atom Feed" href="<?php bloginfo(‘atom_url’); ?>" />

<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />

Making your page search engine friendly is very important if you hope people will find your site through searching on google, bing, or some other search engine. Find the <title> tags in your header.php file, and replace it with this code:

<title><?php if (is_home () ) {bloginfo(‘name’); }
elseif (is_category() ) { single_cat_title(); echo ‘ _ ‘;
bloginfo(‘name’); }
elseif (is_single() ) { single_post_title();}
elseif(is_page() ) { single_post_title();}
else { wp_title(”,true); } ?></title>

This code creates different title settings depending on wether your visitor has opened a single blog post page, or a search page, or somethihng else altogether. Save your header.php file.

If you want to make your site extremely wordpress friendly, copy the code below, and add in any extra header codes that you may have had in your layout (for example the sidebar).

<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage RED by Enchant Me Not
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( ‘charset’ ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;

wp_title( ‘|’, true, ‘right’ );

// Add the blog name.
bloginfo( ‘name’ );

// Add the blog description for the home/front page.
$site_description = get_bloginfo( ‘description’, ‘display’ );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";

// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘twentyten’ ), max( $paged, $page ) );

?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( ‘stylesheet_url’ ); ?>" />
<link rel="pingback" href="<?php bloginfo( ‘pingback_url’ ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );

/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>

Step 5: WordPress – Footer

Go back to the generic layout that you coded, and copy everything from the closing content div tag to the end of the page. Save it as a new file called footer.php. For my layout, my footer code simply contains the following.

</div>

<div id="footer">
<div id="footerText">
Layout by <a href="http://www.enchantmenot.info" target="_blank">Aashni at EnchantMeNot.info</a>.
</div>
</div>

</div>
</div>

</body>
</html>

Step 6: WordPress – Index (and other pages)

As said before, wordpress uses a form of php includes to load their pages. In order to get your page to work, you will need to use <?php get_header(); ?> and <?php get_footer(); ?> codes on every page in your theme. It literally "gets" the codes in the header and footer, and places them at thhe beginning and ending of the page. It’s important to remember to put the <?php get_header(); ?> at the very top of the page, and <?php get_footer(); ?> at the very end of the page. If you dont, then the codes you put before/after will mess up your layout. A sample page would look like this:

<?php get_header(); ?>The Content Goes Here
And you can put anything in this part of the code.
Pictures, codes, textareas, stories, blogs.. anything.
<?php get_footer(); ?>

The index (single and post) page in wordpress normally contains a loop that displays your blog posts. You can simply copy the loop code below. Unless you understand how to edit these codes, try not to.

<?php

function comment_plugger($show = 1, $limit = 0, $sep = ‘ ‘, $none = ‘ none’) {
global $wpdb, $tablecomments, $id;
$cid = ($show) ? ($id – 1) : $id;
$request = "SELECT DISTINCT comment_author_url, comment_author FROM
$tablecomments";
$request .= " WHERE comment_post_ID=’$cid’ AND comment_author <> ” AND
comment_author_url <> ”";
$request .= ‘ ORDER BY comment_author ASC’;
$request .= ($limit > 0) ? "LIMIT $limit" : ”;
$commenters = $wpdb->get_results($request);
if ($commenters) {
$output = ”;
foreach ($commenters as $commenter) {
if (!empty($commenter->comment_author_url)) {
$output[] = ‘<a href="’.$commenter->comment_author_url.’"
title="’.$commenter->comment_author.’">’.$commenter->comment_author.’</a>’;
}
}
}
if (is_array($output)) {
$sep = ", ";
echo implode($sep, $output);
} else {
echo $none;
}
}

?>

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

 

<h1><a href="<?php the_permalink() ?>" rel="bookmark" class="title" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h1>

<h5>Posted in <?php the_category(‘, ‘) ?>&nbsp;
<strong>|</strong>
<?php edit_post_link(‘Edit’,”,’<strong>|</strong>’); ?> on <span class=’st_facebook_buttons’ st_title=’{TITLE}’ st_url=’{URL}’ displayText=’share’></span><span class=’st_twitter_buttons’ st_title=’{TITLE}’ st_url=’{URL}’ displayText=’share’></span><span class=’st_email_buttons’ st_title=’{TITLE}’ st_url=’{URL}’ displayText=’share’></span><span class=’st_dbuzz_buttons’ st_title=’{TITLE}’ st_url=’{URL}’ displayText=’share’></span><span class=’st_digg_buttons’ st_title=’{TITLE}’ st_url=’{URL}’ displayText=’share’></span><span class=’st_sharethis_buttons’ st_title=’{TITLE}’ st_url=’{URL}’ displayText=’share’></span>
<?php the_time(‘l jS F, Y – g:ia’) ?> <!– by <?php the_author() ?> –> | <?php comments_popup_link(‘No Comments &raquo;’, ’1 Comment &raquo;’, ‘% Comments &raquo;’); ?></h5>

<div class="entry">
<?php the_content(‘Read the rest of this entry &raquo;’); ?>
</div>

<?php endwhile; ?>

<p class="alignleft"><?php next_posts_link(‘&laquo; Older Entries’) ?></p>
<p class="alignright"><?php previous_posts_link(‘Newer Entries &raquo;’) ?></p>

<p class="clear"></p>

<?php else : ?>
<h1>Not Found</h1>
<p>Sorry, but the page you requested cannot be found. If you feel this is an error, let me know.</p>
<?php get_search_form(); ?>

<?php endif; ?>

Step 7: Other Pages

There are other pages that you should code for your theme, such as the comments page, the sidebar if you are using one, the single.php and page.php. This has helped you create a very simple layout.

Step 8: Install and Use your Theme

Title says it all, upload, install and use your theme!

Hey everyone! I want to say thanks to everyone who wished me a happy birthday! I had an awesome time, and a great party. I know I’ve been awall, and that’s because I’ve been super busy.

A few days after my birthday, my grandaunt went to London to get some tests done on her. She survived cancer a few years ago, and we were all worried that it would be back. Fortunately, it hasn’t. Unfortunately, the radiation treatment they did to get rid of the cancer has made her bones degenerate, which isn’t good. She has been in a lot of pain, and could barely eat.

To add onto this, last Friday my uncle past away. He was pretty young, but fell really ill. In a way, it’s good that he passed away, so that he would stop feeling pain and suffering. I’ve known him and his family for years, we went on a safari trip together once when I was around 6. The family, his wife and four children, are keeping strong which makes me really proud of them.

One thing I can definitely say about all this is the strength my family has when something bad happens. We stick together, and support each other, wether a family member has fallen ill, or passed away, or won an award for something. We’ve been at my uncle’s house daily, helping with food, keeping his wife company, and making sure that they are ok.

When I found out about my grandaunt, it really motivated me to start up my new site, Just-Smile.org, which is made to let people share stories about things that have made them smile recently. When I realised that one of the reasons I’ve made it through all of this is that I have people who support me, and make sure I’m ok, it also occured to me that there are many people out there who don’t have that support. I really hope you can share your stories of things that make you happy, no matter how small or irrelevant they seem. You never know when someone needs support!

Hey guys! So I’m super duper happy today, as it is my birthday! WOOT WOOT! I turned 18 today (by the way, “today” is October 7th…), and am officially legal in Kenya – I can drive Which is something I’ve been looking forward to the most! I still need to go for my driving liscense test, but otherwise I’m pretty much set

As usual, I was awake at midnight, past midnight actually, doing “work”. At midnight my cousin called me, as soon as I hung up with him, two of my best friends called me as well Then two of my other cousins I then went to sleep.

I was awoken to the smell of chocolate donuts – no idea why, but my parents and sister got two donuts, and stuck a candle in the middle of it. They sang happy birthday, and woke me up – a tradition that we do, no matter who’s birthday it is. My sister leaves for school earlier than I do, and so they woke me up over an HOUR earlier than I normally do! As you can imagine, I could barely keep my eyes open enough to see them, but it was still really cool. They left the donuts next to my pillow, so while I slept I could smell them! They smelt deliciuos. Before I fell back to sleep though, my aunt called me to wish me happy birthday. This was promptly followed by about eight other phone calls wishing me a happy birthday I got to school a few minutes late, but whatever As soon as I walked into my biology classroom, all my friends (which was the whole class, and the teacher weirdly enough) shouted happy birthday It was a great way to start the day!

We then had a relatively normal biology class, with lots of note taking, and paying attention. Our classroom has white boards where you can slide one of them up and down to provide more note copying room. When my teacher slid the board up, the board underneath it had a Happy Birthday message for me from one of my bestfriends! It was one of the sweetest notes I’d ever gotten! My teacher liked it so much that he kept it up, and used the other board instead (something he NEVER does!)

When class ended, I went outside, and my other bestfriend (who’s a basketball playing giant, and a guy) grabbed me from behind, hugged me and said happy birthday! Everyone else was saying it too. One of my friends gave me this really cool badge that says “Today’s my birthday” on it, so I wore that around for the whole day. My next three blocks, however, all had tests, which was a real downer. Plus I spent the majority of my lunch break and my tutorial break in a meeting with one club or teacher, so I didn’t really get to enjoy my birthday that much.

I got home, and a couple of aunts stopped by to wish me Happy Birthday. We spent some time talking, and catching up, then I went up to do some homework. My cousin (the one who called me at midnight), called me and said we’re going out for dinner at one of my favorite restaurants – they serve sushi, pizza, and humus and pita bread! (That’s japanese, italian AND Lebanese food all in one!) He picked me, my sister, mom and grandmother up, and we all went out for dinner. We had such a blast, telling jokes, and eating GREAT food! They even got me a chocolate cake!

Now for the really IMPORTANT part! My BIRTHDAY PRESENTS!
One of my teachers gave me some candy… lol
My parents bought me a beautiful white gold necklace with diamonds in it
One uncle got me a box of chocolates – Guylian Truffles!
An aunt got me a box of ferrero rochers, some jewelry and a watch
Another aunt got me some lotions, and this beautiful eyeshadow make up kit!
Another aunt got me this beautiful Jenifer Lopez necklace with an even more beautiful jewelry box
And two of my grandmas gave me cash, and a LOT of it!
My aunt and uncle got me an awesome new camera as well!

Now I’m anxiously waiting for my party – 30 of my closest friends, and me, at another amazing Italian restaurant for dinner

SideNote:
I will reply to comments soon – I have the SAT’s this weekend, and need to STUDY!
Also, PLEASE TAKE PART IN THE ENCHANTATHON!!!

I thought I would post up a list of all my homework, so that you know I’m not just slacking behind or something As I finish each homework assignment, or whatever it is, I’ll add a x into the box. Once I’m done with the majority of the list, I’ll try and add up some content for you all! I have a bunch of graphics I’ve made, I just need to restructure the navigation system at the top before I can add them in.

[x] Math Portfolio
[x] Rewrite TOK essay – decided my grades good enough, not gonna do it
[x] French Movie Review
[x] French Worksheet
[ ] Econ Diamond Write up
[ ] Study for Econ Test
[x] Study for Bio Quiz
[x] Read Othello and work on World Lit II Paper
[x] Comp Sci Homework
[ ] Extended Essay ( 4000 words…)
[ ] College Essays and Apps
[x] Write up on how I run one of the clubs that I’m in charge of

On another note, I’d like to say thank-you to everyone who commented on my last post! I’m going to return comments as soon as I’m done with the massive list above!
If any of you are interested in helping out, or starting a fundraiser in your school and donating the money towards a specific cause, such as buying mosquito nets or soccer/football balls for children, please get in touch with me! In one of my clubs, we’re trying to get something like this set up, where people who would like to help the children in Kenya can! – you don’t have to, and please don’t feel obligated to do it! It’s just another one of my side projects

Today, Sunday, I went for a feeding program that feeds around 2000 children every single Sunday. The people who started the program have been doing it every single sunday, without fail, for the last 28 years. They get a lot of donations these days, but when they first started it, all the money came out of their hard earned cash. I’ve been to this place around once a month if I can, and every time I am saddened by how many children don’t get food, and rely on what we give them to last a week. As I said, there are around 2000 children that come every Sunday to get food. We’ve built a small shelter with benches going around the sides, and a table in the middle. On the table we lay out around 500 loaves of bread, stacking them up so that they are actually taller than me, and on the benches we lay out things like milk, cookies, candy, bananas and anything else that they can afford for the week. These 2000 children come from a slum nearby, and you often see a young girl of around 12 carrying a baby on her back, and holding the hand of another child around 3 – their parents can’t even support them. When they’re walking in, the line just doesn’t stop. They come in groups of around 20 so that we can control them, and after the first 50 groups go through, you think it’s nearly done, but it isn’t. There are more and more children who keep running down the road and lining up.

There is never enough food. The milk usually runs out, as they can only get about 600 packets, the biscuits and sweets run out as well. One of the scariest moments in my life was at this place, where all the food had run out except for five slices of bread – which I was holding, and there were ten people who hadn’t gotten any food. They all ran and started pushing and shoving to try and get the slices of bread. I was rammed into the table, and was so scared that I just let go of the bread. The worst thing is that they have to fight in order to get five slices of bread, while we easily eat more than that everyday! I’m not saying our lifestyles are wrong or anything, but living in Kenya, I am faced with things like this happening everyday all around me.

Because of all the pain and suffering I see around me, I am in two very big and very active clubs in our school [i'm actually president, and chair of them], and their main goals are fundraising and setting up sustainable projects for people who need help. Some of my current projects are this feeding program, another feeding program where we feed 200 children who have aids, a “save the schools” project, where we find a local school that needs to be fixed up – they need desks, paint, paper, or even pens. I also support a famine relief project, and a girls orphanage. I really wish I could do more.

Since I was five, every year on my birthday we would go to this children’s orphanage with a cake, lots of gifts for the children, toys, clothes, and a huge money donation, and spend the day playing with the children. I think those are the best birthday gifts I’ve ever gotten – seeing the beautiful smiles on all the children’s faces around me. The cutest thing is that they would then get together around my cake, and sing happy birthday for me. A little girl even drew a picture of me, and gave it to me as a gift. I have it hung up on my wall, as a constant reminder of the happiness and joy they felt, and I felt on my birthday.

So here’s a question for you, did you lend a hand today? Or any other day?

Here are some photos of the place I went to today, click on them to see the actual photos.