How to Create a Drupal 7 Theme from Scratch

by in Development on 27th Dec 2013 · 0 Comment

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

Creating a Drupal 7 Theme from Scratch

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:

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:

Scratch theme folder structure

  1. Create a folder in /sites/all/themes named - "custom" - then open the folder
  2. Create a folder in /sites/all/themes/custom named - "scratch" - then open that folder
  3. Now create two files named:
    1. scratch.info
    2. template.php
  4. Create three folders in /sites/all/themes/custom/scratch - naming them:
    1. CSS
    2. images
    3. templates
  5. Open the CSS folder and create a file named style.CSS and go back to the scratch folder
  6. 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

Scratch Mockup

Scratch 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:

  1. The name of the theme.
  2. Description of the theme.
  3. Which version of Drupal this theme will work with.
  4. 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.
  5. 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.

Scratch Appearance enable 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.

Scratch front page minimum code needed

Take a look at the mock-ups again. We will now build the black bar across the top with the user menu in it.

Scratch black bar

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.

Scratch user menu set region

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.

Scratch front page black bar and user menu before css

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.

Scratch front page black bar and user menu after css

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.

Scratch main menu set region

Refresh the page and you will now be able to see the logo as shown below.

Scratch front page logo and main menu before css

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;}

Scratch front page logo and main menu after css

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">
      &copy; 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">
      &copy; 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.

Scratch add content

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.

Scratch Site information set default front page

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.

Scratch front page setup

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.

Scratch create slideshow text format

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.

Scratch slideshow folder structure

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|||||]

Scratch add slideshow code to front page

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.

Scratch front page after adding slider

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.

Scratch after blog enabled and menu fixed

About Us Page

Navigate to Content in the top navigation and then click the Add Content > Basic Page.

Scratch add content Basic Page link

Name it About Us and throw some text in the body.

Scratch About Us add title and 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.

Scratch About Us provide menu link

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.

Scratch front page finished logged in

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.

Rahul is a creative content writer for 123-reg.co.uk who has a passion for all things design related, movies, music and sport. You can share your thoughts and connect with him on Twitter and Google+.