Getting Started

Themes & Styling

Page Management

FolioPages CMS

An open source content management system to build websites
free, self hosted, lightweight and easy to use

Download Demo Support


Foliopages was built using a server with the following specs:
  • Apache 2.4
  • PHP 7.2
  • MariaDB 10.4 + PDO
  • PHP GD library (for FolioGallery)
  • jQuery javascript library 3.4+ (required mostly for the editor)


  1. Download and unzip the FolioPages package.
  2. Create an empty database for FolioPages on your web server. The database must have a user with all privileges.
  3. Copy "includes/db-connect-default.php" to "includes/db-connect.php".
  4. Edit "includes/db-connect.php" file and enter your database information.
  5. Upload FolioPages files to your server.
  6. Visit install.php in a web browser where you uploaded the files and follow instructions, ie.
  7. !IMPORTANT after installation is complete, delete the install.php file from your server.

Setting Up SMTP

  1. If you want your website to send out emails, copy "includes/smtp-default.php" file to "includes/smtp.php" and edit this file with your SMTP server credentials.
  2. This file is used by PHPMailer plugin to send out system emails. Skip this step if you do not wish to receive any system mail.

File and Directory Structure

First level directories on root:
  • cp - most admin files
  • images - user avatars and website logo images, requires write permission
  • includes - config files
  • plugins - integrated plugins
  • PHPMailer - open source software that sends out email using smtp
  • themes - each theme is a subfolder in this directory
  • uploads - all files/folders uploaded using the builtin file manager go here, requires write permission
Main configuration files
  • .htaccess - configuration file for Apache web server.
  • includes/required.php - main file that holds all required files.
  • includes/config.php - important settings for advanced users.
  • includes/db-connect.php - credentials for connecting to database.
  • includes/functions.php - most php functions are located in this file.
  • includes/language.php - holds icon variable and messages for system actions.
  • includes/smtp.php - used for configuring an smtp server to send out system emails (ie. during user signups).


FolioPages includes builtin plugins in the "plugins" directory. You can modify the existing ones or create your own if you are familiar with PHP and MYSQL/MariaDB. To write your own plugin, create a php file within the plugin's directory named "register-plugin.php" and place your code within this file. See "plugins/hello" in the package for shortcode example.


A slide is a block of content that can be added from the "Slides" section of admin dashboard. The purpose of a slide is to be able to re-use the same content in various pages without repetition. Simply create a slide and paste its shortcode into a page where you want it to appear. Creating a slide is much like creating a page, only with fewer options. If you want to make the slide scrollable horizontally, add more than one block of content to it. Each slide can be given a unique class name, which can be styled from the theme's CSS file.

File Manager

The builtin file manager enables creating local folders and uploading files to them. The file manager is also integrated with the editor and can be used to insert images into the WYSIWYG editor directly. You can paste a shortcode into a page to display a gallery or album from existing folder(s). The gallery shortcode is located at the top of each folder in file manager. Please refer to Shortcodes section in this page for more details.

Menu Builder

  • A menu builder is included in admin's dashboard.
  • Each menu item can be a URL (entered manually) or can have sub-menu items from existing pages or custom URLs.


User sign up can be enabled or disabled. The reason you may want to enable user sign up might be to:
  • Limit access to certain page(s) to registered users only.
  • Accept comments from signed in users only, although anonymous commenting can be turned on for desired pages.
  • Send private messages to your users.
  • Grant admin or editor userlevels to certain users.
  • Administrators can have access to content, settings and user permissions.
  • Editors can add/edit pages and do not have access to user data or website configuration elements.
  • Page comments can only be moderated by an administrator or the author of the page.

Theme Structure And Styling

Each theme is a sub-directory within the "themes" directory.
To create your own theme:
  1. Create a sub-folder in "themes" directory, for example "mytheme".
  2. Copy content from the default theme "foliopages" to "mytheme".
  3. Visit the settings page in the admin section and select "mytheme" as the active theme.
  4. Modify file(s) in "mytheme" sub-folder to your liking.
Unless you want to modify the underlying code, all you need to do to style your theme is to modify "css/style.ccs" file located in your active theme directory.

Page Structure

	  <a class="site-logo">
	  <a class="site-logo-text"> 
		 <aside class="left">
		 <aside class="right">
			<div class="head-section">
			   <div class="head-subsection">
			<div class="content">

Category Page CSS Classes

.article-list .list-item{}
.article-list .list-item .thumb{}
.article-list .list-item .text{}
.article-list .list-item .text-fw{}
.article-list .list-item .fade{}
.article-list .list-item .bottombar{}
.article-list .list-item .bottombar .box-left{}
.article-list .list-item .bottombar .box-right{}

Slide CSS Classes

.sliderotator .mainslide{}
.sliderotator .mainslide .textcontainer{}
.sliderotator .mainslide .textcontainer-inner{}

Plugin CSS Classes

Each Plugin has either its own CSS file located in the its direcoty or is styled from the "cp/css/style.css" file, which also holds other classes used in the dashboard section.

Styling Elements in a Page

  1. Edit a page and assign a unique class to it.
  2. Style elements under this class in active theme's CSS file.
For example, assign "mystyle" class to a page, then modify desired elements in this page under this class.

As an example the following elements:
Can be styled like so:
.mystyle article{
.mystyle .article-list{

Page Management

Add/Edit a Page

  1. Login to dashboard as an administrator or editor.
  2. Click the "New Page" button at the top.
  3. Enter a title for your page and proceed to edititng the page.
  4. To edit an existing page, in dashboard click on desired page from the list and proceed.

Page Elements

The following elements or features can be enabled/disabled or configured in a page. Each element is either self explanatory or has an info icon for more details:
  • Page Title.
  • Page Alias.
  • Page Content editor - for docs refer to Trumbowyg.
  • Page Title Tag.
  • Page Meta Tags.
  • Publish checkbox.
  • Visible To Public checkbox.
  • Show Share Icons checkbox - displays contents of share-icons.php file, which must be edited manually.
  • Show Title Details checkbox - shows/hides page title, date, author at the top of the page.
  • Sort Order - page order when list of pages are displayed in a category.
  • Page Class box.
  • Page Categories checkboxes.
  • Enable comments and other comment variable checkboxes.
  • Page Authors box.


  • [siteurl] - Enter this shortcode in the editor as the URL of website.

  • [pageslide id=SLIDE_ID] - Displays a slide in a page. Replace SLIDE_ID with the id of the slide you want to display. Find shortcode for each slide in "Slides" section of dashboard.

  • [foliogallery id=ID_OF_FOLDERS] - Displays folder contents as a gallery or album in a page. Replace ID_OF_FOLDERS with id(s) of folder(s) you want to embed. For multiple folders replace ID_OF_FOLDERS with comma separated ids of folders. Find ID for each folder in "Files" section of dashboard.

  • [pagelist cat=CAT_ID limit=NUM] - Displays a list of pages within a category. Replace CAT_ID with the category ID and NUM with number of pages you wish to display. Replace NUM with 0 for unlimited number of pages. Find category ID in "Categories" section of dashboard.
    TIP: to display pages in specific order, edit the page and enter desired order in the "Sort Order" box.