Useful Resources for sNusers

Print This Page
Pages:  Main  Adding Content  Template Structure  HTML Entity Conversion
Utilities:  HTML Entity Converter
Styles and Designing:  CSS Resource Links
Templates:  sNews Templates
Templates Ported with sNews 1.5-rc3:  GoFlexible
Snews template structure

Template Structure

A close look at index.php

If you've had some experience with larger, more complex open source content management systems, you will have noticed that several of them separate the template or visual theme from the functional components, often with all theme-related files kept within a theme or template folder. Some systems even provide users with the ability to choose a theme from within a member-only control panel, so that the user can view the site in another theme rather than the default theme. Due to its simple structure, sNews 1.4 does not offer such features. Instead, the site's main index.php file doubles as the template file.

One of the promoted features of sNews 1.4 is template independence and, for the most part, this is true. sNews 1.4 comes with a default template integrated into its index.php file. However, in order to keep the sNews engine (snews.php file) as simple as possible, some template styling is added to a few of the functions within it. This has been the case in all versions up to 1.4, mainly because taking the styling out of the functions would just add more complexity to the sNews engine. We'll discuss that further down on this page but first... let's look closer at the index.php file.

The index.php file

This file serves two purposes. It starts out as a normal, HTML page that we would use as index.htm in a static HTML site, and defines what your site will look like. We then add several PHP statements to a copy of index.htm and save it as a PHP file (index.php). The PHP statements we add connect with their respective PHP functions in the snews.php (engine) file, and they display the engine-generated content within the template.

At this point, we'll assume you have installed sNews and have it running, either offline on your own computer (set up as an offline server) or online on your host's remote server. We'll also assume you have a good code editing application as well. It's time to open the index.php file and spend a few minutes getting familiar with how the PHP statements are integrated with the template's HTML code.

PHP Statement Structure

There is far more to understanding how PHP code works in general terms. In this case, we'll only deal with the structure of a simple statement used in the index.php file so you get an idea of how it works. When we add PHP statements to an HTML template, we essentially suspend execution of the HTML script momentarily... start a PHP session... execute the action or function... and close the session so execution of the HTML can continue in proper order. Using the statement shown below as an example, we start with <? to open the PHP session. title() is the name of the function being called from the snews.php (engine) file, and it performs according to the instructions within the title function in snews.php. The semi-colon ; (following the brackets in the function name) closes the end of the statement. And, finally, ?> closes the PHP session in order that the next section of HTML can be read and executed.

<? title(); ?>

Starting the Session

The two lines below are placed at the very top of the file. There cannot be a space or empty line before or above the first line. This starts the server-side (PHP) session and includes the engine file - snews.php. Including this file here makes all of its functions available for all the other PHP statements we use throughout index.php. Your sNews site cannot function without these 2 lines.

<? session_start();
include ("snews.php"); ?>

Page Title

In a traditional HTML page, we would insert the title within title tags in the head section of the HTML code, usually before the Meta tag lines. The title of each page displayed by the sNews engine is automatically generated by the title function in snews.php. To work properly, the PHP statement (below) must be inserted after the last Meta tag line and before the first stylesheet file-path link.

<? title(); ?>

Categories

(lines 19 to 21) The Categories function starts with the Home page and lists all other categories you create. The Create Categories panel is accessible from the Admin menu when you are logged in. As an example, you could create categories in a site about fruits such as - Apples... Oranges... Melons... Grapes.. and so on. When posting articles, you would then choose the category each article gets posted under. In the index.php (default template) that comes with sNews 1.4, the Categories statement (below) is located within a division class that creates a horizontal menu of text-based links. You will notice that this division is also located within the header division... and the horizontal categories menu displays in the top right corner of the blue header block on the page. The styles for all divisions are defined in the styles.css file located in the images folder.

<div class="hmenu">
   <? categories(); ?>
</div>

Left Column Menu Items

The next section displayed below are located on lines 24 to 41 in the index.php file... all within the "left" division that displays its contents in the left side-bar.
menu_items - displays links to the Contact and Archive pages and, when the Admin is logged in, links to the Admin Panels.
searchform - displays the search form for site searches.
left - displays articles posted in the left article position.
new_articles(3) - displays titles of the last 3 articles published. Changing the 3 to 5 would list the last 5 titles.
past_articles(4,3) - displays 3 article titles starting with the 4th title, after the 3 article titles listed under new_articles.

<div class="left">
  <div class="menu">
    <? menu_items(); ?>
    </div>

    <div class="menu">
    <? searchform(); ?>
    </div>
    <div class="left_article">
    <? left(); ?>
    </div>

    <h2>New articles:</h2>
    <? new_articles(3); ?>
    <br />
    <h2>Past articles:</h2>
    <? past_articles(4,3); ?>
</div>

Center Content

(lines 43 to 45) This displays all content that is defined within the center function in snews.php (the engine). This includes all articles posted to the center location, the login panel, contact and archives pages, as well as all the Admin panels. The number 4 within the brackets sets the number of articles to display on the Home page, and it can be changed to more or less if you wish.

<div class="center">
<? center(4); ?>
</div>

Right Content

While this function statement is not used in the default index.php file, you can use it wherever you choose. It is particularly useful for right column articles in a 3-column template, or as an additional position in a 2-column template.

<? right(); ?>

Login Link

(line 50) The login_link is located in the footer section of the web page. It displays the login panel within the center content area, so you can enter your username and password to log in as the Administrator. If you do not wish to have a login link displayed on your site, you can delete this statement from the footer section. You can type the login link manually in your browser address bar and save the URL in your Favorites, then access the Admin Panel using your Favorites link.

<? login_link(); ?>

Creating your own template

Now that we've run through the index.php file, you should have a good idea how placement of the PHP function statements within the template relates to what gets displayed and where. Once you've created an HTML template of your own, copy it to a safe location on your hard drive. Use a copy of it to create a new index.php file, then add in each of the PHP statements where you want them to display in your template. If you have created a new styles.css file to go with your new template file, you'll want to save it in the images folder too.

But... hang on a minute! Before saving your new index.php file and styles.css file... you'll need to re-name the original files in both locations to de-activate them. We need to do this because you can't have 2 files with the same name in the same folder, and we want to keep the original files handy in case we need them. Re-name them simply by adding an XX_ prefix to the file-name. Then save your new files using the same file-names the original files had. Your template should display.