birghtyoursite » 2 columns layout

Your first normal wordpress template

admin — Mon, 11 Jan 2010 15:28:49 +0000

Introduce

Now,let’s make all together (w3c valid 2 columns xhtml ,ul li css none-js SEO friendly sub-menu),we get a full wordpress home page html template–Click HERE to view.It looks nice simple & usefull, right ？let’s start to convert it to wordpress theme.

First,We should know some basic wordpress theme Knowledge:
What’s a basic theme include ?

css style (required,style.css,style the page also put your personal info. like theme name , author …)
index.php (required,WordPress Theme start with this file if without the home.php)
a screenshot (optionally,screenshot.png)
single.php (optionally,this file to generate the structure for a single post,if no such a file the wordpress will use index.php to generate the structure )
page.php (optionally,this file to generate the structure for a single page,similar as single.php)

so we know a very minimum wordpress theme should include (index.php,style.css) .but usually in order to keep the site in a more good structure and can maxmum reuse , flexible .The page’s structure is separated to
several parts:

header.php
sidebar.php
footer.php
comments.php
comments-popup.php

reference those in the template php file is very easy.For instance,header.php :

 get_headerer(); ?>

the comment, use the comments_template() template tag.
the sidebar, use the get_sidebar() template tag.
the footer, use the get_footer() template tag.

Also can use

include(TEMPLATEPATH . '/script.php');

to reference any php file in the template folder.

Start coding wordpress theme now

First ,we need declare the theme in style.css .For instance

/*
Theme Name: red theme
Theme URI: http://www.brightyoursite.com/blog/2010/01/11/your-first-normal-wordpress-template/
Description:Your first wordpress theme
Version: 1.6
Author: alex 
Author URI:  http://www.brightyoursite.com
Tags: red, fixed width, two columns, widgets 
*/

you can see the define theme name , url version aurhor …. there .
Next , do the page segmentation and create the header.php , footer.php , sidebar.php and index.php .
to make it easier we can copy the those files from the wordpress default theme . we just need copy our html codes and do some adjustment. for instace change the menu to wordpress page list ：

  
  
  wp_list_pages("title_li=&depth=2"); ?>

the main posts loop:

 if (have_posts()) : ?> 
   while (have_posts()) : the_post(); ?>
         post_class() ?> id="post- the_ID(); ?>">
        class="item_head">
        class="item_header_text">> href="" rel="bookmark" title="Permanent Link to  the_title_attribute(); ?>"> the_title(); ?>>					
	 > 
	  class="item_description"> the_content('Read the rest of this entry »'); ?>>
          class="tags" > the_tags('Tags: ', ', ', '
');  ?> >  
	 > 
	  endwhile; ?> 
	  class="navigation">
		  class="alignleft"> next_posts_link('« Older Entries') ?>>
		  class="alignright"> previous_posts_link('Newer Entries »') ?>>
	 > 
	   else : ?>
		 class="center">Not Found>
		 class="center">Sorry, but you are looking for something that isn't here.>
		 get_search_form(); ?> 
          endif; ?>

Online demo and free wordpress theme download

Preview red theme (1773)

Download there

How to code a w3c valid 2 columns xhtml layout–step 2

admin — Fri, 11 Dec 2009 15:39:39 +0000

In the first part,we aready done the 2 columns layout frame.
Let’s go on, add elements to each sections also style it and finish the html template.

First the header , usually the header include the blog name and description sometimes maybe have a login box or search box . ok , let’s add it .

    id="header"> 
       id="headtxt">
       id="blogname">  id="A1" href='http://www.brightyoursite.com'> Bright Your Site >> 
       id="blogdesc">Professional Css Xhtml business -- w3c valid css xhtml 2 columns layout >  
      >
       id="searchbox"> class="inputbox"  />   id="gobtn"  type="button" />> 
  >

Check the codes,you can see we add blog name ,blog description and a search box.the blog name is the most important,that’s why i use h1 tag (for SEO optimise) so dose blog description.Usually,the blog name , description should be the left and the search box right.ok,let’s see how it be styled in the css .

/*-- begin header --*/
#header
{
  height:100px;
}
 
#headtxt
{
	float:left;
}
#blogname
{
   padding:0px; 
   margin:20px 0px 0px 15px; 
}
#blogname a
{
	text-decoration:none;
	color:#d4242b;
	font-size:28px;
}
#blogdesc
{
	font-size:14px;
	color:#333;
	margin:15px 0px 0px 15px; 
}
#searchbox
{
	float:right; 
	padding:0px;
	vertical-align:middle;
	margin:30px  5px 0px 0px;
	height:30px;
	line-height:30px;
	border:solid 1px #900;
 
} 
.inputbox
{
	width:150px;
	border:0px;
	height:20px;
	padding:5px 0px;
	float:left;
	margin:0px 0px 0px 2px;
	font-size:13px;
	font-size:16px;
	color:#000;
 
}
#gobtn
{
    background:url(images/go.png)  no-repeat;
    border:0px;
     width:47px;
     height:30px;
     overflow:hidden;
}
/*-- end of header --*/

The most important part is the Main Content, in this section we will list all articles here .
it’s simple and easy to code .Let’s see the html codes:

  class="item_head">
     class="item_header_text">> href=''>title here>>>	
 >
  class="item_description">
   content here
   class="tags" >Tags:> tags here>>
   class="author">Gepost door >admin> in: >tags here> >
 >

the post title is the essence of the post , so we need h1 tag it ( you know why , check the header section ) . for the content we just need need add space , font-size , color … . Of course , we also can add post date , tags , author … in the list . the style codes :

/*-- begin main content -- */ 
#maincontent
{
   width:580px; 
   float:left; 
   margin-left:20px;
}
.item_head
{
	border-bottom:solid 1px #8d0b03;
	height:33px;
    margin-top:20px;
}
.item_header_text
{  
font-size:12px;
font-weight:bold;
line-height:36px; 
display:inline-block;
float:left;
background:url(images/tlbg.png) repeat-x; 
}
.item_header_text a
{
  padding:0px 10px;  
  display:inline-block;
  background:url(images/tacorner.png) no-repeat right top;
  font-size:14px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
}
.item_header_text h1
{ 
  display:inline-block;
  background:url(images/tbefore.png) no-repeat  left top;
  padding:0px;
  margin:0px;
}
.item_description
{
	color:#333333;
	line-height:18px;
}
.item_description p
{
	margin:5px 0px 10px 0px;
	padding:0px;
}
.tags ,.author
{
	color:#696969;	 
	 line-height:16px; 
}
.author
{
   height:25px;
}
.tags span ,.author span
{
	color:#9a1209;	
}
.tags  a,.author span a
{
	 color:#9a1209;	
	 text-decoration:none;
}
/*-- end of main content --*/

The right content aways are Archives , Categories , Blogroll …. .We can do it just use ul li list .

>
    >
     >Links>
     >
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     >
  >
  >
     >Links>
     >
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     >
  >
  >
   >Tags>
   >Ajax> >Cat> >Wordpress> >Template>
  >
  >

The css is also simple

/*-- begin right content --*/
#rightcontent
{
   width:240px;
   float:right; 
   margin-right:10px;
}
#rightcontent ul
{ 
	padding:0px;
	margin:0px;	
	color:#000;	 
	margin-top:10px;
}
 
#rightcontent ul h2
{ 
	 margin:0px;
	 padding:0px;
}
#rightcontent  li 
{
    height:auto;
	line-height:25px;
 
}
 
li
{
  list-style :none;   
}
a
{
    text-decoration:none;
}
#rightcontent  li ul li
{  
	background:url(images/arrow.png) no-repeat left 5px;   
	padding:0px 0px 0px 13px;
	list-style:none;
	line-height:18px;
}
#rightcontent  ul li img
{
	vertical-align:middle;
}
#rightcontent ul  li h2
{
	margin:0px 0px 5px 0px;
	padding:0px;
	font-size:14px;
	line-height:30px;
	background:url(images/dot.jpg)  repeat-x left bottom;
 
}
#rightcontent  ul li a
{
	 color:#9a1209;	
	 font-size:12px;
	 text-decoration:none;
	 line-height:20px;
	 font-weight:600;
	 font-weight:normal;
	 vertical-align:middle;
}
/*-- end of right content --*/

At last , add some links and copyright to the footer to finish it.

 id="footer">
     href='/'>Home> |   href='/'>Portfolio> |  href='/'>Services> |  href='/'>Projects> |  href='/'>Articles> |  href='/'>About> |  href='/'>Contact>
    > © 2009 www.brightyoursite.com All Rights Reserved.>
  >

/*-- begin footer --*/
#footer
{
   height:82px; 
   clear:both;
   text-align:center;
   background:url(images/footer_bg.png) repeat-x;
   line-height:35px;
   vertical-align:middle;
   font-weight:bold;
   color:#E9E9E9;  
   margin-top:20px;
}
#footer a
{ 
   color:#E9E9E9;   
   text-decoration:none; 
   display:inline-block;
    margin:0px 5px;
}
#footer h1
{ 
   font-size:12px;
   font-weight:lighter;
   padding:0px;
   margin:0px;
}
/*-- end of footer --*/

Up to now,we add most of the elements.let’s see the final result click here .

Now, you may notice there is important part missed.The Menu. This is also important to a site .there is tons of menus . So next lession we will introduce the ul li css seo fridenly menu . Click here to go directly:

The simple ul li css SEO friendly horizontal menu

And

ul li css none-js SEO friendly sub-menu

How to code a w3c valid 2 columns xhtml layout–step 1

admin — Fri, 20 Nov 2009 15:23:25 +0000

First,let’s have a overview of the 2 columns xhtml layout.There are five sections : Header (include Logo,Blog Name,Blog Description …),Top Dropdown Menu,Main Content,
Right Content and Footer

Let’s make this template:

fixed-width:875px
Tableless, W3C-compliant xhtml1-transitional(also can be xhtml1-strict)
Cross Browsers and tested in all browers, such as IE6,IE7, IE8,Firefox 2,3 , Google chrome, opera and Safari.

Ok,Lets start right now:


 xmlns="http://www.w3.org/1999/xhtml" >
>
    >2 columns xhtml layout frame>
     href="frame.css" rel="stylesheet" type="text/css" />
>
>
 id="wrapper">
   id="header">>
   id="menus">>
   id="maincontent">>
   id="rightcontent">>
   id="footer">>
> 
>
>

Check the above the html code.the first line we define DTD xhtml1-transitional ，and then in the head add a Extenal css frame.css.In the body we defined the five sections in a container wrapper.now lets see whats in the frame.css

body
{
  margin:0px;
  padding:0px;
}
#wrapper
{
  width:875px;
  margin:auto;
  overflow:hidden;
}
#header
{
  height:100px;
}
#menus
{
  height:37px;
}
#maincontent
{
   width:600px; 
   float:left; 
}
#rightcontent
{
   width:250px;
   float:right;
 }
#footer
{
   height:82px; 
   clear:both;
}
 
/* --- the codes below just help you to see the frame,those code will be delete and the end --*/
 
 
#header
{
  background:#f80;
}
#menus
{
  background:blue;
}
#maincontent
{
  background:green;
  height:500px;
}
#rightcontent
{
  background:#f90;
  height:500px;
}
#footer
{
  background:#666;
}

In order to see the each section i add background color and height. click here to see the result.You may notice there is a blank space between the maincontent and the rightcontent.Yes,Usually there is a space between the main content and the right content,u can change the main content width to change the space.

whats next we need to do? its just a frame and can’t use to as a template,lets go ahead,add some decorations to each element.look the following codes,we will add some background image ,border color etc ..

body
{
  margin:0px;
  padding:0px;
  background:url(images/pagebg.gif) repeat-x;
}
#wrapper
{
  width:861px;
  margin:auto;
  overflow:hidden;
  padding:0px 7px;
  background:url(images/wrapperbg.png) repeat-y;
}
#header
{
  height:100px;
}
#menus
{
  height:37px;
  background:url(images/menu_bg.png) repeat-x;
}
#maincontent
{
   width:600px; 
   float:left; 
}
#rightcontent
{
   width:250px;
   float:right; 
}
#footer
{
   height:82px; 
   clear:both;
   background:url(images/footer_bg.png) repeat-x;
}
 
/* --- the codes below just help you to see the frame,those code will be delete and the end --*/
 
#maincontent
{ 
  height:500px;
}
#rightcontent
{ 
  height:500px;
  border-left:solid 1px #ddd;
}

click here to check the result . good , like magic , it looks better now . if you look at the css carefully,you may find a the wrapper “width:861px;” its not 875 px.thats beacuse add 7px padding left and right to wrapper , it’s 7px + 7px + 861px = 875px .

Finally , we will convert this template to wordpress theme . Frame aready done , what’s next we need to do now . Of course add elements to each sections . Go on How to code a w3c valid 2 columns xhtml layout–step 2 , it’s nearly done !!!