How to install Fast Edit Mini (or Fast Edit Micro)

A super-simple content editor with a point-and-click toolbar that loads right on the web page you want to edit.

With a small amount of restructuring, Fast Edit Mini 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 don't need/want a full-on CMS
• Webmasters/users who don't need/want multiple editable regions per web page

It would of course be easiest to download Fast Edit Mini 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 Mini up and running as quickly as possible.

• Also see, how to install Fast Edit v1.0
• 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 Mini, otherwise websites with an "index.php" page at their root will have their home page overwritten!

1. First you need to download the Fast Edit Mini zip package, so give the link in the "Previous Versions" panel (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.
    
2. After you've unzipped the Fast Edit Mini package, browse to the "fast_edit/fast_edit_config.php" file and enter your settings.
    
3. Using an FTP client (FileZilla is a good one and it's FREE), upload the entire Fast Edit Mini 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.
    
4. CHMOD the "fast_edit/" folder, plus all of its contents, to 755 (Try 777 if 755 doesn't work).
   At this point, you should be able to view Fast Edit Mini in your browser and login to see it in action.
    
5. Fast Edit Mini works on 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 Mini. 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.
    
6. Now you need to pull out all of the editable content (the stuff you want to edit via Fast Edit Mini) 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 .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".
    
7. 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>

8. 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.
    
9. 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>
   <link rel="stylesheet" href="fast_edit/styles/fast_edit.css" />
   <!--[if IE]><link rel="stylesheet" href="fast_edit/styles/fast_edit_ie.css" /><![endif]--> 

   
   In the "includes/header.html" file - right after the opening <body> tag:

   <div class="admin-login">
       Admin Login: <img src="fast_edit/images/lock.png" alt="Admin Login" class="login">
       <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>

   
   Optional - In the "includes/header.html" file - this is for the menu HTML so put it somewhere in your header content, where you want the menu to appear:

   <?php include('includes/menu.html');?>

   Please note, you will need to code the HTML for the menu yourself.
   
   

   footer.html

   
   In the "includes/footer.html" file - this is to include Fast Edit Mini 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/js/fast_edit_toolbar.js"></script>
   <?php } ?>
   <script src="fast_edit/js/fast_edit_functions.js"></script> 

10. 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');?>
    <!-- put your custom HTML content here -->
        <div class="editable">
           <?php include($contentpage);?>
        </div>
    <!-- put your custom HTML content here -->
    <?php include('includes/footer.html');?>

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...

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 Mini?

If you experience any problems setting up your installation of Fast Edit Mini 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 (not applicable to Fast Edit Micro)

1. If you would like to customise the editor 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.
    
2. "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.