How to Make a Drupal 7 Theme
Make sure you're ready to tackle the steps., Set up a developing environment., Design the website., Develop the website using HTML and CSS., Set up Drupal to begin theming., Understand Drupal’s web page structure and convert your static pages to...
Step-by-Step Guide
-
Step 1: Make sure you're ready to tackle the steps.
To be able to follow and complete the tutorial effectively, you should understand the basics of:
The purpose of websites HTML and CSS: how they are used to make websites PHP: what it is, and how it is used to enhance CMS's: what they are, and how they are used to power websites Drupal:
How to set up a simple website using it Don't be put off by this list, however.
With enough enthusiasm, you can learn what you need to while following this tutorial. -
Step 2: Set up a developing environment.
In order to develop a theme quickly and smoothly (without internet-connection-related issues), you should set up a developing environment (a code editor program and a testing server) on your computer.
The most common way of doing this is to install a WAMP / LAMP / MAMP stack (W: windows; L:
Linux; M:
Mac, A:
Apache, the server software; M:
MySQL, the database software; P:
PHP, the server-side script) and download an open-source code editor. , Begin by sketching the layout of the home page of your website using a pencil and a clean sheet of paper; you need to feel free to make mistakes and changes.
Draw all the parts of a basic web-page, including the header, navigation menu (which may be just below the header or in a sidebar), the page body (for the content), and the footer.
You may have other areas in your design.
When you’re satisfied with your design, recreate your sketched design a graphics program that allows you to design web pages, such as Adobe Photoshop, or even better, Adobe Fireworks.
Then make sure you add all the other visual elements; consider the colours and dark-light contrasts, the typography and how it adds to the user’s experience, the layout and empty spaces (whitespace is important!), and how content will fit in. , Just like in the website design step, it is probably most efficient to only create the web pages of the site that have their own unique layouts, such as the Home page and Contact Us page.
Keep the layout as simple as possible, and use modern practices and conventions where possible (such as HTML5 and CSS3).
At this point, don't add any server-side scripting (such as PHP), and keep client-side scripting (such as Javascript) to a minimum, in order to not interfere with Drupal's code; this can be added later. , Download Drupal and move the files to the server you will use to develop your theme (your testing server
- recommended
- or an online server).
Place the downloaded files into the root folder (if you're using a testing server, it's the www or localhost folder).
Use a web browser to navigate to the root folder (e.g. http://www/) and follow the installation process.
You should then install any modules that will be useful for theme development. , HTML web pages are known as ‘static’ – which means they aren’t designed to have content that regularly changes – and are built using block-type tags such as ‘divs’ (and ‘header’, ‘footer’, etc. in HTML5).
Drupal web pages are a combination of static parts (HTML) and dynamic parts – parts that contain content that is expected to be changed regularly.
These dynamic parts are called ‘regions’ in Drupal.
An example of a region is a sidebar, where you might want to insert navigational links, a search box, social media buttons, and so on.
See the diagram below for a visual representation:
The things that you can put into regions are called ‘blocks’ in Drupal.
For example, a search box or a menu are commonly-used blocks.
You can insert blocks into regions, re-arrange the blocks, and remove blocks from regions when you log into Drupal on the Structure > Blocks page.
Many of the available blocks in a typical Drupal website are provided by the installed modules, but you can create your own blocks on the Blocks page.
The content of each web page (the body text, headings, images, and so on) are also placed into a region: the ‘Content’ region, which is required for all Drupal themes.
The content of each web page (or blog post or custom content type) is called a ‘node’, and is packaged into the Main page content block.
In other words, the content of the About Us page is saved into node (with a node type of ‘page’, of course), and is output to the Main page content block, which is placed in the Content region.
Note that sometimes multiple nodes are displayed on one web page through the Main page content block; an example is the front page, which by default shows several of the website’s most recent articles (blog posts).
Your theme will control the regions, but not what the website administrators put into them.
As the themer, you have inform Drupal which regions your theme will have, and register them in files called templates, which are covered in the next section. , In this folder create a .info file which contains the theme's purpose and gives information about how it is used.
List what goes into it.
In the folder add screenshots. and a CSS folder. , Drupal ‘template’ files (that have a file name ending in .tpl.php, meaning 'PHP template') are used by Drupal to structure the output of each web page.
Some of the commonly-used Drupal templates include: html.tpl.php, page.tpl.php, block.tpl.php, and node.tpl.php.
Each web page that Drupal outputs (the 'Home page' for example) will use the html template once, the page template once, and the region, block and node templates at least once each.
These templates files contain HTML, PHP, and printed variables within the PHP scripts.
An example of a printed variable is <?php print render($content); ?> within the node.tpl.php file.
This content variable stores all the text that the user typed into a basic page's 'Body' field when the user was logged into Drupal.
The render() function simply makes sure the output of the content variable is wrapped in the appropriate HTML tags.
To see all the variables available in a template file, search for the default Drupal '.tpl.php' file on Drupal.org.
If you'd like to see the typical content of one of these templates, you can look at the template files in the directory of the core Drupal themes in the drupal > themes folder (not the drupal > sites > all > themes folder). , These functions allow the themer to modify any of the variables available to the templates, so that they will display different output when they are printed in the template files.
The difference between process and preprocess functions is simply that all preprocess functions are called (in a specific order set by Drupal) before all process functions; they are the same otherwise.
These functions are all written in the template.php file (note that this is not a '.tpl.php' file).
The name of all preprocess and process functions you add you your theme will start with the name of your theme, eg. mytheme_process_node ().
To add one to your theme, you can either write it from scratch, or copy it from another theme and modify it.
An example of using a preprocess function to change a variable is to append an opening and closing <section> tag to the start and end of the $variablesvariable within a 'mytheme_preprocess_node() function.
You can read more about process and preprocess functions, and see the order in which they're called, on the Drupal 7 theme function page on Drupal.org. ,, The following list of modules are very useful to most Drupal websites, and was written by Steve Floyd in his article Top 25 Drupal Modules:
Views.
Vital for themers, Views allows you to gather almost any content from your website and present it as a page or block.
Particularly useful for creating a dynamic home page.
Views Slideshow Pathauto Mollom Google Analytics WYSIWYG XMLsitemap Backup and Migrate Workbench Media Drupal Commerce , -
Step 3: Design the website.
-
Step 4: Develop the website using HTML and CSS.
-
Step 5: Set up Drupal to begin theming.
-
Step 6: Understand Drupal’s web page structure and convert your static pages to it.
-
Step 7: Set up the theme folder.
-
Step 8: Create the template files.
-
Step 9: Insert process and preprocess functions.
-
Step 10: Install the theme in Drupal
-
Step 11: set up the required views and add the required nodes and regions.
-
Step 12: Install additional useful modules which enhance appearance
-
Step 13: security and the functionality.
-
Step 14: Add website content to complete the site.
Detailed Guide
To be able to follow and complete the tutorial effectively, you should understand the basics of:
The purpose of websites HTML and CSS: how they are used to make websites PHP: what it is, and how it is used to enhance CMS's: what they are, and how they are used to power websites Drupal:
How to set up a simple website using it Don't be put off by this list, however.
With enough enthusiasm, you can learn what you need to while following this tutorial.
In order to develop a theme quickly and smoothly (without internet-connection-related issues), you should set up a developing environment (a code editor program and a testing server) on your computer.
The most common way of doing this is to install a WAMP / LAMP / MAMP stack (W: windows; L:
Linux; M:
Mac, A:
Apache, the server software; M:
MySQL, the database software; P:
PHP, the server-side script) and download an open-source code editor. , Begin by sketching the layout of the home page of your website using a pencil and a clean sheet of paper; you need to feel free to make mistakes and changes.
Draw all the parts of a basic web-page, including the header, navigation menu (which may be just below the header or in a sidebar), the page body (for the content), and the footer.
You may have other areas in your design.
When you’re satisfied with your design, recreate your sketched design a graphics program that allows you to design web pages, such as Adobe Photoshop, or even better, Adobe Fireworks.
Then make sure you add all the other visual elements; consider the colours and dark-light contrasts, the typography and how it adds to the user’s experience, the layout and empty spaces (whitespace is important!), and how content will fit in. , Just like in the website design step, it is probably most efficient to only create the web pages of the site that have their own unique layouts, such as the Home page and Contact Us page.
Keep the layout as simple as possible, and use modern practices and conventions where possible (such as HTML5 and CSS3).
At this point, don't add any server-side scripting (such as PHP), and keep client-side scripting (such as Javascript) to a minimum, in order to not interfere with Drupal's code; this can be added later. , Download Drupal and move the files to the server you will use to develop your theme (your testing server
- recommended
- or an online server).
Place the downloaded files into the root folder (if you're using a testing server, it's the www or localhost folder).
Use a web browser to navigate to the root folder (e.g. http://www/) and follow the installation process.
You should then install any modules that will be useful for theme development. , HTML web pages are known as ‘static’ – which means they aren’t designed to have content that regularly changes – and are built using block-type tags such as ‘divs’ (and ‘header’, ‘footer’, etc. in HTML5).
Drupal web pages are a combination of static parts (HTML) and dynamic parts – parts that contain content that is expected to be changed regularly.
These dynamic parts are called ‘regions’ in Drupal.
An example of a region is a sidebar, where you might want to insert navigational links, a search box, social media buttons, and so on.
See the diagram below for a visual representation:
The things that you can put into regions are called ‘blocks’ in Drupal.
For example, a search box or a menu are commonly-used blocks.
You can insert blocks into regions, re-arrange the blocks, and remove blocks from regions when you log into Drupal on the Structure > Blocks page.
Many of the available blocks in a typical Drupal website are provided by the installed modules, but you can create your own blocks on the Blocks page.
The content of each web page (the body text, headings, images, and so on) are also placed into a region: the ‘Content’ region, which is required for all Drupal themes.
The content of each web page (or blog post or custom content type) is called a ‘node’, and is packaged into the Main page content block.
In other words, the content of the About Us page is saved into node (with a node type of ‘page’, of course), and is output to the Main page content block, which is placed in the Content region.
Note that sometimes multiple nodes are displayed on one web page through the Main page content block; an example is the front page, which by default shows several of the website’s most recent articles (blog posts).
Your theme will control the regions, but not what the website administrators put into them.
As the themer, you have inform Drupal which regions your theme will have, and register them in files called templates, which are covered in the next section. , In this folder create a .info file which contains the theme's purpose and gives information about how it is used.
List what goes into it.
In the folder add screenshots. and a CSS folder. , Drupal ‘template’ files (that have a file name ending in .tpl.php, meaning 'PHP template') are used by Drupal to structure the output of each web page.
Some of the commonly-used Drupal templates include: html.tpl.php, page.tpl.php, block.tpl.php, and node.tpl.php.
Each web page that Drupal outputs (the 'Home page' for example) will use the html template once, the page template once, and the region, block and node templates at least once each.
These templates files contain HTML, PHP, and printed variables within the PHP scripts.
An example of a printed variable is <?php print render($content); ?> within the node.tpl.php file.
This content variable stores all the text that the user typed into a basic page's 'Body' field when the user was logged into Drupal.
The render() function simply makes sure the output of the content variable is wrapped in the appropriate HTML tags.
To see all the variables available in a template file, search for the default Drupal '.tpl.php' file on Drupal.org.
If you'd like to see the typical content of one of these templates, you can look at the template files in the directory of the core Drupal themes in the drupal > themes folder (not the drupal > sites > all > themes folder). , These functions allow the themer to modify any of the variables available to the templates, so that they will display different output when they are printed in the template files.
The difference between process and preprocess functions is simply that all preprocess functions are called (in a specific order set by Drupal) before all process functions; they are the same otherwise.
These functions are all written in the template.php file (note that this is not a '.tpl.php' file).
The name of all preprocess and process functions you add you your theme will start with the name of your theme, eg. mytheme_process_node ().
To add one to your theme, you can either write it from scratch, or copy it from another theme and modify it.
An example of using a preprocess function to change a variable is to append an opening and closing <section> tag to the start and end of the $variablesvariable within a 'mytheme_preprocess_node() function.
You can read more about process and preprocess functions, and see the order in which they're called, on the Drupal 7 theme function page on Drupal.org. ,, The following list of modules are very useful to most Drupal websites, and was written by Steve Floyd in his article Top 25 Drupal Modules:
Views.
Vital for themers, Views allows you to gather almost any content from your website and present it as a page or block.
Particularly useful for creating a dynamic home page.
Views Slideshow Pathauto Mollom Google Analytics WYSIWYG XMLsitemap Backup and Migrate Workbench Media Drupal Commerce ,
About the Author
James Clark
Professional writer focused on creating easy-to-follow organization tutorials.
Rate This Guide
How helpful was this guide? Click to rate: