One Page CMS (Content Management System)

I have written a very simple single page CMS in PHP which allows you to place comment tags in files such as <!--ONEPAGECMS-START-LEFT-COLUMN--> and <!--ONEPAGECMS-END--> and everything in between turns into an editable box. Take a look at this screen shot to see it in action. If you're familiar with FTP and basic HTML editing, it could take only a few minutes to setup. Feel free to download and use or contact me if you have any questions or comments. It now handles images, include files and creating and removing pages. Include files use a new comment tag like <!--ONEPAGECMSINCLUDE-START-MENU--> and allow for some basic templating.

1. Download the file onepagecms.php
Save the file onepagecms.php somewhere on your computer.

2. Change the settings at the top
onepagecms.php has several settings. $ALLOWEDFILES determines which files you can edit. It works on any text files. Examples are *.html for all HTML files in the current directory or array ('about/*.php', 'home/*.php') for PHP files in an "about" and "home" directory. (Warning: if you allow people to edit PHP files, they could insert malicious code and use it to mess about on your server.) The $INCLUDEFILES setting allows selected files to be used as includes (see below). The format is the same as $ALLOWEDFILES. If you specify $BACKUPDIR, then it will create a timestamped backup every time you save a file (unless it's within 5 minutes of the last save). If you specify $IMAGEDIR, then you will be able to upload images to this directory. If you want to use the TinyMCE HTML editor, then set $HTMLEDITOR to a TinyMCE theme like 'modern' or blank to disable. You can also set $HTMLEDITOR to an array such as array ('modern', 'MAIN') which means that only the area labelled MAIN will use the HTML editor and the rest will be normal text boxes. $USERNAME and $PASSWORD can password protect the file.

3. Upload the file to your web site
FTP the file onepagecms.php to your website. Make sure that all the files you wish to edit have the correct permissions (owned by the web site user, or world-writeable). You may also need to create the backup directory onepagecmsbackups and make sure it is writeable.

4. Visit the file in your web browser
Visit http://www.yoursite.com/whatever/onepagecms.php in your browser to check the username and password work, and that it lists all the files correctly. Some web servers don't support this type of authentication, so you may need to remove the $USERNAME and just give onepagecms.php a really hard to guess name like onepagecms8Ua2aAiUFaEf.php as a sort of protection.

5. Alter the files you want to edit
In each file you would like to edit, you have to put comment tags like <!--ONEPAGECMS-START-LEFT-COLUMN--> and <!--ONEPAGECMS-END--> around the editable areas. You can have multiple editable areas per file. Editing is done directly in HTML or using an HTML editor. For example, your file (which could be HTML, PHP, ASP or any text based file) might have something like this to define two editable areas for a left and right column:

<div id="leftcolumn">
<p>This is the editable stuff in the left column</p>

<div id="rightcolumn">
<p>This is the editable stuff in the right column</p>

6. Test the editor
After you've changed and uploaded all your pages to define the editable areas, give it a go. It will throw up warnings if there are any problems with permissions. I hope you find this simple CMS editor useful.

7. Logging out
The best way to log out of the One Page CMS is to close your browser. The log out link provided works, but is a bit flaky, especially if you try to log back in again. Also be sure to tell your browser not to remember your username and password.

8. Create and insert include files
From February 2012 you can also use One Page CMS to manage include files, which allows for a basic type of templating. First create an editable include file as in the step above. This won't be a complete HTML file, just the part you'd like to insert into other pages - such as a menu or footer. For example menuinclude.html might just contain:

<div id="menu">
<li class="home"><a href="index.html">Home</a>
<li class="about"><a href="about.html">About</a>
<li class="contact"><a href="contact.html">Contact</a>

To tell One Page CMS that this is a include you will need to change the variable at the top of onepagecms.php: $INCLUDEFILES = array ('menuinclude.html', 'footerinclude.html');. This will also need to be in your $ALLOWEDFILES. When you edit it, it should say "Editing the include file menuinclude.html".

Then inside the files where the include should appear, insert the new ONEPAGECMSINCLUDE comment. The START line should contain the file name of the include, in upper case, with no directory or file ending. The space between the ONEPAGECMSINCLUDE-START and ONEPAGECMSINCLUDE-END can be empty - it will be filled when the include file is saved. For example, the page below contains two include references and an editable main area:

<title>About us</title>
<body class="aboutpage">
<h1>About us</h1>
<p>This is a paragraph about us.</p>

Some includes, especially menus, will be slightly different on each page. Usually the link to the current page will be highlighted. Although it's a bit of a hassle, this can be achieved only using CSS. If you give a class to the body tag of each page and a class to each menu link (as in the example above), you can use CSS like this:

body #menu ul li {background: white;} /*the default background*/
body.aboutpage #menu ul li.about {background: blue;} /*background of selected page*/
body.contactpage #menu ul li.contact {background: blue;} /*background of selected page*/

10. Skins for the look and feel
From March 2012 you can also add a theme or skin. Simply download the zip file below and unzip in the same directory as onepagecms.php. It will create a directory called onepagecmsskin/ containing a file called styles.css and any additional images. You'll need the latest version of onepagecms.php for this to work.

Download Brian's skin (March 2012)

Download Don's skin (Nov 2013)

If you would like to contribute a new skin, please create your own onepagecmsskin/styles.css and then contact me. I will ask for a zip file and then review it and post it here. Please do not make any changes to the HTML inside onepagecms.php. All the design must be done using only CSS and accompanying images, which means you may have to think creatively about it. Please also prepare a thumbnail screenshot of 150x150 pixels and a bigger screenshot. You must also make sure that the FormLogin page is included in the design. Download a skin above to see how it can be done.

10. Customisations and other features

Editor buttons
You can customise the editor to get the exact buttons you would like. Press "View source" in the full editor for all the options. For example replace the tinyMCE.init line with the following, to just add the link and HTML button to the simple editor.

<script type="text/javascript">
tinyMCE.init ({
	mode : 'specific_textareas',
	editor_selector : 'editor',
	theme : 'advanced',
	theme_advanced_buttons1 : 'bold,italic,underline,strikethrough,|,undo,redo',
	theme_advanced_buttons2 : 'link,cleanup,|,bullist,numlist,|,code',
	theme_advanced_buttons3 : '',
	theme_advanced_buttons4 : ''});

Frequency of backups
If you set $BACKUPDIR, then One Page CMS will make a backup whenever you make a change, but not more than once every 5 minutes. This prevents the backup directory filling up with files when you make lots of tiny changes to a file. However, you can change this $backupminutes variable in the SaveFile function to 0 minutes to save every single change, or to 60 minutes to save less often.

Using a login form
If the login popup box simply doesn't work, or if you prefer it, you can use a login form by using the FormLogin function at the bottom of onepagecms.php (instead of PhpAuthLogin), such as if ($USERNAME) FormLogin ($USERNAME, $PASSWORD);. This uses sessions rather than the browser's built in authentication capabilities, so is a bit less secure perhaps.

Editing the page title
As of 23 June 2010 you can use One Page CMS to edit the page title, by putting the ONEPAGECMS comments around the <title> and <meta> tags. These will bypass the editor and appear as plain HTML in a text area.

<title>My page title</title>
<meta name="keywords" content="my page keywords" />

11. Troubleshooting
These are some common errors you might encounter and what you can do about them:

The username and password doesn't work: Usually, you should get a grey box popup asking for your username and password when you visit One Page CMS. If it absolutely refuses to accept your username and password, then PHP may be running in CGI mode, where this kind of authentication won't work. Instead you can either use .htaccess authentication or use the FormLogin function at the bottom of onepagecms.php (instead of PhpAuthLogin), such as if ($USERNAME) FormLogin ($USERNAME, $PASSWORD);. This will make onepagecms.php use a form and sessions for logging in. In this case, you can also change the logout link to simply onepagecms.php?logout=yes.

Warning: mkdir() [function.mkdir]: Permission denied: This error occurs when One Page CMS tries to create the backups or images directory and can't. The parent directory needs to be writeable and executeable by everyone (or by the web server user).

Warning: fopen(filename.html) [function.fopen]: failed to open stream: Permission denied: This error can happen when you try to save a file or image. You need to make sure the file or image is writeable as above.

Warning: glob() [function.glob]: open_basedir restriction in effect.: This means that your web server has a very restrictive (or secure) setup and so One Page CMS won't be able to list files or edit files. You will need to ask your web host about this one.

It doesn't find or list my files: One Page CMS tries two different methods to find the files you've set in $ALLOWEDFILES: the PHP glob function and then the UNIX find command. If neither of these work, then you probably can't put a wildcard * in the file names for $ALLOWEDFILES. Instead you'll have to list all the files separately in an array. So instead of $ALLOWEDFILES='*.html'; you'll have to put $ALLOWEDFILES=array ('index.html', 'about.html', 'contact.html');.

HTML editor doesn't work - shows up as a text area instead: If TinyMCE doesn't work you can download and use your own copy of TinyMCE from the TinyMCE website, unzip it, and change the line in One Page CMS which refers to the TinyMCE script, to something like: <script type="text/javascript" src="your/path/to/tinymce.min.js"></script>

Notice: Undefined index: REQUEST_URI...: This may happen in older versions or interesting installations of PHP, and may well be related to the error above. You could try turning down error reporting by changing the line towards the bottom of onepagecms.php to: error_reporting (E_WARNING); so it only reports warnings and errors and not notices.

Donations please
This script is provided for free, but donations are welcome to cover the time spent creating and maintaining it: