How to install Fast Edit v1.0

A free and easy CMS to edit your website. It's all "point-and-click"! Includes file manager and page manager with a one-click interface to easily arrange the menu, create and delete pages, make and restore backups, set metadata for search engines, and more! Supports multi-regions too!

With a small amount of restructuring, Fast Edit v1.0 can be installed on any existing website.

Who's it for?

Webmasters with basic-to-intermediate HTML/PHP experience
Webmasters with a website that uses standardised web templates (i.e. - common header and footer files)
Webmasters who do not wish to use, or do not have access to, a database
Webmasters/users who do need/want a fully featured CMS
Webmasters/users who do need/want multiple editable regions per web page

It would of course be easiest to download Fast Edit v1.0 first and then build your site template around it using the example "includes/header.html" file and "includes/footer.html" file as reference, but as that's not always feasible, please follow the steps below to get your installation of Fast Edit v1.0 up and running as quickly as possible.

Also see, how to install Fast Edit Mini
Also see, how to install Fast Edit BE (Snippet Manager)
Also see, compare all versions of Fast Edit
Also see, help me choose the right version of Fast Edit

Warning: Please make a backup of your existing website before installing Fast Edit v1.0, otherwise websites with an "index.php" page at their root will have their home page overwritten!

First you need to download the Fast Edit v1.0 zip package, so give that button at the bottom of the page a click and save it somewhere on your computer. The desktop is a convenient place. Downloads are available when you view the full version of this website on a desktop computer.
After you've unzipped the Fast Edit v1.0 package, browse to the "fast_edit/fast_edit_config.php" file and enter your settings.
Using an FTP client (FileZilla is a good one and it's FREE), upload the entire Fast Edit v1.0 package to the root of your website. Be sure to upload it to the root of your website and not in any sub-folders otherwise some of the scripts won't work. Also be careful to preserve the file structure for the same reason.
CHMOD the "fast_edit/" and "userfiles/" folders, plus all of their contents, to 755 (Try 777 if 755 doesn't work).
At this point, you should be able to view Fast Edit v1.0 in your browser and login to see it in action.
Fast Edit v1.0 works on and creates web pages with the .php extension so if your website pages don't end with that already, rename them all now. Don't worry, on a PHP enabled server, .php web pages containing all your usual HTML will still look the same but they will now be able to run PHP scripts, such as Fast Edit v1.0. You may need to update your hyperlinks though so that's something to check over later down the line. Alternatively, set up 301 redirects using .htaccess.
Now you need to pull out all of the editable content (the stuff you want to edit via Fast Edit v1.0) from each web page and save it in the "fast_edit/_content/" folder, in individual .txt files. This works best if you have the same editable region/div defined in each web page. Create one main .txt file per page and name it exactly the same thing as the parent .php page, except with the .txt extension. So, if the parent page at the root of your website is called "my_pet_cat.php", the editable content file for that page must be called "my_pet_cat.txt".

Please note, once Fast Edit v1.0 is installed, the Page Manager will create new pages in this format for you.

See step 11 for notes on using additional content snippets for multiple editable regions.
In place of the editable content that you've just removed from the parent .php pages, add the following lines of code:
<div class="editable">
<?php include($contentpage);?>
</div>
Tip: You only need to follow steps 8, 9 and 10 if you want to use in-page editing. Skip these steps if you like and just edit your content in the back-end admin panel at "http://www.mywebsite.com/fast_edit/". Additionally, if you plan on running the Page Manager in advanced mode, all steps should be completed.

Now back to the instructions... If your web pages are laid out logically, everything that's above this freshly inserted code (from above) should form your "header.html" file and everything below forms your "footer.html" file. You should extract and save your header and footer information to the similarly named files already provided in the "includes/" folder. You'll be left with a set of pretty sparce .php pages at the root of your website but this is actually correct for now.
Next, you need to add some more code snippets to your site's header and footer files. The code that must be present comes as part of the download pack but is also supplied below:

header.html

In the "includes/header.html" file - right at the start, before anything else (even the DOCTYPE):
<?php session_start();?>
<?php require('fast_edit/fast_edit_login.php');?>

In the "includes/header.html" file - between the <head> </head> tags:
<title><?php echo $dynamic_title;?> : <?php echo $website_title;?></title>
<meta name="keywords" content="<?php echo file_get_contents($meta_keys);?>"/>
<meta name="description" lang="en" content="<?php echo file_get_contents($meta_descs);?>"/>
<link rel="stylesheet" href="fast_edit/editable_site_styles.css" />
<link rel="stylesheet" href="fast_edit/styles/fast_edit.css" />


In the "includes/header.html" file - right after the opening <body> tag:
<?php if ($dynamic_title != "Page Preview") { ?>
<div class="admin-login">
   Admin Login: <span class="login"></span>
   <div class="login-box">
       <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>?action=login">
       Username:<br/><input type="text" name="name" size="15"/><br/>
       Password:<br/><input type="password" name="pass" size="15"/><br/>
       <input type="image" src="fast_edit/images/login.gif" name="submit_login" alt="Login" title="Login" class="login-submit"/>
       </form>
   </div>
</div>
<?php } ?>

In the "includes/header.html" file - this is for the dynamic menu so put it somewhere in your header content, where you want the menu to appear:
<?php include('includes/menu.html');?>

footer.html

In the "includes/footer.html" file - this is to include Fast Edit v1.0 so put it right underneath your editable content. Above the closing </body> tag would be a good place:
<?php include('fast_edit/fast_edit.php');?>

In the "includes/footer.html" file - above the closing </body> tag:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="fast_edit/js/jquery.cookie.js"></script>
<?php if (isset($_SESSION['username'])) { ?>
<script src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<script src="fast_edit/tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/tb_standalone.js.php"></script>
<script src="fast_edit/js/fast_edit_toolbar.js"></script>
<script src="fast_edit/js/jquery.tablesorter.js"></script>
<script src="fast_edit/js/jquery.tablesorter.widgets.js"></script>
<script src="fast_edit/js/jquery.tablesorter.pager.js"></script>
<?php } ?>
<script src="fast_edit/js/fast_edit_functions.js"></script>
<?php if ( (isset($_SESSION['username'])) && ($pager_default_limit != '10') ) { ?>
<script>
    jQuery("#page-list").tablesorter( {sortList:[[0,0],[1,0]], saveSort:true} )
    .tablesorterPager( {container:jQuery(".pager"), savePages:true, size:<?php echo $pager_default_limit;?>, output:'{page} / {totalPages}'} )
</script>
<?php } ?>
Once you've prepared the header and footer information, you should expand slightly on the code supplied in step 7, to include reference to these two very important files. For simplicity, the only content in the parent .php pages at the root of your website should now be:
<?php include('includes/header.html');?>
    <div class="editable">
       <?php include($contentpage);?>
    </div>
<?php include('includes/footer.html');?>
Notice that the only difference is the addition of the first and last line which point to the header and footer files for your site.

But... If you want to go more advanced, you can! Feel free to include custom HTML in the parent .php pages too:
<?php include('includes/header.html');?>

    <div class="editable">
       <?php include($contentpage);?>
    </div>

<?php include('includes/footer.html');?>
If you do include custom HTML content, remember to protect the page in the $page_protect() array in the main config file.
Multi-Regions: That's not all... you can customise parent .php pages with additional editable content snippets too:
<?php include('includes/header.html');?>

    <div class="editable">
       <?php include($contentpage);?>                        
       <?php include($root.'my_pet_cat--grooming.txt');?>    
       <?php include($root.'my_pet_cat--playing.txt');?>     
    </div>

<?php include('includes/footer.html');?>
Additional content snippets must be created manually in the "fast_edit/_content/" folder, and must follow this naming convention;
"main-filename--snippet-name.txt" (e.g. - "fast_edit/_content/my_pet_cat--playing.txt" and "fast_edit/_content/my_pet_cat--grooming.txt"). See the double-dash between the main-filename and snippet-name? That's very important so make sure to include it where stated.

Once the additional .txt files have been created, you'll need to incorporate them back into your web pages using PHP's "include()" command. Please note that they must be included in the parent .php page located in the root website folder, and not in another .txt file stored in the "fast_edit/_content/" folder: <?php include($root.'my_pet_cat--grooming.txt');?>

When snippets are present on a page, a dropdown appears above the Fast Edit editing window where you can choose the region to edit.

With additional editable snippets in place, don't forget to protect the page in the $page_protect() array in the main config file.

That should be it! Now when you view your site in a web browser, you should see the admin login link in the top right corner. Log in and away you go... Alternatively, log in at "http://www.mywebsite.com/fast_edit/".

Remove the login icon from all pages and use an admin login page instead

So you want to stop visitors from clicking on your login icon? This is very easy to fix and you'll find instructions on how to make a dedicated admin login page in the Questions & Answers section. (See the very first question)

Any problems setting up Fast Edit v1.0?

If you experience any problems setting up your installation of Fast Edit v1.0 and you can't find a troubleshooting answer in the Questions & Answers page, please tell me all about it via the online contact form. I'll try and work through things with you, and document the findings on this website. Ultimately your feedback can help future others in a similar situation, so please take a moment to share.

Some other stuff worth noting

As mentioned on the "Features" page, the Template Manager offers the means to edit a custom stylesheet.
This stylesheet can be found at this location in the download pack: "fast_edit/editable_site_styles.css".
Please populate this file with the non-critical CSS that you wish to be editable via Fast Edit v1.0.
If you would like to customise the editor's WYSIWYG toolbar, you can do so in the "fast_edit/js/fast_edit_toolbar.js" file. Please refer to the TinyMCE examples page for all available options.
"h1.title" and "h2.sub-title" are custom classes assigned by the [Title] and [Sub-Title] buttons in the editor's WYSIWYG toolbar. Styling for these two classes must be included in your default site stylesheet, otherwise the end-user won't be able to create main or sub-titles/headings in their web page content.
The File Manager (file browser) uses a third party plugin called TinyBrowser, which may need additional configuration to make it work fully. The most important settings are the file upload paths and file link paths in the "fast_edit/tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/config_tinybrowser.php" file. These must be set correctly to make uploads save to the right folders, and link addresses transfer properly to your HTML web page content. Please refer to the Questions & Answers page for troubleshooting advice.
If you've installed Fast Edit on a local WAMP (or similar) server to test on your own computer, you will need to update sprite image paths in the "fast_edit/styles/fast_edit.css" stylesheet to get the icons to show. Find "background:url(/fast_edit/images/sprites.png) 0 0 no-repeat;" and replace it with "background:url(/mytestfolder/fast_edit/images/sprites.png) 0 0 no-repeat;". Also update the path in the "fast_edit/js/fast_edit_toolbar.js" file.

Last updated: July 3rd, 2015