I quickly built out a template for The Gong Shop site using just XHTML and an external CSS file. Now I have to figure out how to get this into FrogCMS.

I took a look at the wiki on Google Code for a little info on how to start creating my theme. It seems like FrogCMS doesn’t have a typical theming system but more of a variety of parts that make of up a “theme”. I decide to download a theme from the contributed themes section @ madebyfrog.com

I chose the FreshMedia theme. The zip file contained files like this:

It looks like the install.txt has a list of instructions: put the css and images here, paste this snippet in, add this HTML to a new layout… etc. The other downloadable themes seem to work the same way. I’m not sure how I feel about this system yet – but let’s try it out.

First I go to the root of my FrogCMS install and open the folder /public/themes/. Inside is the default theme normal. I create a new folder and name it gongshop.

Then I just paste in the files for the HTML layout I already created.

I click the Layout tab and then New Layout

I enter a name for my layout (I’d like to start with the two column home page). I enter the type as text/html (I saw it this way on the other layouts).

I paste the HTML from my template in… and there we go.

I venture over to the Pages tab. At first I’m not quite sure how to create a page. There are green “Add Child” buttons next to the current pages but how do I add a root level page? I stare at this for a while and consider it deeply.

The Create a Page section in the FrogCMS docs explains:

Note that all “main pages” in Frog are actually a “child” page to the Home page.

Alright, fine. I’m just going to go mess with a page and see what happens.

Let’s switch this simple page over to my gongshop layout…

Now let’s check out the About Us page in the sites front-end.

No styles. I’m sure it’s a path issue. I refer to the original theme layout. You need to reference your stylesheet like so:

<link rel="stylesheet" type="text/css" href="<?php echo URL_PUBLIC; ?>public/themes/gongshop/screen.css" />

Ok, that worked but we need to make this page dynamic. I remove the current content from the right-column “news” section and paste in:

<?php echo $this->content(); ?>

Forgot the “About Us” page, I want to create a new page.

I’ll call the page test, type some words into the body and select Gongshop – Two Column from the layout dropdown.

This metadata tab seems interesting as well. I’ll have to figure out how to use this information in my layout. For now I’ll keep rolling.

Just click Save & Close and let’s check out the site…

BAM! Done. Let’s keep moving and see about making this navigation dynamically reflect the pages.

The Navigation

Looking back at the default theme “snippets” I found the code to loop through the pages to generate the navigation.

    <ul>
      <li><a<?php echo url_match('/') ? ' class="current"': ''; ?> href="<?php echo URL_PUBLIC; ?>">Home</a></li>
      <?php foreach($this->find('/')->children() as $menu): ?>
      <li><?php echo $menu->link($menu->title, (in_array($menu->slug, explode('/', $this->url)) ? ' class="current"': null)); ?></li>
      <?php endforeach; ?> 
    </ul>

I’m going to make my own snippet and call it “nav”. I copy the foreach loop from above into my new snippet. I can then add this snippet to my layout like so:

<?php $this->includeSnippet('nav'); ?>

Let’s save that up and take a look…

Content Parts

First I’m going to strip out the current homepage and do it up my way. I deleted the content of body and sidebar. The sidebar part is actually what I’m interested in but let’s figure out exactly what’s going on. I’m going to delete the sidebar tab for now.

These icons on the right will let you add and remove tabs.

Now, while you weren’t looking I snuck back to the layouts section and made some changes. I wrapped the “Gong of the Day” sidebar callout (refer to the screenshot at the top of this article if you forget what I’m building) in some PHP. It looks like this:

<?php if ($this->hasContent('gongday')) { ?>
 
<div id="gong-of-the-day">
	<div class="content">
		<h3><span class="hidden">Gong of the day</span></h3>
		<img src="images/the_traditional.jpg" alt="Gong of the day photo" />
		<h4><a href="#">The Traditional</a></h4>
		<?php echo $this->content('gongday'); ?> 
		<p class="read-more"><a href="">read more</a></p>
	</div>
</div>
 
<?php } ?>

Just as it reads: if the layout gets some content named “gongday” then show this bit of HTML and spit in the content in the appropriate spot. Now I can go back to edit the homepage and add a tab called “gongday”.

I’ll throw some text in there and save the page…

and we get some results.

Note: The if statement we used in the layout to determine if gongday hasContent will always return true as long as that tab is there. If you remove the tab, the Gong of the Day callout will disappear.

That’s enough for now. There’s some more I’d like to do with the theme such as have classes dynamically added to the body tag and abstracting the layout further into snippets. I’ll save that for the next part.

Next: Playing with FrogCMS (Part 4: The Theme [continued...])