Drupal is a powerful, customisable and easy to work with open source content management system (CMS). It has a thriving community of users and developers who are constantly improving the software so it supports the latest web technologies. Bravo to those many developers and users that have worked so hard to make Drupal what it is today and what it will be in the future.
One of Drupal’s core principles is collaborative information sharing. So in order to make you part of the community we will take you through the journey of creating a theme from scratch on Drupal 7.
We are going to keep it simple by creating a minimalist theme in order to get you comfortable with the basic concept of building your own.
How to Create a Drupal Theme
What we will be covering in this tutorial:
- Basic setup of the files and folders of a custom theme
- Creating a mock-up in an image editor
- Building and styling the theme
- Creating a slider
- Header
- Footer
- About us page, blog and contact form
- Adding social sharing buttons
Assumptions:
- A development environment has been set up with Drupal 7 installed. This tutorial uses a fresh install of Drupal.
- Basic HTML and CSS knowledge.
- You know how to install and enable a contributed module.
Folder structure
To begin with, let’s get our folder structure setup first. Every theme needs a name. We will be calling this theme “Scratch”.
First, setup your new theme folder as shown below:
- Create a folder in /sites/all/themes named – “custom” – then open the folder
- Create a folder in /sites/all/themes/custom named – “scratch” – then open that folder
- Now create two files named:
- scratch.info
- template.php
- Create three folders in
/sites/all/themes/custom/scratch
– naming them: - CSS
- images
- templates
- Open the CSS folder and create a file named
style.CSS
and go back to the scratch folder - Go into the templates folder and create a file named
page.tpl.php
Now you have all the files required to create the theme.
Creating a mock-up
Before we begin any coding we will create a mock-up design with a vector editor program. For this tutorial Inkscape was used as it is free.
Page size was set to 1500px by 5000px just to get some room to work with.
Below are the mock-ups created for the site:
- 2 x slider images
- 1 x Homepage
- 1 x Logo
Configuration file – scratch.info
Now we know what the site should look like we can begin coding. Firstly, go into the scratch.info file. This file has all the information that Drupal needs to know about our theme.
In this file add the following:
name = Scratch description = A custom template from scratch. core = 7.x stylesheets[all][] = CSS/style.CSS regions[user_menu] = User Menu regions[main_menu] = Main Menu regions[content] = Content
Let me explain that line by line:
- The name of the theme.
- Description of the theme.
- Which version of Drupal this theme will work with.
- This line tells Drupal that we have a CSS style sheet and where it’s located in our scratch theme folder. Drupal will automatically include this file on every page a user visits while this theme is set as the default theme.
- Each region is where you can add blocks to your pages. Everything on a Drupal site comes in a block, even the main page content.
Once you have input those details, close the info file and open the page.tpl.php
file located in the templates folder of your scratch theme folder.
Drupal uses a PHPTemplate system that sends variables to the pages that you want to display. For a list of available variables please see Drupal Api. You don’t have to use them all but there are some important ones in there. Take a glance at the descriptions to learn more about what they do.
HTML Skeleton – page.tpl.php
This file is where all of your HTML code will live. We don’t need to mess about with adding the <html>
and <body>
as these are already taken care of by the html.tpl.php
file in the system module. All we need to worry about are the building blocks of the page itself.
Let’s add the absolute minimum to get the page to display data before we add more to it.
Add the following code to the page.tpl.php
file and save it.
<?php print render($page['content']); ?>
Note: You must save this as a .php
file.
Enabling the theme
Now, it’s time to enable the theme. Login as an Administrator and click the Appearance link on the top navigation and click on “Enable and set default” for the Scratch theme.
After saving, make sure you have a browser tab with the administration section open while working on your theme (we do this because the theme is not complete and it won’t have a link to the administration section so keep it open in a separate browser tab). Open up the front page in a new tab. As you can see from the image below there is no front page content to display but we are now ready to begin building out the page.
Take a look at the mock-ups again. We will now build the black bar across the top with the user menu in it.
Add the following code to page.tpl.php
<div class="black-header"> <div class="scratch-user-menu"> <?php if ($logged_in): ?> <?php print render($page['user_menu']); ?> <?php else: ?> <ul> <li class="menu"><a href="<?php base_path(); ?>user/login">Log In</a></li> </ul> <?php endif; ?> </div> </div> <?php print render($page['content']); ?>
Add the following code to style.CSS
body { margin:0px; } /* Black header section */ .black-header { height:50px; background-color:#333; }
The code above has a tiny bit of php logic, specifically an if
and an else
statement which is used to test if the user is logged in in order to show the correct links. The user menu is already setup by default in Drupal and now we need to set the user menu block to show up in that black bar at the top. Taking a glance at the scratch.info
file you will find a line that reads “regions[user_menu] = User Menu”. This is the section we just added to the template and it is where the menu block will go.
In the top navigation bar click Structure > Blocks and set the User Menu block to the User Menu Region and then hit save at the bottom of the page.
Now, refresh the front page to see the changes. The black bar along with the User Menu should now be visible as shown in the image below.
Now, add the following CSS to position the links to the right.
Add the following to style.CSS
/* User Menu */ .black-header h2, .scratch-main-menu h2 { display:none; } .black-header ul, .scratch-main-menu ul { list-style-type:none !important; margin:0; padding:0; padding-top:12px; padding-right:30px; float:right; } .black-header li, .scratch-main-menu li { display:inline; } .scratch-user-menu { width:960px; margin-left:auto; margin-right:auto; } .scratch-user-menu .menu a:link {color:#FFF; text-decoration: none;} .scratch-user-menu .menu a:visited {color:#FFF; text-decoration: none;} .scratch-user-menu .menu a:hover {color:#FFF; text-decoration: underline;} .scratch-user-menu .menu a:active {color:#FFF; text-decoration: none;}
Refresh the page and you should see that the links have now been positioned to the right as shown below.
Adding a logo and Main menu
With that complete let’s begin working on the logo and the main menu, both of which will go in a header section. First save your logo in the image folder /sites/all/themes/custom/scratch/images
of the scratch theme. Now click on Appearance > Settings and uncheck the box that says “Use the default logo” and set the “Path to custom logo” field to sites/all/themes/custom/scratch/images/scratch_logo.png
and hit save.
Now we can add the relevant code to display the logo and main menu.
Add the following to page.tpl.php
<div class="scratch-header clearfix"> <div class="logo-div"> <?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /> </a> <?php endif; ?> </div> <div class="scratch-main-menu"> <?php print render($page['main_menu']); ?> </div> </div>
Add the following to style.CSS
/* header section */ .scratch-header { width:960px; height:100px; margin-left:auto; margin-right:auto; } /* Logo */ .logo-div { float:left; }
After you’ve applied the code, you need to enable the block to show up in the Main Menu section of the site. Remember, we created that section in the scratch.info file.
Refresh the page and you will now be able to see the logo as shown below.
Now we need to add some more CSS to correctly position the logo and main menu.
Add the following code to style.CSS
/* Main Menu */ .scratch-main-menu { float:right; } .scratch-main-menu h2 { display:none; } .scratch-main-menu ul { list-style-type:none !important; margin:0; padding:0; padding-top:40px; padding-right:30px; } .scratch-main-menu li { display:inline; } .scratch-main-menu .menu a:link {color:#4d4d4d; text-decoration: none;} .scratch-main-menu .menu a:visited {color:#4d4d4d; text-decoration: none;} .scratch-main-menu .menu a:hover {color:#4d4d4d; text-decoration: underline;} .scratch-main-menu .menu a:active {color:#4d4d4d; text-decoration: none;}
The header is now complete with the logo and main menu positioned nicely as shown in the image above.
Creating main content section
Now we need to create the main content section which consists of the title and content. The slider will only be for the front page and we will get to that once we have built the template. Here is the code for the main content section.
Add the following code to page.tpl.php
<div class="scratch-content-container-div clearfix"> <?php if ($messages): ?> <div id="messages"> <div class="section clearfix"> <?php print $messages; ?> </div> </div> <?php endif; ?> <?php if ($breadcrumb): ?> <div id="breadcrumb"><?php print $breadcrumb; ?></div> <?php endif; ?> <h1><?php print $title; ?></h1> <?php print render($page['content']); ?> </div>
Add the following code to style.CSS
/* main content */ .scratch-content-container-div { width:960px; margin-left:auto; margin-right:auto; } /* breadcrumb */ #breadcrumb { margin-top:15px; }
Creating The footer
All that’s left to do is create the footer with your copyright details.
Add the following code to page.tpl.php
<div class="scratch-footer"> <hr /> <div class="scratch-footer-text"> © 2013 scratch. All rights reserved. </div> </div>
Add the following code to style.CSS
/* footer */ .scratch-footer { width:960px; margin-left:auto; margin-right:auto; color:#4d4d4d; text-align:center; }
Now we have completed all the code. Pretty easy, right? Below is a copy of all the code that the finished versions of page.tpl.php
and style.CSS
should contain. Make sure you haven’t missed anything out.
File – page.tpl.php
<div class="black-header"> <div class="scratch-user-menu"> <?php if ($logged_in): ?> <?php print render($page['user_menu']); ?> <?php else: ?> <ul> <li class="menu"><a href="<?php base_path(); ?>user/login">Log In</a></li> </ul> <?php endif; ?> </div> </div> <div class="scratch-header clearfix"> <div class="logo-div"> <?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /> </a> <?php endif; ?> </div> <div class="scratch-main-menu"> <?php print render($page['main_menu']); ?> </div> </div> <div class="scratch-content-container-div clearfix"> <?php if ($messages): ?> <div id="messages"> <div class="section clearfix"> <?php print $messages; ?> </div> </div> <?php endif; ?> <?php if ($breadcrumb): ?> <div id="breadcrumb"><?php print $breadcrumb; ?></div> <?php endif; ?> <h1><?php print $title; ?></h1> <?php print render($page['content']); ?> </div> <div class="scratch-footer"> <hr /> <div class="scratch-footer-text"> © 2013 scratch. All rights reserved. </div> </div>
File – style.CSS
body { margin:0px; } /* Black header section */ .black-header { height:50px; background-color:#333; } /* User Menu */ .black-header h2 { display:none; } .black-header ul { list-style-type:none !important; margin:0; padding:0; padding-top:12px; padding-right:30px; float:right; } .black-header li { display:inline; } .scratch-user-menu { width:960px; margin-left:auto; margin-right:auto; } .scratch-user-menu .menu a:link {color:#FFF; text-decoration: none;} .scratch-user-menu .menu a:visited {color:#FFF; text-decoration: none;} .scratch-user-menu .menu a:hover {color:#FFF; text-decoration: underline;} .scratch-user-menu .menu a:active {color:#FFF; text-decoration: none;} /* header section */ .scratch-header { width:960px; height:100px; margin-left:auto; margin-right:auto; } /* Logo */ .logo-div { float:left; } /* Main Menu */ .scratch-main-menu { float:right; } .scratch-main-menu h2 { display:none; } .scratch-main-menu ul { list-style-type:none !important; margin:0; padding:0; padding-top:40px; padding-right:30px; } .scratch-main-menu li { display:inline; } .scratch-main-menu .menu a:link {color:#4d4d4d; text-decoration: none;} .scratch-main-menu .menu a:visited {color:#4d4d4d; text-decoration: none;} .scratch-main-menu .menu a:hover {color:#4d4d4d; text-decoration: underline;} .scratch-main-menu .menu a:active {color:#4d4d4d; text-decoration: none;} /* main content */ .scratch-content-container-div { width:960px; margin-left:auto; margin-right:auto; } /* breadcrumb */ #breadcrumb { margin-top:15px; } /* footer */ .scratch-footer { width:960px; margin-left:auto; margin-right:auto; color:#4d4d4d; text-align:center; }
Setting up the front page
Let’s setup an actual front page for visitors. In the top navigation click Content > Add content > Basic page. Set the title to “Scratch – as if made by” and then paste some dummy text like lorem ipsum and save the page. Make a note of the URL after saving. In my case it’s node/1.
In the top navigation go to Configuration > System > Site information and set “Default front page” to whatever the URL is. I set mine to node/1.
Hit save and go to the front page of the site. You now have a front page like the one shown in the image below.
Adding a slider
We are almost finished with the theme but no site would be complete without a slider so let’s add one. This theme uses a module called Slideshow Creator. Modules are the equivalent to plugins you would find on WordPress. Here is a great tutorial on how to install and enable a contributed module. Install and enable the Slideshow Creator and the jQuery Plugin module which it depends on.
Next, go to Configuration > Content authoring > Text formats > Add text format. Name it “slideshow” and check the “Convert line breaks into HTML” and “Slideshow Creator” checkboxes and then save.
Next we need to copy and paste our two slideshow images to the site.
Create a folder in /sites/default/files
named “slideshow” and then go into that folder and paste the two slideshow images.
Next click on the Content link in the top navigation and edit the front page. Paste the following into the top of the Body and change the Text format to slideshow and then save it.
[slideshow: 2, height=245, width=960, layout=none, dir=|slideshow|yes|||||]
Note: This code tells the slideshow module where to put the slideshow. Please see the module’s documentation for more info on how to tweak these settings.
This puts the slideshow into this page at the top of the content and sets the height and width parameters. The layout=none is used so that no navigation links are shown for the slideshow. Other options for layout are top or bottom. The dir=|slideshow|yes||||| tells the slideshow where the images are kept. Notice the name of the folder we used was slideshow and the “yes” tells it to use all the images in that folder.
Save and refresh the front page. It should now look like this.
Setting up the about us page, blog and contact form
We can now setup the blog, About Us page, and the contact form.
Blog
For this, click the Modules link in the top navigation and enable the blog module. Then go to Structure > Menus > Navigation and click on list links and check the box to enable “Blogs”. Now click the “edit” link and set the “Parent link” to Main menu and save.
You should now be able to add the blog to the main menu. Go to Structure > Menus > Main menu and click on list links. Now enable the “blog” and save the configuration. You now have a blog setup and ready to go.
About Us Page
Navigate to Content in the top navigation and then click the Add Content > Basic Page.
Name it About Us and throw some text in the body.
Next, click the checkbox that says “Provide a menu link” and make sure the “Parent item” is set to main menu, put About Us as the Menu link title, click on URL path settings and set the URL alias to about-us.
Contact Form
Navigate to Modules and enable the Contact module. Go to Structure > Menus > Navigation and click list links and tick the check box to enable “Contact”. Click the “edit” link and set the “Parent link” to Main Menu and hit save. Now go to Structure > Menus > Main menu and click on list links and enable the “Contact” menu and save the configuration. Your contact form is now set up. You can edit the contact form settings by going to Structure > Contact form.
Note: If your contact form does not show up in the main menu then you must check that you have set up permissions correctly. To do this click the People link in the top navigation and then the permissions tab. You will need to make sure that you have the “use the site-wide contact form” checked for anonymous user.
Adding Social media buttons
The only thing left is to add some social networking buttons to the site. This theme uses the ShareBar Module. Go ahead and install that module and enable it and then go to Configuration > Sharebar > Configure ShareBar and click on Display Options and uncheck the box labeled “Display sharebar in content”. The “Sharebar Position” was also to the Right.
Save and then refresh the front page. The theme is now complete.
Conclusion
This tutorial has shown you how to make a Drupal 7 theme from scratch. You should now be able to edit and modify the theme further adding more colours and elements to fit your needs. Good luck and have fun.
Big thanks to Ray James who helped with the creation of this tutorial.