Atlantis v1.1, March 28, 2007

Wordpress Theme: Atlantis

by Matthew Rogers


Table of Contents

Preface: Version history
1. Introduction
2. Installation
3. Customization
    3a. Navigation items
    3b. Color schemes
    3c. Custom schemes
4. Recent update feature
5. Final words

Version History

1.1 - March 28, 2007
- Made compatible with Wordpress 2.1
- Removed calls to specific plugins I had accidentally left in sidebar.php

1.0 - October 30, 2006
- Initial release


1. Introduction

I created this theme when I was looking for a way to distinguish my Wordpress site from most others. This was the first theme I created essentially from scratch. I hadn't done many dark designs before, so I wanted to try that, but I still wanted there to be plenty of color.

As such, you'll find a couple of unusual things in this theme -- custom functions for handling page navigation and the ability to specify color themes for different sections of the site. Read on to understand how to setup these things.


2. Installation

Installation is very much like any other Wordpress theme: just copy the Atlantis folder in its entirety to /wp-content/themes/atlantis, and then select the theme from your Admin->Presentation options.

IMPORTANT!!! Your pages will NOT appear in the navigation system until you set a custom field on those pages, either "mainNav", "topNav", or "bottomNav"! Read on to find out more.


3. Customization

This is where things start to get interesting in Atlantis. I have provided mechanisms to easily customize the look of this theme without editing any code. I do this by making use of post metadata -- those custom fields for each post and page you can edit in the Admin area.

A. Navigation Items

As I stated, the navigation system in Atlantis is a little different than most Wordpress themes. I'll outline each below.

Main navigation strip

For one thing, I don't automatically make every top-level page appear in the upper navigation area. This allows you to create many top-level pages that can referred to in other places, but they don't all have to clutter up your main navigation. To make a top-level page appear along the top tab strip, simply add a custom field called "mainNav" with a value of "true" to that page.

Behavior of side navigation on pages

This is something you can't customize, but I want to explain how it works because it's different from the regular Wordpress functionality. When you are on a static page, a side panel will appear with links to other pages related to that page. If the page you are visiting has one or more child pages, those pages will be displayed, along with a link to go back up one level. If the page you are visiting does not have any child pages, the current page's siblings (pages with the same parent) are displayed. This cleans up navigation a lot when you have many pages. If you don't like it, you can go into sidebar.php and replace my function call with the default Wordpress one.

Bottom navigation strip

This is just like the top nav strip, except it's smaller and more out of the way. It's down in the footer at the bottom (go figure), and you can have any top-level page appear there by adding a custom field called "bottomNav" with a value of "true" to that page. I like this area for things like the About page and Contact page, if you have stuff like that.

B. Color Schemes

Setting the default color

I have included six color schemes with Atlantis: blue (default), red, gray, green, orange, and purple. You can use one throughout your whole site, or you can specify specific color schemes for specific pages (as I did when I used this theme).

To change the default color scheme, open the custom-functions.php file included with this theme. At the very top, you see a line like this:

		define("DEFAULT_COLOR_SCHEME", "blue");
	
You can change that "blue" to be any of the colors I mentioned above. This will then be used on all pages that do not have a custom scheme defined (I'll explain that in a moment).

Setting colors for specific pages

Say you want certain sections of your site to have different color schemes. This is very, very easy to do with Atlantis: just add a custom field called "colorScheme" to the page and set its value to one of the colors I listed (blue, red, gray, green, orange, or purple). Now that page and all pages that inherit from it will have that color scheme (unless you also specify the colorScheme for one of the inherting pages). If you do this to your top-level pages that you have set to appear in the top navigation area, this will also have the effect of creating different colored tabs when you roll over each page.

C. Custom Schemes

Say you don't like the schemes included with Atlantis, or you want a page with a custom header image, or any sort of custom CSS. I make this very easy to do also. Create yourself a CSS file with the definitions you need (refer to any of the color CSS files, like red.css, to see how easy it is to override just the three CSS selectors to make a custom scheme). For example, if you want a custom header graphic (which should be 860 x 64 pixels) for a certain page, just make a CSS file called myCustomHeader.css with the following contents:

		#header {
			background: url("images/banners/my_image.jpg") top left no-repeat;
		}
	
Put my_image.jpg in the Atlantis theme images/banners/ directory, and save your myCustomHeader.css directly in the Atlantis theme directory with all the other CSS files. Now in your Admin panel edit the page you want to apply this to, add a custom field called "customcss", and set its value to "myCustomHeader.css" (or whatever you named your CSS file). That's it! Save it and go to your page to check it out.

Just a note: a page can have "colorScheme" and "customcss" defined at the same time, so if you have a page on which you want to use the "orange" color scheme but want to change the header graphic with a "customcss" entry, you can do that.


Recent update feature

I have a lot of static pages on my site, so many times my visitors would come to my blog and not know that I had added content deep within my Tech section, for example. I wanted to notify them of this, but I didn't want to make a blog post every time I updated a page. So I added a recent update function that checks, obviously, what pages have been updated recently and makes a neat little announcement on the home page if there have been any changes.

By default, this function is set to notify about pages that have been updated in the last week. You can set this timeframe to anything you want, or disable the feature completely, by opening up custom-functions.php and editing this line:

		define("RECENT_UPDATE_TIME", 3600*24*7); 
	
The parameter should be in seconds. Set it to -1 to disable the feature.


Final words

As you can see, I put a lot of effort into making this theme easily customizable for people who don't want to dig into code. I used it for quite awhile on my site with many postive comments and requests for a release. I always said that I would not release this theme while I used it, because I created it for my site to be unique. That will continue to be my policy with my future themes, but once I have created a new one I will always release the previous one. I want to give back to the community as much as I can. If you encounter any bugs or have any questions that are not answered in this README file, please feel free to contact me.

As a final request, I ask that you leave the footer text with the name of the theme and links to my site intact so that people can easily find it if they want to use it too. Thank you, and enjoy!

- Matthew