Recipe for starting a new Drupal project

This is one of those "notes to self" posts about using the Zen Magic starter project to start a new project with the least number of steps possible. In what follows, I'm starting up a new project to make the website http://example.com.  For the name of the project, I use the website domain name, minus the TLD, so example.com would be project example.

Step 1: Create the project directory

The Projects directory under my home directory is where I keep one subdirectory per project (even if it never gets off the ground) to organize all information related to the project that does not need to be uploaded to the web server. I have a starter directory there that has skeleton project management documents, as described in an earlier blog post. Before actually starting on a new project, I take the time to look through the documents in the starter directory and update them based on the experience gained from the last project.

When I'm happy with the starter documents, these are the Mac terminal commands to start a new project:

cd ~/Projects
cp -r starter example

The file clientinfo.doc is the first to be edited since that has the contact information for the client. Then it's on to following the outline in notes.oo3. Once the requirements phase is completed, it's time to start developing.

Step 2: Set up the development site on my Mac

I use Drupal multisite on my Mac for all my projects that are based on the Zen Magic starter project. This way they can all share the same source code, including the Zen Magic base theme which is in sites/all/themes. So, the first thing to do is to create a new site under the multisite Drupal root:

cd ~/Sites/drupal/sites
cp -r starter-drupal.com example.com
cd example.com/themes
mv zenstarter example
cd example
mv starter.info example.info

Edit the example.info file with a text editor and update the name and description fields at the top. Now edit the template.php and theme-settings.php files and replace all instances of "starter" with "example" (there will be 17 and 4 instances changed, respectively).

Next, copy the starter database by visiting http://localhost.com:8888/phpMyAdmin, choosing starter-drupal database from the drop down on the left then clicking on the Operations tab. (I use MAMP on my Mac, which runs the apache web server on a non-standard port. You may not need the :8888 in your set-up.) In the Copy database to: section, enter the name of the project, in this case example.

Now, open the ~/Sites/drupal/sites/example/settings.php file with a text editor, find the $databases array and change the "starter-drupal" database to your new database name.

Last, configure the web server to map dev.example.com to your new, local site. You'll need to add dev.example.com to /etc/hosts (mapped to 127.0.0.1) and then use the MAMP PRO app to add dev.example.com to your Hosts list (using the '+' sign below the list on the left), then setting the Disk location field to (in my case) /Users/mariagreene/Sites/drupal. If you just have regular MAMP, edit the /Applications/MAMP/conf/apache/httpd.conf file, or (if you're on Linux) you'll need to set up the appropriate virtual hosts file in /etc/apache2/sites-available and do a2ensite. If you're not using MAMP PRO (which will do it for you), don't forget to restart the apache server.

Now you should be able to visit the site at http://dev.example.com:8888. First, go to Appearance and Enable and set as default your new theme. Go to the new theme's Settings to upload your logo and make other customizations. You'll also want to set a few configuration settings like the Site name and Slogan on the Conguration > System > Site information admin page. (You'll already have the Administration menu available because it's one of the pre-installed and pre-configured modules.) Setting these right away is a good way to make sure it's obvious which site you're on.

The new site will be completely plain but useable enough to start creating pages (Content > Add content > Basic page), putting them into the menu hierarchy and adding blocks where appropriate. You can cut and paste existing content into the pages/blocks or just add Lorem ipsum content and "for position only" images. It's incredibly helpful when theming to have some working content in position. DON'T SHOW THE UNTHEMED SITE TO THE CLIENT, THOUGH. From my experience, it's impossible to get a client to just think about the content and not focus on the layout and (lack of) graphics. If you've got a Photoshop mockup, show them that, or move on to the next step.

Step 3: Customize the Zen Magic child theme for the site

Theming the site is also made as simple as possible through the use of the starter project. Your new theme is a child of Zen Magic which in turn is a child theme of Zen. Zen uses Sass, Compass and Zen Grids. These tools encapsulate many CSS design patterns into a libraries of mixins that are easy to apply in (S)CSS files, plus the Zen Magic theme has a lot of useful styles already defined, such as for typography and layout. Zen Magic goes quite a bit in styling beyond what Zen does because many sites have the same needs. What it doesn't have is any background images or colors (beyond black and gray).

I choose to put all my (Sass) styles into styles.scss. Because this is a Sass file, you'll need to have installed Compass and Sass first, then do:

cd ~/Sites/drupal/sites/example.com/themes/example
compass watch

Now, whenever you make changes to sass/styles.scss, they'll be compiled into css/styles.css.

You're ready to make magic with your new Drupal site with a custom theme!

Thanks to Arlette for the picture of the recipe box.

About Maria Greene

Maria Greene's picture
Maria wears the propellor hat at Just Magic Design. She has a degree in Computer Science from Brown University and has been making websites since 2002. Besides web development, Maria tries to keep up with her three school-age kids and serves on the boards of several non-profits. Her husband adds joy to her life and her dog adds slobber.

Add your comment