Tutorial : Making Wordpress Theme by examples #1

Tutorial : Making Wordpress Theme by examples #1

First Step :

You should to have Webmaster editing tool (I use Dreamweaver)
You should to have Graphcis editing tool (I use Adobe Photoshop)
Important here, you should to have local webserver for a testing mode. (I use Xampp) Download and install Xampp now.

Second Steps :

Draw your Wordpress theme layout. (Single column or 2 column or 3 column or 4 column)
Choose color (blue?, black?, white?, orange? etc)
Ok? done? now we go to the next steps. (I picked 3 column theme) Here is my layout.

Open your Dreamweaver and create new HTML file and it should be like this.

<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
Now create your layout.

<div id=”wrapper”>

<div id=”header”>My Header</div>

<div id=”navigation”>My Menu</div>

<div id=”main”>

<div id=”content”>
<div class=”entry”>My Entry</div>
</div>

<div id=”sidebar”>
<div id=”leftsidebar”>My Left Sidebar</div>…

You Might Also Like...

  • CSS Tutorials

    Understanding Floats in CSS – Making a 3-column layout

    403 readersSharing knowledge is cool and if your audience is willing to learn – its Uber cool! With that note, here is my little contribution towards the code monkeys. This article is meant for the people who are beginners or are in the mid-way of learning CSS (Cascading Style Sheets). When I started learning CSS, the

  • Animated background image with jQuery

    566 readersIf you're used to work with the jQuery library, there's no doubt that you know how powerful it is. In this tutorial, we are going to create a basic web page layout which includes a super cool animated background image, using jQuery.Have you checked out the highly recommended Digging into WordPress book by Chris Coyier

  • Don’t Ignore Your WordPress Footer

    314 readers

  • Duotive ONE General Purpose Wordpress Theme (Blog / Magazine)

    794 readersFeatures Duotive one is a general purpose theme, for business, portfolio, magazine and blogs. General Features Cufon font replacement Front page content slider Mobile sidebar Widgetized sidebar ( 12 areas ) and footer ( 3 areas ) Prett...

  • maintenance-mode-backend

    Join To Design A Graphic For The New Maintenance Mode Plugin

    20 readersThe Maintenance Mode Plugin "!Wartungsmodus" is a very often used Plugin but I hardly changed it for a long time. But not long ago David Hellmann came up with a wonderful design proposal and I created the Plugin completely new with different options. From now on you can pick the design for the maintenance page.

  • Top Ten Inverted

    WordPress Theme Releases for 06/22

    845 readersTwenty Ten Inverted 2 column theme for WordPress 3.0 which has inverted colours of Top Ten Twenty Ten Blogging Inside Edition Twenty Ten Blogging Inside Edition WordPress 3.0 Theme is based on the new WordPress 3.0 default Theme with a few modifications. The Sidebar is optimized for Adsense 236px Ads. Changed sidebar with a different

  • How to rename widgetized sidebars in WordPress

    424 readersYou can manage multiple sidebar widgets in WordPress. To do so, you go to the Widgets page in the Admin, and select the Sidebar you want to manage. If you have 1 widgetized sidebar, the name “Sidebar 1″ is not a big deal for managing it. But what if you have 5 or more, and

  • Calotropis

    548 readersWP theme with selectable layout, right or left or holy grail or no sidebar, magazine style or traditional style, and many more options as if it's premium theme. Custom header and body background. Tabbed column widget included.

  • ;)

    Fancy Jquery 404 Error Popup (404 Pages)

    468 readersThis is a JQUERY script that is simple, unobtrusive, no need extra markup and is used to display 404 error in fancy popup box on the current page instead of redirecting to 404 page. Features: 7 Color Variations PSD Included Valid xHTML 1.0...

  • How to create a built-in contact form for your WordPress theme

    2432 readersMany WordPress plugins can add a contact form to your blog, but a plugin is not necessary. In this tutorial, I'm going to show you how you can create a built-in contact form for your WordPress theme.Like CatsWhoCode? If yes, don't hesitate to check my other blog CatsWhoBlog: It's all about blogging!How to create a