Last updated June 7, 2014. Created on November 29, 2011.
Edited by acabouet, lzimmerman. Log in to edit this page.

You can use views and a specific, trimmed-down page template to create blocks or pages containing widget content to be viewed in an iframe.


  • Views
  • Page and (optionally) views templates
  • Theme preprocessing functions (preprocess_html and preprocess_page)
  • CSS styles


  1. Define a path specific to widgets.

    Widget layout will be determined by a path on your site, which will contain your widget pages or blocks: for example,
  2. Create views for your widgets

    Create a view for each block or page of widget content, containing only the content you want to display in the widget.

    When creating views pages, make sure the path begins with the argument you’re using for widgets.
    For example, if you are using the path /widgets/ for widgets, you might use the page path: /widgets/first-widget

  3. Copy your theme's page.tpl.php to a new template for pages containing any widget-related view. Menus, etc. should be removed from these pages.
    • Here’s a sample widget-page template based on the Bartik theme (and named page--widgets.tpl.php):
      <div id="content" class="widget-block">
          	if ($page['content']['system_main']['main']) {	
      		$page_content = $page['content']['system_main']['main']['#markup'];
      		// Widget pages: add 'parent' target to node links
      	 	$page['content'] = preg_replace('/<a (.+?)>/','<a $1 target="_parent">',$page_content);
      	<?php print render($page['content']); ?>
      </div> <!-- /.section, /#content -->

      Page wrapper, header, tabs, and other sections have been removed: only the main content will be displayed in the final iframe.
      Be sure to adjust this section to suit the main-content area of your theme, to preserve basic theme styling as desired.

      The widget-block class has been added to the block content so that the widget can be given a specific size, etc.

    • The example above is based on the suggestion found here:
      A line has also been added to add targets to widget content links, set to ‘parent’, so that widget links aren’t opened inside the iFrame.
  4. You can also alter the views templates themselves as needed. The views template for standard widgets created as pages or blocks is views--view.tpl.php.
  5. Create a page for each of your views blocks, making sure to use your widget-specific path. Assign the blocks to their pages in Structure->Blocks.
  6. Use theme functions to assign a template and body class to your widgets.
    • In yourtheme_preprocess_page, assign your widget page template to all widget pages on the site, according to your selected path:
      function bartik_preprocess_page(&$variables) {
        // Check path to determine widget pages
        $pathargs = explode('/',request_uri());
        if ($pathargs[1] == 'widgets') {
           // Use template: page__widgets
           $variables['theme_hook_suggestion'] = 'page__widgets';

      Note that the line beginning “if($pathargs …” will need to be changed according to which section of your path is being checked, and its name.

    • In yourtheme_preprocess_html, add a class to the body of all widget pages for CSS styling (so that you can center widget content, etc., as needed).
      function bartik_preprocess_html(&$variables) {
      // Add a widget-page class to all widget pages, by path  
      	if (isset($variables['page'])) {   
      		$pathargs = explode('/',request_uri());
      		if ($pathargs[1] == 'widgets') {
      			$variables['classes_array'][] = 'widget-page';

      You can use additional paths and argument checks here suggest other templates based on size, etc.; e.g. /widgets/300x250/.
      Now your site’s widget pages should contain only the views content you have created. (If you’re logged in, you will probably see your administrative toolbar also.)

  7. Style your widgets as needed.

    Sample CSS (based on Bartik):

    • This rule may be useful in removing any page background you’re using:
      body.widget-page {
        background: transparent;
    • Make sure default page styling doesn’t interfere with widget sizing or placement:
      body.widget-page #content, body.widget-page #sidebar-first, body.widget-page #sidebar-second {
      float: none;
      display: block;
    • This rule sets the widget block to a specific size, centered, with a white background and a rounded black border:
      #content.widget-block {
      margin: 0 auto;
      width: 400px;
      text-align: left;	
      overflow: hidden;
      background-color: #fff;
      border: 1px solid #000;
      border-radius: 7px 7px 7px 7px;
      padding: 5px 10px;

Once the pages are ready, just drop the a widget link into an iframe tag like this one:
(You may need to adjust the widget and iframe size in order to prevent scrollbars from appearing.)

<iframe frameborder="0" style="border: none;" width="400" height="400"

This code can now be used on other websites, and you can change the content simply by updating the view for that widget.

Looking for support? Visit the forums, or join #drupal-support in IRC.


WillGFP’s picture

Thanks for the guide, just finished creating my first widget. I found a couple things that made it easier for me:

Drupal 7 inserts a specific class into the body tag for each individual page, so you don't necessarily need to use the theme functions to insert any classes. In the example above, the class would be ".page-widgets-first-widget".

Some themes have automatic scaling, like Zen 5.x, so the content will dynamically adjust to whatever height and width is set in the iframe. No need to do any fancy programming to allow for different iframe widths and this makes the widget much more user-friendly. Doesn't always work with older version of IE though.

WillGFP’s picture

If you don't want the widget to load a bunch of CSS and javascript that isn't needed from your html.tpl.php template, you can use a custom one. This functionality is normally not built into themes, but it's quite easy to add in Drupal 7. Instructions are here: