How to create WordPress template part 2

Now is the part 2. If you haven’t read the part 1 yet, go here to read it. If in the part 1 we have make the graphics we need to build the template, now it is the time to play with CSS and HTML. But first, before we going further, we must first understand the WordPress template hirearchy. The WordPress template, in the very minimum, need at least two files, style.css and index.php. We can however have more files that recognized by WordPress to deliver different look on different requested page. But now, we create the standar template, at least we have header.php, footer.php, sidebar.php, index.php, comments.php, functions.php and style.css.

How to create WordPress template part 1

Do you want to create your own WordPress template? It is not hard actually if you have enough knowledge of XHTML (or HTML) and CSS, and a little basic of PHP. This guide will split into multiple part as it is quite long. This is my way of creating WordPress template, so it might different than you. The first part is for preparation and designing, I haven’t touch the coding part yet, it will be on second part. I will make it with example and this example will be available to download for everyone later. Hehe… 🙂

First is the preparation. For me, I will take a paper and a pen and start thinking of how the template will look like. Hmm… As of now, I will create a simple templates like usual blog template. One header with logo and description on top, one sidebar on left side, the content is on the center (right side from the sidebar), and one footer on bottom. That’s it. Okay, once you are ready then, let’s open your favorite graphics editor. For me, it is GIMP.

A little guide of using jQuery

JQuery is Javascript library that can help you write code smaller and easier to take a good care of event handling, animating, AJAX and more. With jQuery, we can make our webpages more beautiful. You can see that I used it for my side menu here. 🙂

This article didn’t intend to teach you how to became the jQuery master and I’m far away from a master. It just for the case you didn’t know about jQuery yet and want to start with it, then this will be a good guide for you. If you want a more complete tutorial, go to the jQuery documentation.

Fixing IE bugs and using Jquery

Now, the templates is better, as I use Jquery, I can get the actual window size on Internet Explorer 7+. Also with a little enhancement with Jquery, you can see the animation while showing or hiding the side menu. Also I update the graphics to a little smaller so you can see the content wider.

It still use fixed width, I will solve this later so if you are using wider screen, the head logo and menu will not separated from the main element. 🙂 I’m still testing this templates and will improve it day by day. Damn, I think I really interested on creating WordPress templates now. Maybe I will make a public templates soon.

Better look or valid CSS?

I face a problem right now, to choose between better look or valid CSS. It is not a big thing though, it just a matter of scrollbar you see inside the content area. For now, you can see two scrollbar placed on right and bottom. The bottom scrollbar here is not used at all, it is useless. So it just make the look worse.

Now, to solve this I need to use CSS 3 properties, instead of CSS 2.1, the overflow-y and overflow-x but that will make my blog didn’t valid anymore. The CSS 3, is still under development, but these properties is supported by most modern browser. Also since my blog is specially created for modern browser, it won’t be a problem for me.

Editing skin, more icon in main menu

Do you want to have more icon in your ROKR E2 menu instead of the basic 3×3 such as 3×4, 4×4 or even more? Then, editing the skins configuration files (the ini extention files) will be the best way. It’s pretty easy, and along with this article, I will show you how I made my 3×3 menu to 3×4 and 4×4.

To edit this files, you only need a text editor. Now, we will edit the common.ini and mainmenu.ini only. Here is how it looks before editing:

Testing the new templates

Here I create my first and only templates for WordPress, the result is as you can see on your screen. It still buggy I think, so please report me whenever you see something unexpectedly happens while navigating here.

This templates should works fine on Mozilla Firefox 3+ and Google Chrome. Opera 9 shows fine too, but have some margin problem. Internet Explorer didn’t works well, I can’t resize the element height so you will see a scrollbar on your browser window and a scrollbar inside the element. There also an error reported that I didn’t have clue yet.