Creating Themes

Projexr Themes are meant to be just as simple as the CMS. That said, this documentation will cover three basic sections and get you well on your way to creating themes in Projexr.

  1. Building out your HTML and CSS
  2. Theme files and folder shortcuts
  3. Functions, variables and other useful tips

HTML and CSS

Since Projexr is built by developers and designers, for developers and designers, you will need to know HTML and CSS to create a theme. The theme engine does not interpret any code, nor does it fill in any gaps. There is no WYSIWYG interface for creating and designing themes, but we recommend, if you're looking for a how-to with HTML and CSS, you start here (w3schools.com).

Tip: It is recommended that you start your HTML and CSS off in a simple HTML page, this way you can grab pieces that you need for when splitting it up into PHP files for use within Projexr

Theme Files, Folders and Shortcuts

The theme files are not predefined by Projexr, they are however built from core template files that are defined by you, the theme creator. Pretty neat, huh? This way you can name your files whatever you'd like. Each template file should include a header file, a footer file, and can also include other things, such as a sidebar file, widget file, or otherwise.

Index.php (or Home.php) would include a line like so, at the top

<? include(THEMEDIR . "header.php"); ?>

This will include the header.php file into that page. The term "THEMEDIR" is defined by Projexr and it is recommended you use this instead of pathing to it yourself directly. Additionally, if you desire to include a footer file at the end of your template, you should use the following:

<? include(THEMEDIR . "footer.php"); ?>

The same rule applies here with the THEMEDIR variable in this instance as well. Because this is set up where you define what you are including yourself, you can name header.php or footer.php whatever you'd like, and also add additional includes, such as a sidebar.php , to your template at will.

The info.php file

The only requirement Projexr has in terms of file names within themes is the info.php file. Be sure to look at this file in px-default or px-white, the two themes included in the Projexr 1.0r download. This file identifies what files you created for your theme to be used as template pages. In the downloaded examples you will see that index.php and page.php are the two template pages identified in the theme directory.

You can include as many template files as you'd like. We recommend at least two files, one for the home page, and one for subsequent pages. If you're dealing with a three-tier navigation where your sub-sections contain sub-pages, you may want to include a third, such as subpage.php.

Building the Core Template file

Projexr creates an array for you called "$pagedata". This is generated automatically during each page call. Click here to see a list of pagedata information included in the array. Below is a sample of a core template file, named index.php (from the px-default theme)

<? include(THEMEDIR . "header.php"); ?>

    <div id="container">
           <h2 title="<?=$pagedata['title']?>"><?=$pagedata['title']?></h2>
       
        <? getPageContent($pagedata['content']); ?>
       
    </div>

<? include(THEMEDIR . "footer.php"); ?>

Above you'll see a simple function called getPageContent, where it accepts the varable "$pagedata['content']". This variable is loaded upon page request, as previously mentioned, and is required in order for page content to be displayed.

Shortcuts

Your header and footer files may include various links, such as style sheets and JavaScript. Including a stylesheet is pretty straight forward: 

<link href="<?=THEMEURL?>style.css" rel="stylesheet" type="text/css" media="screen" />

If you're including JavaScript files into your theme, you should place them in a folder named "js". Doing so, you can link to those script files using teh following shortcut: 

<script type="text/javascript" src="<?=JSC?>lightwindow.js"></script>

 Additionally, you may also want to include images into your theme pages directly, via HTML. To use the shortcut associated with images, you must place them in the "images" folder within your template directory.

<img src="<?=IMA?>filename.jpg" />

The IMA variable, much like the above noted JSC variable and THEMEDIR variable, include a trailing "/", meaning the path returns something like so : http://sitename.com/themepath/images/

Functions, Variables and Tips

Functions

getPageContent(page) - Calls to and returns the body text for a specific page. This function accepts one variable indicated by the word "page" in brackets above. Refer to the $pagedata array documentation for more information about how to call and use page content and other information.

getNav(x) - Retrieve the website's navigation. You must specify the level in which you are retrieving, indicated by the (x) variable shown. When using this function to return parent (root) level navigation, the function call is as follows:

$nav = getNav(0);

getGoogA() - Return the JavaScript used by Google Analytics. You must include the Google Analytics web site ID provided in their web application in order for this to function. Place the web site ID via the CMS in the "Site Manager" section.

Variables

SITE _URL - Website URL with trailing slash (http://website.com/)

PX_UPLOADS_DIR - Upload directory for including files uploaded via the CMS

PX_UPLOADS_URL - Website URL with appended (px-content/uploads/), trailing slash included.

PXVER - The current Projexr version

JSC - The Theme's JavaScipt folder ("js").

IMA - The Theme's "images" folder.

THEMEURL - Use this for non-include files, such as linking to CSS files, and favicons.

THEMEDIR - For use with include files such as those mentioned above for the header and footer files.

Tips