It is an open-source software distributed under the GPL (“GNU General Public License”) and is maintained and developed by a community of thousands of users and developers.

Drupal was originally written by Dries Buytaert, who still heads the Drupal project. Buytaert transliterated the Dutch word ‘druppel’, which means ‘droplet‘ to create the name ‘Drupal,’ in order to make an indirect reference to the community aspects of the project through the Dutch word ‘dorp’ , meaning ‘village’. He opened the source code for community work in 2001.

Tens of thousands of people and organizations are using Drupal to power scores of different web sites, including

• Community web portals
• Discussion sites
• Corporate web sites
• Intranet applications
• Personal web sites or blogs
• Aficionado sites
• E-commerce applications
• Resource directories
• Social Networking sites

While some web designers have criticized Drupal as difficult to learn, the system has received extensive accolades for its usefulness and relatively rapid build time. The modular approach of Drupal and its ability to enhance the core functionality by use of hooks is a marvel of software engineering.

Drupal provides a flexible way to create custom look and feel of website by use of themes. Drupal theme essentially consists of atleast one template file, a style file for custom appearance & a theme file for overriding Drupal themeable functions. Drupal 5 comes with 4 default themes.

Where are Drupal themes located

Drupal default themes are contained in themes folder in the root installation of Drupal. Apart from themes, the folder contains theme engines available to the installation.

Another location for the themes is inside sites folder. Due to Drupal’s multi-site support, we have have individual themes available for the sites installed in the installation. Those themes need to be put under their respective sites to make them available. Sounds too boring! Let me come to point.

The recommended custom theme location in Drupal is under sites/all/themes/ folder.

Drupal Theme Administration

You need to have proper permissions to change the theme of your Drupal site. To change the default drupal theme, login to the site and then go to Theme Administration found under Site Building – Themes. The default url for the theme administration is /admin/build/themes.

By default, the garland theme is selected. The folder name of each theme represents its name on the administration page (Configurable name and description available in Drupal 6). You can change the theme by simply clicking the radio box of that theme found under default column. Saving the changes will result in applying of new theme to the site.

You can make configuration changes to the theme by clicking on the configure button found on that row. A list of default configuration options will be displayed where we can do the necessary. You can toggle the display of various page elements like search box, site name, logo, site slogan, shortcut icon, user pictures etc from this page. You can add your custom options also for the theme like in case of color picker for default garland theme.

How theme works

Drupal theme essentially consists of two files; a template file (page.tpl.php in case of phpTemplate) and a CSS file for presentation. A template file is a mix of HTML or XHTML markup alongwith the templating language specific code. Drupal by default supports PHPTemplate as the templating language through use of PHPTemplate theme engine. Theme engines control how certain themes interact with Drupal. In addition to PHPTemplate, Drupal has support for many other popular templating engines through installation of their theme engines. A theme engine makes many variables avaialable to template files and processes these template pages to render output.

In the next post of this series, I will be writing about ‘How to develop Drupal 5 theme’.

Getting into Wordpress Theme

Before starting the actual development of the theme, we need to understand how Wordpress actually works and how the content is presented to the users. Well, the short answer is that the content in Wordpress is served by themes to the users. Themes in Wordpress is a combination of CSS and PHP files that reside inside a particular directory at a particular place. The ‘particular directory’ meant for storing of theme related stuff is named with the name of theme and this will be the public identity of your theme. The theme directory resides in wp-content/themes/ directory. Actually, all the Wordpress themes reside under the same directory.

Structure of Wordpress Theme

The Wordpress theme mainly consists of four regions viz, header, footer, content & sidebar. You can theme every region with an independent theme file. Wordpress theme essentially consists of two files, one for CSS named style.css and another for content named index.php. We can run our theme with these two files only and later on add more files to fine tune the theme.

Get Started

Let’s start actual theme development. With your favourite text editor or PHP editor, create a blank CSS file inside your theme folder, let’s say cool-theme, and name it as style.css. Put a few lines of comments at the top like this.

/*Theme Name: cool-theme
Theme URI: http://www.yoursitename.com
Description: My theme is a cool and beautiful theme
Version: 1.0.0
Author: Ehsan Quddusi
Author URI: http://www.authorsitename.com
*/


Well this is the standard comment style for Wordpress CSS file. Actually this information is read by Wordpress to display it in the theme list alongwith the provided thumbnail. You can see the theme list in admin menu of Wordpress under Presentation heading. All the lines in the above comment are self explanatory and you can well understand what they mean. Now that our CSS file is created with the initial theme information in the form of comment, it is time to create the PHP file to display content on the page. Again using any text editor, let’s create a PHP file named index.php
Now let’s put some code into it, to display all the posts available there.

<!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>
<title> My Wordpress Theme</title>
</head>
<body>
<?php if (have_posts()) {
while (have_posts()) {
the_post();
the_title();
echo '<br/>';
}
}?>
</body>
</html>


Wow! you are done. With just a few lines of code, you are able to fetch all the Wordpress Post titles from the database. Let’s have a look on the above code. HTML code is same as you will be using for normal web development. Now let’s have a look on PHP code wrapped inside <?php and ?>. Here we are using a condition to verify the output and if available loop through it and display contents. Oh! I know you will be feeling boring. Ok let’s quickly move next. Actually here we are using an in-built function of Wordpress, have_posts(), to fetch the contents of the post. The above function first checks for the posts and if available loops through them to fetch content the content of each of them and display their title using the_title().

It is interesting to note that we displayed titles of all the posts with just few lines of code. Let’s have some fun now. Every post in Wordpress has an ID associated with it and we will provide a link to each title to display its content. Let’s modify the above written PHP code like this.

<?php
if (have_posts()){
while (have_posts()) {
the_post(); ?>
<a href="<?php the_permalink();?>"><?php the_title();?></a><br/>
<?php if(!is_home()) {
print '<p>';
the_content();
print '</p>';
}
}
}
?>


And here it is. Magic! as you can see. Again by adding 4 lines of code, we are able to provide a link to each post title to show its contents on an independent page. This is the beauty of Wordpress. Minimising as much code as possible and maximising productivity.

We will now update our code again to display category with each post as well as date of posting and author.

<?php
if (have_posts()){
while (have_posts()) {
the_post(); ?>
<a href="<?php the_permalink();?>"><?php the_title();?></a><br/>
Posted under <strong><?php the_category(',');?></strong> at <strong><?php the_time('F jS, Y');?></strong> by <strong><?php the_author();?></strong><hr/>
<?php if(!is_home()) {
print '<p>';
the_content();
print '</p>';
}
}
}
?>


And we are done. By putting a single line of code, we have been able to derieve post category, post date & post title for each post. Wordpress API provides all the theme related functions to minimize custom coding. As you can see we used three function in the above written one line. the_category() function is responsible for deriving categories of each post separated by supplied argument ‘,’. We can pass many optional arguments to the the_catgory() function to exclude some categories or provide post counts etc. Another function used is the_time(‘F jS, Y’), meant for displaying date of the post while as the_author displays the link for the author alongwith his/her name. This ends the basic tutorial on Wordpress theming.

One thing to note is that Wordpress allows splitting of code into multiple files for the sake of manageability and granular control over design. Till now we have used only one file in our theme. In the next tutorial we will be using multiple files for theming to achieve granular control along with doing some designing using CSS.