Advertisement

Building a Blog from Scratch with Frog CMS

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

We tend to cover a lot of CMSs; especially WordPress related material and topics. While WordPress is an absolutely wonderful CMS, there are some other content management systems out there that don't get the credit they deserve. One worth noting is the Frog CMS, an open source simple content management system. From what I can tell, the greatest thing Frog has going for it is its simplicity. It feels blazingly fast and the way everything is organized is very intuitive. Today, we will take an in depth look at getting started with the Frog CMS, as well as building our own blog from scratch.


Final Preview

Final Image Screenshot

View Demo

The above image is a screenshot of what our Frog CMS blog will look like when we are done with this tutorial. Keep in mind we are using the default theme for the time being.


Step 1: Installing Frog

  • As with most popular content management systems, Frog uses a MySQL database to store most of your data. You will need to create a database for your frog install. Be sure to take note of your username, password, and host as you will need this information for the install page.
  • Once you have created your database, download and install Frog CMS somewhere on your server. For this article, our installation will be at http://dev-tips.com/frog_cms/, that is an actual demo page you are free to check out and browse if you wish.
  • After you have uploaded Frog to your server, navigate to the directory you installed it in. Something like yoursite.com/ribbit/

You should be brought to the installation page, where you will fill in all of your database configuration details. See the screenshot below:

install screenshot

Fill in all of the necessary fields and submit the form. If all goes well you will be presented with a username and password. Be sure to carefully note this password and remember to change it once you login! See the screenshot below for the success page.

install success

Now we need to follow the instructions at the bottom of the installation success paged pictured above. Make sure you take the following steps or Frog will disable the blog due to security issues (which is actually an awesome feature).

  • Delete the install folder. The entire folder.
  • Change the permissions (Chmod, you should be able to do this with your FTP editor, in Coda you can right click on the file and click 'get info') on the config file to read only. You will be removing all write permissions, leaving you with a permission number (well, octal) of 444. A screenshot is below to clarify any misunderstanding.
  • Remove any files you don't need such as the changelog.txt and install.txt etc.
  • Navigate to the login page via the link given to you (pictured below).

Pictured above: removing write permissions from config.php

Frog Login Screenshot

Pictured above: Frog login screen.

Go ahead and login, you are done with the install!


Step 2: Learning the Basics

Once you have logged in, go ahead and take awhile to explore the backend of Frog CMS and try to get a feel for how everything works. I think you will be really impressed by the simplicity and flexibility of Frog right off the bat. I'll go over a few terms here quickly to get you used to working with the backend of Frog.

  • Pages: this is where all of your main content will be held, added, and edited. Individual articles are also held here. Don't be confused by this, articles have their own children and are still separated from individual pages. If you want to create a new page, just click the plus Icon under 'Home'. If you want to add a new article, simply press the plus icon by the article sub section.
  • Articles:Like any blog, you can have articles and individual static pages. As discussed above, the articles are actually located under the pages in their own subset. To write an new blog post, just click the plus icon by the articles subset.
  • Snippets: this is one of the features I think makes Frog really great and really simple. Think of snippets as a fancy php include. You created a new snippet, which can contain any kind of markup or language you wish. You can then access this snippet anywhere in your website template by calling $this->includeSnippet('snippet_name');. Later we will look at how to use snippets for our sidebar advertisements.
  • Layouts: think of layouts as WordPress template pages. They define how the content appears and how it is marked up. Just as how you can create a new page template in WordPress, you can pick and create a page layout in Frog CMS. For example, if you had two different static pages, and you wanted completely different styles and layouts between them, you would just create a new layout for one of them and assign it to that page.
  • Files: files is simply where you can find anything located in your public/ folder of the frog install. Things like themes and images.

That should cover the basics enough for us to move on, so lets do so...


Step 3: Adding Some Content

Admin pages

Go ahead and take some time to create some dummy articles and filler content. You can use a site like HTML-ipsum.com to get some filler content. If you were lazy and skipped the part above about creating articles, simply navigate to the backend, click pages, and click the green icon next to the articles subset. You can now publish as many articles as you like. Three or so should do for today.

Sidebar content is located under the 'Home' link found under pages. Click on the home link and you will see a tab that says 'Sidebar'. Click on that tab and you will have a chance to edit or change any sidebar content you wish. Shortly, we will use a custom snippet in the sidebar to display some ads for us.


Step 4: Creating Some Breadcrumbs!

A really nice feature to have on any blog or website is a breadcrumb navigation. This takes away any confusion the user might have and lets them know where exactly they are on your website. Luckily for us, we don't have to add much code at all to get an automatic breadcrumb navigation on every page. We don't even need a plugin!

  • Navigate to the backend of Frog CMS admin panel, and click on 'Snippets'.
  • Here you will find at least two snippets, header and footer. Click on the header snippet to open it up for editing.
  • Simply add the following code echo $this->breadcrumbs(); in between some php tags wherever you wish the breadcrumbs to show up. See below for two example screenshots.
Admin panel breadcrumb

Pictured above: adding our breadcrumb code to the 'header' snippet.

Final breadcrumb

Pictured above: our breadcrumb code in action, working as expected.

You can also pass a separator argument to the breadcrumbs() method if you would like a different separator. And that is all it takes to get a working breadcrumb navigation on your Frog CMS install.


Step 5: Adding Snippets for Advertisements

As we touched on earlier, snippets are great for any short piece(s) of content that are going to be included throughout your website or blog. Say we want to have some ThemeForest and AudioJungle advertising on our website. First we can navigate to the ThemeForest make money page where we can download some 125 by 125 graphics to use for ads. Upload the graphics to your frog install under the public/images directory.

Now we can go ahead and create our snippet. Navigate to the snippets section of the admin panel and create a new snippet called sidebar_ads. Paste or type in the following markup:

<ul>
	<li><a href='#' title='AudioJungle'><img src='http://themeforest.s3.amazonaws.com/100_frog/http://dev-tips.com/frog_cms/public/images/125x125_AJ.jpg' alt='AudioJungle' /></a></li>
	 <li><a href='#' title='ThemeForest'><img src='http://themeforest.s3.amazonaws.com/100_frog/http://dev-tips.com/frog_cms/public/images/TF_125x125.jpg' alt='ThemeForest' /></a></li>
</ul>

Of course you can add any advertisement you wish, this is just for demo purposes. Now we are going to include our snippets where we want them to show up on our site. Obviously, these are going to go in our sidebar. Navigate to the 'pages' section of the admin panel. Click the 'Home" link (or in my case 'Fun with ze frog!' link, as I changed the home links name). Once you have clicked on the Home link, click on the sidebar tab.

Sidebar edit

Now paste the following code and markup wherever you wish your ads to appear in the sidebar:

<hr /><h2>Sponsors</h2>
<div class='sidebar_ads'>
	<?php $this->includeSnippet('sidebar_ads'); ?>
</div>

You'll notice that we have wrapped our snippet in a basic div class, this is to allow for some basic styling, such as removing the list-style-type on the advertisements. Add whatever CSS markup you would like and you have just included your ads on every page via your sidebar and snippets. The great thing about snippets is you can use as many as you like wherever you need them throughout your site.


Step 6: Creating a Sitemap Page for Easy Navigation

On many websites and blogs, it is convenient to provide your users with an organized site map page so they can easily browse any information they are looking for. The Frog CMS makes it really easy for us to do this.

First, we need to create a new Snippet titled sitemap and paste the following code into the snippet:

<?php
function snippet_sitemap($parent)
{
	$out = '';
	$childs = $parent->children();
	if (count($childs) > 0)
	{
		$out = '<ul>';
		foreach ($childs as $child){
			$out .= '<li>'.$child->link().snippet_sitemap($child).'</li>';
			$out.= '</ul>';
			}
	 }
	return $out;
}
?>
<div id="sitemap">
<?php echo snippet_sitemap($this->find('/')); ?>
</div>

	</code>

Now simply create a new page under the 'Home' link by clicking the green icon on the right. Name the page whatever you wish and include the snippet we created above like so:

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

Congrats, you have just created an organized and structured sitemap page in about 30 seconds. You should end up that looks something like the screenshot below:

Sitemap

If you do not want the actual sitemap page to be included on the sitemap, you can set the page to 'hidden' while you are publishing it.


Bonus: Removing the ? From the URL

You may have noticed the question mark that is included on some parts of your URL in your frog install. Personally, it doesn't bother me much, but if you wish to get rid of them, Frog has already thought of an easy solution. Follow the steps below:

  1. Open up the _.htaccess file located in the root of your Frog install.
  2. Change the RewriteBase to the location of your Frog CMS install (i.e /frog_cms/). Screenshots below.
  3. Save and rename the file .htaccess
  4. Open up the config.php file and change the USE_MOD_REWRITE value to true. Save and you're done.
htaccess screenshot

Pictured above: editing the _.htaccess file to our install path.

Mod rewrite screenshot

Pictured above: editing the config.php file.

For more information about removing the ? mark, or if you have any trouble, see the user guide on this topic.


Our Final Product

With those basic steps in place, we were able to create a very basic blog in no time at all. You can check out the final demo of this tutorial here.


Want More?

I have to say, in preparing for this tutorial I was quite impressed by the Frog CMS system. What do you all think? Would you like to see more Frog tutorials in the future, perhaps on the topics of themes? What are your impressions of the From CMS in general? Please let us know in the comments section!

This article was originally posted on the ThemeForest blog. We are currently porting over some of the more popular articles to Nettuts+.

Advertisement