• Share a link to this article:


ExtraContent is a popular technique used by many third-party theme developers as a method of embedding content outside of the normal editable regions of a theme. All premium ThemeFlood themes contain several ExtraContent containers, and you can see roughly where they are located by using the Preview ExtraContent Containers option in the Miscellaneous theme style settings. This preview option will give you a rough idea of where each ExtraContent container is located in your chosen RapidWeaver theme (with the name or description of the ExtraContent container printed inside). You can either use HTML markup or a free stack element to embed content into an ExtraContent container. In essence, all that ExtraContent is doing is to move a block of content into another part of the page using jQuery Javascript.

Some ExtraContent containers in a theme (like a social bar, a banner content block or horizontal content containers) may only display if you turn on that particular element in the theme style settings. This ensures that unused regions of a theme are safely hidden from view (including things like spacing and borders), unless specifically required. Naturally the quantity and location of ExtraContent containers varies on a theme-by-theme basis.

ExtraContent using HTML markup (for use in any RapidWeaver page type)

The HTML markup for ExtraContent is formed using a simple divisional container (an opening and closing tag), with an ID applied. The ID determines what ExtraContent container to embed the content into. This is the typical HTML markup to use:

<div id='myExtraContent3'>Hello World!</div>

In this example, the text 'Hello World!' would get displayed within ExtraContent3.

Changing the number in the above example from 3 to 7 would display the text in ExtraContent7 instead. You can use as many ExtraContent containers on the same page as you want. ExtraContent can also support many different content types, including text, HTML code, images, video, slideshows, links, icons, PlusKit @import calls and various other media.

Using the ExtraContent Snippet from Adam Merrifield on Vimeo.

You would normally enter these ExtraContent code snippets in either your main page container or your sidebar region. Don't worry if your sidebar is turned off - ExtraContent code snippets will still work.

The HTML ExtraContent code snippets work in any page type. So for example, you can use this documented method in the RapidWeaver blog page type or a photo album.

ExtraContent stacks (for use in the Yourhead Stacks page type)

There are two ExtraContent stacks available for RapidWeaver, which enable you to get ExtraContent setup and working in your chosen theme without needing to use any HTML markup (as documented above).

Using the ExtraContent Stack from Adam Merrifield on Vimeo.

The standard ExtraContent stack was formally developed by SeyDesign and has since been taken-over by Nimblehost. You can download the stack and view its documentation here. To use this stack, drag and drop the ExtraContent stack element into your page. In the stack settings on the right, change the number to reflect the number of the individual ExtraContent container you want to access and use. Then place your content in the placeholder, as pictured below.

ExtraContent Stack

Another stack element you can use is the free ExtraContent Plus stack we've released through the Stacks4Stacks website. This stack is similar to the original ExtraContent stack from SeyDesign, but has been updated with full compatibility for RapidWeaver 6. ExtraContent Plus has combined support for both ExtraContent and FreeStyle banner containers; and allows you to colour-code and tag your containers in RapidWeaver edit mode (for easier reference). ExtraContent Plus also hides content until the page is ready and has a special safety-net for instances where a user to your website has no Javascript support.

The Stacks4Stacks website lists some additional stack elements with support for ExtraContent. Stacks such as AdaptiveGrid and UsefulStack let you embed responsive layouts and content directly into ExtraContent containers.