Documentation

Light-weight, fast, simple and powerful!
 
Translations of this page?:

Creating Themes for Wolf CMS

Introduction

Designing themes for Wolf is simply a matter of combining an (X)HTML Layout (or “skeleton” page) with a CSS file. There's no need to learn about yet another templating engine, or sub-language, or “wolf tags”, or whatever. Just HTML + PHP + CSS will do:

  • the (X)HTML layout provides the page with its structure
  • some PHP calls (described below) bring in the content
  • the Cascading Style Sheet (CSS) applies structural definitions and design elements

The simplest way to build a theme is to begin with a styled webpage, then insert the calls to Wolf which provide its content. There are thousands of free/opensource CSS webdesigns available, and adapting them for Wolf is quite straightforward. (Some examples can be found on the Themes for Wolf page.)

Building Layouts

A very basic webpage might look something like this:1)

<html>
   <head>
      <title>Websites 'R' Us</title>
   </head>
   <body>
 
   <h1>Websites 'R' Us</h1>
 
   <p>Read all about it!</p>
 
   </body>
</html>

A Wolf Layout simply fills in the content “slots” with data from the Wolf database:

<html>
   <head>
      <title><?php echo $this->title(); ?></title>
   </head>
   <body>
 
   <h1><?php echo $this->title(); ?></h1>
 
   <p><?php echo $this->content(); ?></p>
 
   </body>
</html>

To style this, we need to call our CSS file, however. Wolf uses a convention for where these are stored, so that changing the style of the site can simply mean changing the name of the directory where its CSS lives (for example, “mytheme”, in the “link” line below):

<html>
   <head>
      <title><?php echo $this->title(); ?></title>
      <link rel="stylesheet" href="<?php echo URL_PUBLIC; ?>public/themes/mytheme/screen.css" media="screen" type="text/css" />
   </head>
...

Typically a layout will have its own accompanying CSS, so that by changing the css file in the layout, the look-and-feel of the site can be changed.

  • Since Wolf pages can inherit layouts from parent pages, you only need to set the layout of the Homepage (root page) to control the look of the whole site.
  • Since layouts can be assigned on a per-page basis, any particular page can have its own unique look, different from the rest of the site.2)

Getting Content from Wolf

The title and content calls are the two most important for a Wolf layout, corresponding the the title and body areas when editing a Page in Wolf's backend.

To find out more about these “functions”, and to discover many other pieces of information that can be placed on your layout page (authors, dates, metadata, and so on), see the ”How To's” and functions reference list elsewhere in this wiki.

Tips

  • Have a look at the way the default Wolf installation stores “themes”: you will find them in /wolf/public/themes/[theme-name].
  • Larger, more complex blocks of code that could make your Layout difficult to read can be placed in snippets. Snippets are also useful for storing text elements that could be re-used in different parts of the site.
  • Study some of the free, opensource themes that have already been ported to Wolf, as this will give you the best way of understanding how to include menu elements in your theme.
  • Menus and submenus can be tricky to construct! Make use of the Navigational Cookbook, and feel free to post your questions in the Menu Development forum.

Examples

Layouts with Logic

If you want to use a single Layout for a site, but have unique styles for certain sections, one solution is to put the Layout code for the unique styles into snippets (one for each style), and then use the Layout to test for where you are in the site, and use the appropriate snippet for that area. Here are two examples:3)

(1) This example uses a unique style for any “blog” articles, but a different style for the rest of the site. (The code is a little bit simplified, just to illustrate the concept.)

In the Layout, simply have a test for where you are. In our case, blog pages will always be at level "5", so we can ask for one snippet when the level is less than “5”, and a different one for pages at “5” (or more!).4)

So, set up the Layout with a name (we could call it “Chooser”, for this example), the “Content-type” of text/html, but make this the only text in the “Body”:

<?php
 
if ($this->level() < 5) {
  // all pages except blog-type entries
  $this->includeSnippet('main_layout');
} else {
  // use this for blog posts
  $this->includeSnippet('blog_layout');
}
 
?>

Then create the two Snippets, “main_layout” and “blog_layout”, and save your two different layouts as these snippets (make sure to leave the text-filter as ”-none-”).

Visitors to your site will now get one layout for most of the site, but a unique layout for blog pages – even though the Homepage (root page) of your Wolf site has the “Chooser” layout with all other pages set to “inherit”. Also, when creating new pages, you (or your clients!) don't need to remember to set manually the correct layout: the correct one will be applied automatically.

This technique could be used with other tests (for example, for a “parent” to style a particular branch of the site) or combinations (for example, with the Layout having a site-wide common header/footer, but the page style being called by from snippets as the result of some test).

(2) Or, as a variation on that code, it is common to have a different landing page (Homepage), with a different look for the rest of the site. Just set the Layout code this way:

<?php
 
if ($this->level() == 0) {
  // give us the homepage layout
  $this->includeSnippet('home_layout');
} else {
  // use this for the rest of the site
  $this->includeSnippet('site_layout');
}
 
?>

No other tests are needed here, since the root page is the only page in Wolf at level “0”. Now add the create the two different “layouts” as Snippets (“home_layout” and “site_layout”). Once again, this “Layout” can be set at the root level, and so inherited by the rest of the site, but with each part of the site getting the “look-and-feel” it should.

Layouts as flat files

Basically, create a new Layout, give it a name (so it can be selected in the page settings) and you may want to specify the 'Content-type'.

Why? because every page before rendering the layout will check for that value and if none is specified it will be set to 'text/html' and maybe you don't want that.

Then in the content, you can put the following:

<?php include(THEMES_ROOT.DS.'my_theme/layout.php'); ?>

THEMES_ROOT is a Wolf's constant, DS (DIRECTORY_SEPARATOR), 'my_theme' a dummy name and layout, well the layout file.

The themes folder is inside 'public'.

1) If you are new to (X)HTML, there is a good collection of starter pages at Perishable Press. Google for more information!
2) This is how it works at the TestWolf theme demos.
3) See also the wiki entry on Multiple Layouts using switch/case.
4) In fact, a more rigorous test is needed here, as Archive pages will also satisfy this condition; or if you have a “deep” site with other pages at this level. Adding a test for the “parent” would help with this.
 
tutorials/themes.txt · Last modified: 2015-02-03 23:55 by David
 
Except where otherwise noted, content on this wiki is licensed under the following license:GNU Free Documentation License 1.2
Copyright 2010 wolfcms.org / design by yello studio / Wolf CMS Inside