Creating Menus in SkyBlueCanvas v1.1

When you create a new page in SkyBlueCanvas, a menu item is already created for you. In fact, there is not really a menu item to create because the system assumes, by default, that if you have created a page, there should be a menu link to it. I mean, how else would anyone find your page if there is no link, right?

The only trouble is, which menu should the new page go in? This is where you will have to give SkyBlueCanvas a little help. On the Meta Data tab in the Page Manager (Admin > Pages > Edit), you will see a selector field labeled Menu. You simply select the menu in which you want the page to appear.

There are two logical next questions that you may have. (1) How do I create a new menu? (2) How does the menu get placed on a page? In this article I will answer these two questions.

The answer to question (1), “How do I create a new menu?” is very simple. You simply navigate to Admin > Collections > Menus. From the list view, click the “Add” button. In the form that appears:

provide the requested information.

Then click Save.

No you can go back to Admin > Pages > Edit (your page) and on the Meta Data tab, select your new menu from the options list and save your page.

You have now successfully created a new menu and added a page (menu item) to the new menu.

Displaying a Menu

Displaying your menu involves two other concepts in SkyBlueCanvas: templates and fragments.

Templates and fragments make up the presentation or “view” portion of your web page. They are where you define the HTML structure of pages (templates) and collections or content types (fragments). They may be a little tricky to grasp at first, but once you understand them, they are very powerful and flexible.

Your SkyBlueCanvas installation, provided you are using v1.1 RC1 or later, should already have a Menu Fragment included. We are going to modify this fragment, or add to it rather, first.

Using your FTP client, navigate to /skyblue_root/data/skins/techjunie/fragments/menu/ and make a copy of view.php. Name the new file mymenu.php. Then open the file with the text editor of your choice.

In the file mymenu.php you will see the following code:

<?php
  global $Router;
  global $Filter;
?>
<div class="horizontal-menu">
  <?php if (count($data)) : ?>
  <ul>
    <?php foreach ($data as $item) : ?>
    <?php if (not_valid_menu($item)) continue; ?>
    <li<?php the_class($item); ?>>
      <a href="<?php the_link($item); ?>">
          <?php the_text($item); ?></a>
    </li>
    <?php endforeach; ?>
  </ul>
  <?php endif; ?>
</div>

That looks pretty simple, huh?

We are going to need to modify the code a little bit but I promise it will be painless- and I will give you the full code when we are finished.

SkyBlueCanvas will know that this is a menu fragment (more on this later) so the menu items (actually the pages) will already be available to your code in the $data variable. We will only need to manually retrieve our new menu.

Now you can refer back to the Menu ID I asked you to hold onto.

<?php

  /*
  * Set this to the ID of the menu you created
  */

  $my_menu_id = 3;

  /*
  * Get the new menu from storage
  */

  $menu = $Core->SelectObj(
    $Core->xmlHandler->ParserMain(SB_XML_DIR . "menus.xml"),
    $my_menu_id
  );
?>

Now we have our menu items and our new menu. We can start building the menu HTML.

We will start with a basic HTML structure:

<div class="mymenu">
  <?php if ($menu->showtitle) : ?>
  <h2><?php echo $menu->title; ?></h2>
  <?php endif; ?>
  <ul class="verticalmenu">

  </ul>
</div>

That’s not too bad. We are almost finished building our menu HTML. Now all we need to do is loop through the $data list, and display each of the items in our menu. Here is how the looping is done:

  <?php foreach ($data as $item) : >

  <?php endforeach; ?>

We only want to show links to pages that are published, so we will add a single line to make sure the menu item can be displayed:

  <?php foreach ($data as $item) : >
  <?php if (not_valid_menu($item)) continue; ?>

  <?php endforeach; ?>

Now we want to filter the $data items to only show items in our new menu. We do this with a single line of code:

  <?php foreach ($data as $item) : >
  <?php if (not_valid_menu($item)) continue; ?>
  <?php if ($item->menu != $menu->id) continue ; ?>

  <?php endforeach; ?>

Wow! That was pretty easy and we are moving right along …

The only thing we have left to do is display the menu item:

  <?php foreach ($data as $item) : >
  <?php if (not_valid_menu($item)) continue; ?>
  <?php if (!$item->menu == $my_menu_id) continue ; ?>
  <li<?php the_class($item); ?>>
    <a href="<?php the_link($item); ?>">
        <?php the_text($item); ?></a>
  </li>
  <?php endforeach; ?>

And believe it or not, you have just built a new menu, as well as your first SkyBlueCanvas Fragment. There is only one last step, and this one is the simplest of all.

Up to this point, we have created a new Menu object in the SkyBlueCanvas admin and written a new menu Fragment. The only thing that remains is to tell SkyBlueCanvas where to display the fragment. To do this, go to /skyblue_root/data/skins/techjunkie/ (or your skin) and open skin.text.html in your text editor. You will see the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" {doc:lang}>
  <head>
    <title>[[page.title]]</title>
    <meta http-equiv=”Content-Type”
      content=”text/html;charset=UTF-8″ />
    <?php echo $this->get_meta_data(); ?>
    <link rel=”stylesheet”
    type=”text/css”
    href=”<?php echo $this->get_path(); ?>css/TechJunkie.css” />
    <!–#plugin.preloader–>
  </head>
  <body id=”homepage”>
    <div id=”wrap”>
      <!–#plugin:fragment(header)–>
      <div id=”menu”>
        <!–#plugin:fragment(menu,view,menu=1)–>
      </div>
      <div id=”content-wrap”>
        <div id=”main”>
          <!–#plugin:fragment(page,view)–>
        </div>
        <div id=”sidebar”>
          <!–#plugin:fragment(sidebar)–>
        </div>
      </div>
      <div id=”footer-wrap”>
        <!–#plugin:fragment(footer)–>
      </div>
    </div>
  </body>
</html>

Notice the lines that look like this:

<!--#plugin:fragment(page,view)-->>

These tokens are the code that tell SkyBlueCanvas where to load a fragment, which fragment to load, and which view (PHP file) to load. So the only thing you need to do is add a token for your new menu in the location in the HTML where you want the menu to appear. Let’s assume you want your new menu to appear at the top of the sidebar. You will change the code to look like this:

 <!–#plugin:fragment(menu,mymenu)–>

Now test your new menu by pointing your browser to your web site. Your new menu should appear at the top of the sidebar.