Home > php, Web, wordpress > Word Press Theme Creation : part 1.

Word Press Theme Creation : part 1.

Word Press Theme Design Tutorial:

Theme designing for word press is very easy but technical. The designer/developer who ever designed a web application could easily do it.

Let learn word press:

Common Web Application Parts:

There are few common parts for any web page designed/developed.

1.  Header

2.  Body

3. Footer

Header:

Header mainly contains top part that mostly contains images, company information and navigations etc.

Header:

footer is bottom of the page that mostly contains   navigations and copyright information etc.

Body:

All the content between the header and footer are called body. Mainly this is the main content area.

This part may be single, two or three column, depending upon the design to be displayed. I will discuss two column body parts in this tutorial.


Word Press page division:

Word press also follows the above mentioned division. It include all these parts but it totally depend upon the programmer/designer , how they used these parts.

Lets discuss very simple architecture for word press.

 

Wordpress Simple Page Division

Wordpress Simple Page Division


Let me show you the sample page for the tutorial that we are going to build.

 

vahzayindexpage

Now if let see this page in parts .

Header:

header

 

Footer :

footer

Body :

body

Now let us see the default template modified code

< div id=”header”>

< div id=”headerBanner”>

< div id=”headerimg1″>< /div>

< div id=”headerimg2″>

< div class=”h1″><a href=”<? php echo get_option(‘home’); ?>/”><? php bloginfo(‘name’); ?></a>< /div>

< div class=”description”><? php bloginfo(‘description’); ?>< /div>

< div id=”headerimg3″>< /div>

< /div>

< div id=”headerimg4″>

< div id=”headerimg5″>< /div>

< div id=”headerimg6″>< /div>

< /div>

< /div>

< div id=”headerFlash”>

< div align=”center”>< /div>

< div align=”left”>

< object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0&#8243; width=”800″ height=”162″ title=”header”>

< param name=”movie” value=”<? php bloginfo ( ‘stylesheet_directory’);? >/images/home.swf”>

< param name=”quality” value=”high”>

< embed src=”<? php bloginfo ( ‘stylesheet_directory’);?>/images/home.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer&#8221; type=”application/x-shockwave-flash” width=”800″ height=”162″>< /embed>

< SCRIPT LANGUAGE=”JavaScript” src=”<? php bloginfo ( ‘stylesheet_directory’);? >/images/fixit.js”>< /script>

< /object>

< /div>

< /div>

< /div>

< hr />

Now let me show you the CSS modification which I have done in default CSS.

/*——————————–*/

#headerBanner {

padding: 0px ;

width: 951px;

height: 143px;

margin: 0px 0px 0;

}

#headerimg1{

float: left;

clear: none;

margin-right: 0px;

width:139px;

height:143px;

background:   url(‘./images/index_01.gif’) bottom center repeat-x;

}

#headerimg2     {

float: left;

clear: none;

margin-right: 0px;

width:484px;

height:143px;

background: #FFFFFF;

}

#headerimg2 .h1 {

font-size: 3.0em;

text-align: center;

margin: 10px 0px 0;

}

#headerimg2 .description {

font-size: 1.2em;

text-align: center;

margin: 3px 0px 0;

}

#headerimg3     {

float: left;

clear: none;

margin-right: 0px;

width:484px;

height:80px;

background:  url(‘./images/index_08.gif’) bottom  center repeat-x;

}

#headerimg4     {

float:left;

clear:none;

width:177px;

height:143px;

vertical-align:bottom;

background:bottom #FFFFFF;

}

#headerimg5     {

float: left;

clear: none;

margin: 0 0px 0px 0px;

width:177px;

height:48px;

background:  url(‘./images/index_06.gif’) bottom right no-repeat  ;

}

#headerimg6     {

float: left;

clear: none;

margin: 0 0px 0px 0px;

width:177px;

height:95px;

vertical-align: bottom;

background: bottom no-repeat  url(‘./images/index_07.gif’)    ;

}

#headerFlash{

padding: 0px ;

width: 951px;

height: 143px;

margin: 0px 0px 0;

}

/*——————————–*/

WordPress Simple Page Division
Advertisements
  1. December 14, 2009 at 9:55 pm

    Awesome Blog thank you. After the Design and Development of the website comes SEO. If you would like to share a software that helps with off site seo reporting check out http://www.mofikiworldwide.com/mofikis_seo_analyzer.php and thank you for this blog.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: