Theme development
In this article, we'll go over the basics of creating a theme for FMS. It covers where your files should be saved, the structure, and the various pages that each theme depends on to work.
NOTE: This is a work in progress. As of December 16th, 2009, it's incomplete at about halfway finished.
Getting started
The easiest way to build a theme is to first design and code how you'd like each page to look. From there, you can split the coding into its separate files and add the special functions that FMS uses to display your content.
All of your theme's files will be saved in /content/themes/name-of-your-theme.
Required files
There are a few files that FMS requires to be considered a functional theme.
- style.css
This style sheet will contain all of the styles for your theme.
- header.php
This file contains the document type, the <head></head> tags, the fms_header() function, and anything you'd like to appear above your content.
- footer.php
This file contains everything you want to appear below your content, and the end of the document.
- index.php
This will be the file that contains the content for the home page of your site.
The "header.php" file
The most important part of the header file is declaring a document type. Without this, the scripts that FMS uses to display your content won't work. There are quite a few different doctypes that you can use; the most common is XHTML 1.0 Transitional, so that's what we'll use for this guide.
Add the doctype to the very beginning of your header.php file. There should be nothing before it, not even white space.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
After the doctype comes the start of the HMTL document, along with the fms_header() function. The fms_header() function contains the scripts and stylesheets that FMS uses to display Fancybox. With it comes jQuery, the Fancybox functions, and the Fancybox stylesheet.
<?php get_style(); ?> will get the stylesheet for the current theme.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php title('Name of your site'); ?></title> <link href="<?php get_style(); ?>" rel="stylesheet" type="text/css" media="all" /> <?php fms_header(); ?> </head> <body>
You can add a navigation menu by using the pages() function. To make styling easier, put it inside a <div> and give that container an ID.
<div id="navigation"> <?php pages(); ?> </div>
The "footer.php" file
The footer file is simple. All you really need to put in it is the close of your body. An optional function is fms_footer(), which will add analytics functions for future plugins.
<?php fms_footer(); ?> </body> </html>
The "index.php" file
This page can contain anything you want. It's your home page, so whatever you add to it will be available when a visitor views http://example.com. Remember, you'll need to call the header.php and footer.php files.
<?php get_header(); ?> <?php page_title(); ?> Add everything you want on your home page <?php get_sidebar(); ?> <?php get_footer(); ?>
Notice the extra function, get_sidebar() and page_title(). The sidebar function is optional for your theme to work; it's simply a sidebar.php file, containing everything you want to display in a sidebar. The page title function prints the title for the current page.
The "single.php" file
This is an optional file. If you use it, FMS will direct all of your custom pages through here, except for http://example.com/layouts and http://example.com/graphics, which are directed through the content.php file.
single.php will in many cases look exactly like the index.php file, but instead of adding everything you want on that page, you only need to call the get_page() function where you want the page's content to be displayed.
<?php get_header(); ?> <?php get_page(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
get_page() will browse the /content/pages directory for the current page, dependant on the URL. For example, if you're at the URL http://example.com/about/site, FMS will look for a file called site.php in the /content/pages/about directory.
When creating pages, you'll need to make new folders in the pages directory if you want extended URLs.
The "content.php" file
This is an optional file. It's used when a visitor browses to http://example.com/layouts and http://example.com/graphics. It's also used if you browse to any extended URLs that begin with "layouts" or "graphics", like http://example.com/layouts/myspace-1.0/nature/trees.
You can tell FMS to display content differently for layouts and graphics by using conditional statements. Remember to call your header and footer files.
<?php // Display content with these options for layouts if($path[1] == 'layouts') { fms_content("parent=$name&list=div"); } // Display content with these options for graphics elseif($path[1] == 'graphics') { fms_content("parent=$name&details=no&limit=20"); } ?>
$path[1] is the first word after your domain in the URL. Likewise, $path[2] would be the second word, $path[3] would be the third word, and so on.
Let's look at the URL http://example.com/layouts/myspace-1.0/nature/trees.
- $path[1] in this URL is "layouts".
- $path[2] is "myspace-1.0".
- $path[3] is "nature".
- $path[4] is "trees".
$name contains everything in the URL starting from "layouts": /layouts/myspace-1.0/nature/trees. If you had your site installed at http://example.com/fms/, then it would still be /layouts/myspace-1.0/nature/trees.
