Developing WordPress theme - Part 2 - Designing a Proper Template
I'm continuing this post from my Last article, So, if you feel anonymity while reading then please read this article.
In this tutorial, we will design a template/theme that we will integrate with WordPress in our Next Chapter of this tutorial. I will write 'Markup and designing' language of Page while keeping in mind that you all are familiar with basics of HTML and CSS already.
So, As I always say, I'll not waste your precious time and let come directly to Tutorial. Here is the guide you need to follow.
Every good website on Internet have some common elements that cannot be ignored by any designer except in personal Web designs and those are
- Header,
- Footer,
- Sidebars - Both (Left and Right) or Anyone,
- Content Area,
- Navigation Menu and,
- Grid based Template - I mean approx. width of any website should be maximum 960PX (Fixed - On which we are going to focus) or dynamic (Which changes as according to different resolutions on different computers or laptops).
Let, first Write our Markup Language (HTML) as according to basic Needs. See the code below and Paste it in 'index.php', 'home.php', 'page.php', 'single.php' and other related files and if you're a advanced designer, you can do this in much better way via single file .
<html> <head> <title>My Own Template</title> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="Container"> <div id="Header"> <div id="Logo"> </div> <div id="Other_Header_Content"> </div> </div> <div id="Middle_Area"> <div id="Content_Area"> </div> <div id="Right_Sidebar"> </div> </div> <div id="Footer"> </div> </div> </body> </html>
Now, that was the Basic Markup which we needed for developing our basic WordPress theme. Now, I'm going to write Some css code, which will give proper shape and adjustments to our Layout. See the css code below and paste it in 'style.css' file.
body { margin: 0px; } #Container { width: 960px; margin: 0 auto; background-color: silver; } #Header { width: 960px; background-color: gray; margin-bottom: 5px; } #Middle_Area { width: 960px; background-color: gray; margin: 5px 0px; } #Content_Area { width: 596px; margin: 0px 2px; background-color: black; } #Right_Sidebar { width: 356px; margin: 0px 2px; background-color: black; } #Footer { width: 960px; background-color: gray; margin-top: 5px; }
Rate this Article ?
And that's all, Our basic WordPress template is ready to integrate with WordPress. Now, all that we want to do is to think a little bit and paste php code in appropriate areas to make it functional and we'll do that in our Next chapter (Article or Tutorial). I know, You never Imagined this to be so easy but I want to say One line i.e.