Content Management Systems (CMSs) are pretty self-explanatory: they are dynamic ways of maintaining, displaying and publishing content, and they seek to be intuitive, feature-rich and easy to use. One such a system is GetSimple, a CMS with a tiny zip file-size, and an expansive array of useful plugins to enhance its utility.
Now if you have a site that isn't made up of purely static web-pages, you are going to want to show your visitors flag-points of when certain content was produced or published, and the best way that most CMSs do this is with 'blogging' or 'news publishing' software. There are a number of such plugins available on GetSimple's Plugins Repository, but from what I have tested thus far, long-time plugin developer Mvlcek has produced one of the most extensive and useful plugins for achieving this to date. However some may find it a little difficult to get around, because it is primarily a Search Engine Plugin for allowing visitors to easily search the pages of your site. “How can I turn this into a news module?” you may be thinking. Well, by following these steps, you will have gotten far more out of the plugin than others have described, and with a few tweaks, you can even apply these steps to other forms of text-based content.
What you will need:
- A web provider
- GetSimple (CMS)
- i18n (plugin)
- i18n CustomFields (Plugin)
- i18n Search (Plugin)
- An HTML editor (free/software – Notepad is fine if you have Windows)
Hopefully in reading this, you will already have a web provider that enables you to install GetSimple. They have a fairly extensive installation manual here, so read that to take you through the process. Then download the three plugins above, unzip them to your hard-drive and upload the contents to the /plugins directory of your GetSimple installation. They should be immediately functional if you go to the /admin directory and log in.
One of the cleverest things that the folks at GS have provided is a way of defining your own page fields for when you create pages. This means that you can allocate more page-specific information with certain fields, and this is perfect for distinguishing your normal pages from your news pages. A news page typically allows you to have:
- a space for a summary or excerpt
- a drop-down list of categories of where the item is published to
- who the author(s) are and and
- an avatar to represent the publisher.
So go to your /admin directory and log-in: click on the 'Plugins' tab and on the right hand side, click on 'Configure Custom Fields' and you shall see the following screen:
Configure it to resemble the image below by clicking 'Add new field' for each field illustrated:
- Page Author: You can now name who published the news article.
- Avatar: You can now define a small image to represent the publisher(s).
- Category: You can now select what category the news derives from. Ensure that the very first option is blank, otherwise every new page you edit will inherit the category that is first on the list (so in this case, you want them to be blank unless configured otherwise).
- Excerpt: This will allow you to either show a small piece from the article to display, or simply summarise what is there, giving some key details that may need to be known prior to reading it.
Click on 'Save Custom Fields' and you're done with defining them.
Now comes one of the most crucial aspects of this tutorial. You probably won't want the individual page of the article to look just like every other page on your site. You'll want it to look like a news article page which utilises the above custom defined fields. And you won't want to have those fields output on just a normal, static page, will you? So you need your theme to be set up in such a way that you have a different page-output for news articles.
Note: Back up your theme files in case you make a mistake here.
Open Notepad and save a file named 'news.php' with the .php file extension, and ensure that the file format is correct. Then create more blank files with the following names:
header.php main.php footer.php
If you already have these files (or file-names) as part of your theme structure, don't create them. Using what file manager you can (be it on the web provider or an FTP service), upload them to the directory that your theme is in (normally /theme/YOUR-THEME-NAME). Perform the function of Chmodding the files to be 755 or 0755 (because you'll want to edit them from within GetSimple). Then from your front end in GetSimple, go to the 'Theme' tab, and click on the right hand link that says 'Edit Theme'.
Now on the file 'template.php' (which is labelled 'Default Template' in GS) you'll need to identify what aspects of the code are your HEADER, your MAIN CONTENT and your FOOTER.
<!--[HEADER]-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head> <title><?php get_page_clean_title(); ?> - <?php get_site_name(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?php get_theme_url(); ?>/style.css" rel="stylesheet">
<?php get_header(); ?>
</head>
<body id="<?php get_page_slug(); ?>">
<div id="header">
<ul id="nav"><?php get_navigation(return_page_slug()); ?></ul>
</div>
<!--[/HEADER]-->
<!--[MAIN CONTENT]-->
<div id="main-content">
<h1><?php get_page_title(); ?></h1>
<div id="page-content">
<?php get_page_content(); ?></div> </div>
<!--[/MAIN CONTENT]-->
<!--[FOOTER]-->
<div id="footer">
<?php get_footer(); ?> <?php echo date('Y'); ?> <a href="<?php get_site_url(); ?>" ><?php get_site_name(); ?></a>
<?php get_site_credits(); ?>
</div>
</body>
</html>
<!--[/FOOTER]-->
Select and copy all of the HTML (and or PHP) coding that should be in the header, select 'header.php' from the drop-down menu, hit the 'Edit' button and paste it into that file. Save the changes to that file.
Go back to template.php, then copy all of the coding which should be in the footer, and repeat the above step for footer.php.
Now comes the important bit. Your main.php should include the content features of your normal web-pages. Repeat as you did before, but for the main content. You should have the following at least in this file:
<!--[MAIN CONTENT]--> <div id="main-content"> <h1><?php get_page_title(); ?></h1> <div id="page-content"> <?php get_page_content(); ?></div> </div> <!--[/MAIN CONTENT]-->
Save that. Now go back to your template.php file, and copy-paste this coding to replace what is currently there:
<?php include('header.php'); ?>
<?php include('main.php'); ?>
<?php include('footer.php'); ?>
Save the changes and open the main page of your site. Does nothing look different? No? Good, because it should look just as it did before. If not, you'll need to go back and edit your files until the page looks right.
Now go to 'news.php' and copy-paste the following:
<?php include('header.php'); ?>
<!--[NEWS]-->
<div id="main-content" class="news-article">
<h1><?php get_page_title(); ?></h1>
<div class="author"><?php get_custom_field('author'); ?></div>
<?php if (return_custom_field('avatar')=='') echo " "; else echo "<div class=\"avatar\"><img src=\""; ?><?php get_custom_field('avatar'); ?><?php if (return_custom_field('avatar')=='') echo " "; else echo "\"></div>"; ?>
<div class="category"><?php get_custom_field('category'); ?></div>
<?php if (return_custom_field('excerpt')=='') echo " "; else echo "<div class=\"excerpt\">"; ?><?php get_custom_field('excerpt'); ?><?php if (return_custom_field('excerpt')=='') echo " "; else echo "</div>"; ?>
<div id="page-content"><?php get_page_content(); ?></div>
</div>
<!--[/NEWS]-->
<?php include('footer.php'); ?>
The header and footer will be pulled from those designated files, so the rest of the page will have the general look of the site, but the way the content itself is displayed will be specific to the news article (and it uses the Custom Fields we've defined). You can style the news-specific elements with CSS for the following classes:
.news-article {}
.news-article .author {}
.news-article .avatar {}
.news-article .avatar img {}
.news-article .category {}
.news-article .excerpt {}
.news-article #page-content {}
Now we can move on to how we set up our news pages and publish articles!
Go to the 'Pages' tab and click on the right-hand link that says 'Create Page'. If you haven't done so already, create a parent page for your articles (named 'News' or 'Blog' or whatever parent name you desire) and simply save the page (no need to add in the content just yet). The reason that we installed the main i18n plugin at the beginning is because it allows for more flexibility with defining child/sub pages. With the regular GetSimple install, you can only have two levels of sub-pages, whereas i18n lets you go down as far as you'd like, so that is mainly to let you be free with defining where those pages are housed.
Now create a new page (which will be our news article), and click on 'Page Options'. This is what you should see.
Here is how the page looks after defining all of my fields.
- Page Title: The name of the news item is given after declaring the date that it was originally published - “[DD-MM-YYYY]”. This is to make a distinction between when it was published and when it was edited (and we want this to be displayed as part of the title on the 'News' page, so nobody gets these two dates confused.
- Slug/URL: The date is given first, but in reverse order: yyyy-mm-dd, because we want our articles to be ordered from newest to oldest. The rest of the title succeeds it (and you can give it any relevant name you want – I tend to make it simply the Page Title in lower-case, with URL-friendly characters and hyphens separating the words.
- Tags & Keywords: Just set this as 'news'. Parent Page: Make this the page your articles are the children of. In my case, 'News'
- Template: Set this to the news template we defined earlier – news.php. Page Author: Your name, or whomever you wish to credit for publishing the article.
- Avatar: Not necessary, but you can either paste the URL of your avatar or click 'Browse' and use an image you've uploaded to your own server.
- Category: Give this the relevant category of news your are publishing to.
- Excerpt: Describe a little bit about the article, giving key things that should be known before reading it.
- Page Content: The meat of the page – what news is there to deliver to your audience?
Save the page, then go and edit the 'News' page we created earlier to display this content:
( % searchresults tags:news numWords:50 max:5 showLanguage:0 showDate:0 order:reverseurl HEADER:Updates % )
Note #1: Remove the spaces between the ( and the %.
Note #2: If you don't need to port your news from a previous system, you can change order:reverseurl to order:created to simply order the articles by creation date.
Go preview your news page and see if the link to your article is visible. If so, check the link t osee if it works. Is the content shown on there what you expected? If so, you've succeeded in following this tutorial! To create now articles, simply repeat the process seen from Fig 12.
Thank-you for following this GetSimple tutorial, and hope that it has enhanced your knowledge of (and utility with) this wonderful Content Management System!
Why should I go through all of this just to display news? Can't I just use one of the simpler news publishers available on GetSimple?
Mvlcek's philosophy with GS content is that anything published to pages should be saved within the same file format, and simply labelled or configured to distinguish the differences. By that, he means that a news plugin shouldn't give you a separate space for publishing articles that saves to a separate area within the /data directory. News should be saved like any other page, and it should just be a case of organising this news. Now this comes with only a few difficulties – if you aren't organised, you'll find it pretty hellish to get used to. But by the time you're publishing news, it is a necessary requirement that you have organisation skills. In letting the news article have the same configuration capabilities as any other page, we have so much more control over the way that we display (in addition to name, number and order) the articles, hence we can get it looking exactly the way we want it to. The potency of this plugin far exceeds what many other news publishing GS plugins can do, but in doing so, it sacrifices some of its ease to use.
It has been set up so that it shows 50 words of the main article on the News Page, and outputs the articles in Reverse Slug Order. This means it looks at the names of the Page Slug/URL that you defined, and puts them in reverse alpha-numerical order (hence why we put the year first, then the month, then the day, so that the latest day is shown first). This is particularly good, because you can now accommodate for all of the news you may have on a different plugin, and maintain the original dates that were there. I know that it is annoying converting from one plugin to another and having the dates all messed up, but this solves that problem. It also means that if you edit an entry afterwards, you still have the same order of the articles being displayed (as showing the last-edited article would mean its order is not the publishing order).
Simple answer! Number the article slugs. So if you have 3 posted on the 24th June 2011, the first published one will have the slug “2011-06-24-1-name-of-your-article”, the second “2011-06-24-2-name-of-your-article” and third “2011-06-24-3-name-of-your-article”.
If you have more than 9 posted on a single day, number them with a 0 proceeding the digit if it is a one-digit number (so the first article would be “2011-06-24-01-name-of-your-article”, “second 2011-06-24-02-name-of-your-article”, tenth would be “2011-06-24-10-name-of-your-article”...etc)
And there we have it! If you have any comments to make about changes to the article or things that were unclear/not covered, drop a comment below or in this topic. Thanks for listening!