WebYep installation and web page setup

The underlying intent of WebYep is to make parts of a web page editable for a user. The user could be yourself, wishing to update a website remotely. Or it could be a website you are building on behalf of a client, who wants the freedom to make content edits whenever they want.

There are two main stages towards making a website editable using WebYep. Firstly we need to configure and upload the 'webyep-system' folder, which handles the login and all content edits. Secondly the pages that you want to make editable require some PHP code adding to them.

If you prefer to safely test WebYep without affecting your published website, you can practice installing and configuring WebYep using a test website in MAMP or XAMPP on your computer. This is free software that simulates a web server on your computer.

System requirements

For running WebYep 3, the web server requires a minimum of PHP 8.0.

Quick 10-step setup guide:

  1. If you have not done so already, download WebYep.
  2. Copy the 'webyep-system' folder (contained within the WebYep package) onto your desktop.
  3. Use a code editor to open the file 'config-inc.php' inside the 'webyep-system' folder. In here, you can set a username and password, to be used for the WebYep login. Save the changes when done. See configuration for details of other configurations you can change (like the language).
  4. Move the 'webyep-system' folder into the root directory (public_html or htdocs) of your website, alongside where your homepage index.html or index.php file is. You can do this either using a file manager or your FTP software.
  5. For pages that are to contain pieces of editable content, ensure they have a .php file extension. Use a code editor to add the Init Code to the top of these pages.
  6. Use a code editor to replace exisiting static content or images with WebYep elements These elements are little PHP code snippets that tell WebYep the type of content editor to use and configure some arguments like the encoding type or size of the popup editor.
  7. Add a Logon Button to enable the website author to click and login to make edits.
  8. Save all the changes in your code editor. Open a web browser, and navigate to the page you want to edit with WebYep. Click the padlock icon to login.
  9. In 'edit mode' click on any edit button (denoted with a pen icon) to add or edit content within the popups.
  10. When done editing, click the padlock icon again to commit your content changes and return the web page back to its normal viewing mode.

More about the webyep-system folder

The core of WebYep is a set of PHP scripts contained in a folder named 'webyep-system'. This webyep-system folder must be uploaded onto your webspace (like all other pages/images of your website) - usually into the root 'public_html' or 'htdocs' folder of your website, where your homepage (index.html or index.php) resides.

Important: If you rename a page or move it to another folder, the link between the page and its WebYep data is lost. This is becasue WebYep can only identify a page by its URL (filename and path). But you can fix this, by re-linking the page with its data. To do this, open the file webyep-system/data/documents - a text file, containing pairs of paths and document IDs. Locate the file in question and correct its file or folder name. Save the changes. Then WebYep will find the document's data again.

For example, if you have your page in a subfolder 'new_design' and you want to have it in the root folder, you'd do the following to change this: 

/new_design/index.php 1
/new_design/somePage.php 2
/new_design/anotherPage.php 3
/new_design/about.php 4
To this: 
/index.php 1
/somePage.php 2
/anotherPage.php 3
/about.php 4

Structure of the webyep-system folder

WebYep is a flat-file CMS. It has no database. All the programming code that makes WebYep work and the editable content you create all gets stored within the webyep-system folder. The webyep-system folder is neatly organized as follows.

The 'data' folder should be backed up from time to time (see backup for details).

Verification and diagnostic info

Whether the preparation of WebYep was successful can be verified by calling the WebYep status/info page. This page displays some basic information about WebYep. It also outputs technical details about how PHP is configured on your webserver. You can access this special status page here:
https://example.com/webyep-system/info.php

Type this address into your web browser address bar. Replace 'example.com' with your website domain name and press enter. The resulting page will show what version of WebYep is installed and other useful details, like the version number of PHP the web server is running.

Summary