Christmas Offer - Free Logo Retouched by ThemeBrain Artists. Get More Info Now!

One Page Drupal theme?

One Page Drupal theme?

23Nov 2012

I would like to share my thoughts about a "One Page or Single Page Drupal theme". Last week we had about 10 requests for JD Cloris, an old Drupal theme which we don't maintain any longer as it is not based on Nucleus. JD Cloris is an one page Drupal theme, indeed. screenshot JD Cloris
JD Cloris Screenshot

What are the challenges for a one page Drupal theme?

The Menu and Navigation

There are several ways how you could implement a one page site

1. You define the URL alias according to your needs and add manually the anchor in your content. This solution requires manual work but it is easy and simple to implement. How exactly should you do this? Create your content for example an article, assign it to the front page and create a menu link for this article and define an URL alias with a #hash. In your content, set an #anchor <a href="#myanchor">. Go back to your structure/mainmenu settings and change the menu link. In the Drupal community there is a long discussion how to retain the #anchors in path alias. (http://drupal.org/node/123103). The problem is, you need to manipulate the menu URL.

2. You create your content and add anchors automatically with JavaScript. This requires that you define in your mark-up some consistency for e.g. using a headline tag for each section that you want the browser to scroll to.

3. You define your custom menu settings in the .info file and link the menu items to the related regions.

/* Define a region. The name will be used for the div #id */
; Core regions
regions[page_blog] = 'Blog'

/* Define custom menu. Use the same name of the corresponding region. */
; one page menus
onepage_menu['page_blog'] = 'Blog'

The region will get a unique #id. With a little bit help of JavaScript you can match the menu and the content. This way you have more flexibility to assign content, modules to the regions. The disadvantage here is that you need to edit the info file in case you want to make changes. This is how the HTML looks like:
HTML output for the menu

<ul id="onepage-menu">
	<li id="page_blog_menu">
		<a href="/_themebrain/tb_page/#page_blog">Blog</a>
	</li>
</ul>
HTML output of the region
<div class="region region-page-blog" id="page_blog">
    <div id="block-block-3" class="block block-block">
 		 <div class="block-inner clearfix">
          <h2 class="block-title">Blog</h2>
    		<div class="block-content clearfix">
				<p>Donec non orci libero. Nulla mattis hendrerit risus sit amet varius. 
                                  Nam varius odio metus,  eu ultrices libero! Morbi vel tellus dolor, 
                                  vitae aliquam dolor. Cum sociis natoque cras amet.
				</p>
    		</div>
  		</div>
	</div>
</div>

The Content and Mark-Up (Theme)

For sure the theme needs to give the proper HTML output. In Drupal you can define a template file which can access global variables. For this case let's define the region.tpl. In this file we need to print out the $region name. Look at the example code.

<?php if ($content): ?>
  <div class="<?php print $classes; ?>" id="<?php print $region?>">
    <?php print $content; ?>
  </div>
<?php endif; ?>

Now you need to write piece of JavaScript code which listen to the click event of the main menu and catches the default event and replace it with a scrollTo() event and let the browser scroll to the according region.

For our team the option 3.) would be our choice. There are 3 other ways on drupal.org which to create a one page.

Single Page Website Module

This module basically does the following thing. After installation you can choose the compatible theme for it. According to the single page website project site the module supports Bartik and Zen (and sub themes). You can create a content type "single page". The menu links will be handled with the jQuery plugin autoanchor.

2 Examples of the single page module

screenshot JD Cloris
http://puffadder.co.uk

screenshot JD Cloris
http://artifaction.nl

OnePage CV Distribution

It's an out of the box distribution which prepares the content (blocks, fields, regions etc.) for you. Unfortunately I did not find any demo site or documentation and guides how to setup one without an installation profile. For users who want to have a quick result this would be a good option. Details you can find on the Drupal.org OnePage CV project site.

As Drupal is a heavy CMS framework. Why would you use Drupal to build a simple website like a one page site? Why don't you go with a lighter solution like WordPress or Joomla? Questions which I myself can't answer. At the end it depends all on your taste and skills. For us, we stay with Drupal ;). Stay tuned as we are cooking something in our Drupal lab. And guess... it will be a one page Drupal theme!

Blog type: