Getting Started - PHP Guide Go to HTML Guide

Overview, structure and usage.

  1. Overview
  2. Structure
  3. Layout & Menus
  4. Scripts
  5. Skins

1. Overview

Social Admin Template includes a simple PHP version that exposes a basic templating system with a main bootstrap file, header, footer, pages & sub-pages. The PHP version can also handle dynamic loading of skins and assets and includes a php menu builder.

Requirements:

Setup:

  1. Unpack the downloaded package from themeforest in your webserver root directory eg. /Applications/MAMP/htdocs
  2. Load the php version in your browser at http://localhost/your_app_folder/php/admin
  3. Enjoy the Social Admin Template PHP version.

2. Structure

A breakdown of the php folder structure:

social_admin_template/
    │
    └── admin
    │   │ // Static resources loaded through AJAX
    │   ├── ajax/
    │   │
    │   │ // All template configurations
    │   ├── config/
    │   │   │
    │   │   │ // The main configuration file.
    │   │   │ // Includes sestting for: Error Reporting, Paths, Timezone
    │   │   ├── config.app.php
    │   │   │
    │   │   │ // Skin colors.
    │   │   ├── config.colors.php
    │   │   │
    │   │   │ // Menu Builder configuration
    │   │   ├── config.menus.php
    │   │   │
    │   │   │ // Scripts loaded on each page.
    │   │   └── config.scripts.php
    │   │
    │   │ // Custom content used by the menu builder within the generated sidebar.
    │   ├── menus/
    │   │
    │   │ // All template pages and subpages
    │   ├── pages/
    │   │
    │   │ // Main bootstrap file
    │   ├──  index.php
    │   │
    │   │ // Template Header
    │   ├──  header.php
    │   │
    │   │ // Template Footer
    │   └── footer.php
    │
    ├── assets/
    │   └── // Please reffer to the HTML Getting started guide
    │
    └── library/
        │ // Menu Builder Library
        └── class.Menu.php

3. Layouts & Menus

Header

Include this in every page of your site

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7 paceCounter paceSocial sidebar sidebar-social footer-sticky"> <![endif]-->
<!--[if IE 7]>    <html class="ie lt-ie9 lt-ie8 paceCounter paceSocial sidebar sidebar-social footer-sticky"> <![endif]-->
<!--[if IE 8]>    <html class="ie lt-ie9 paceCounter paceSocial sidebar sidebar-social footer-sticky"> <![endif]-->
<!--[if gt IE 8]> <html class="ie paceCounter paceSocial sidebar sidebar-social footer-sticky"> <![endif]-->
<!--[if !IE]><!-->
<html class="paceCounter paceSocial sidebar sidebar-social footer-sticky">
<!-- <![endif]-->
<head>
    <title>Social Admin Template</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <!-- COMPLETE STYLESHEET -->

    <!-- PHP SKIN LOADER  -->


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- PHP HEADER SCRIPT LOADER -->

    <script>if (/*@cc_on!@*/false && document.documentMode === 10) { document.documentElement.className+=' ie ie10'; }</script>

</head>
<body class=" menu-right-hidden">

    <!-- Main Container Fluid -->
    <div class="container-fluid menu-hidden ">

    <!-- SIDEBAR MENU -->
    <div id="menu" class="hidden-print hidden-xs sidebar-default sidebar-brand-primary">
        <div id="sidebar-social-wrapper">
            <div id="brandWrapper">
                <a href="<?php echo getURL(array('page'=>'index')); ?>><span class="text">Social Admin Template</span></a>
            </div>
            <ul class="menu list-unstyled">
                <!-- PHP MENU LOADER -->
                <?php Menu::make($config["menu"]["admin"], $page, $module); ?>
            </ul>
        </div>
    </div>

    <!--  RIGHT SIDEBAR CHAT  -->

    <!-- Content START -->
    <div id="content">

        <!-- NAVBAR -->
    

Pages & Footer

Automatic Page Loader:

The template system can handle the loading of pages from the admin/pages/ directory and sub-pages from the admin/pages/<page-name>/<subpage-name>.php. The page name is read within the global $_GET['page'] request variable and the sub-page from $_GET['section'].

Footer:

        </div>
        <!-- // Content END -->

        <div class="clearfix"></div>
        <!-- // Sidebar menu & content wrapper END -->

        <!-- Footer HTML Markup-->

    </div>
    <!-- // Main Container Fluid END -->

    <!-- Required JavaScript Global Variables -->

    <!-- PHP FOOTER SCRIPTS LOADER -->

</body>
</html>

Menu Builder Configuration

The sidebar menu is being generated from the /config/config.menus.php configuration file.

$config['menu'] = [

    // ADMIN IS THE MODULE NAME - see index.php
    'admin' => [

        // REGULAR MENU
        array(
            'label' => 'Dashboard',
            'icon' => 'fa fa-group',
            'page' => 'index'
        ),

        // MULTILEVEL MENU
        array(
            'label' => 'Overview',
            'icon' => 'fa fa-home',
            'badge' => [
                'label' => '2',
                'class' => 'badge-primary'
            ],
            // LEVEL ITEM
            'page' => [
                array(
                    'label' => 'Analytics',
                    'icon' => 'fa fa-rss',
                    'page' => 'index'
                ),
            ],
        ),

        // INCLUDE CUSTOM MARKUP
        array(
            'label' => 'Custom HTML',
            'class' => 'reset',
            // THE PATH TO FILE MUST BE LOCATED IN ADMIN/MENUS/
            'file' => 'path_to_file.php'
        ),
    ],

];

4. Scripts

JavaScript files are loaded dynamically by PHP on a per page basis. The required scripts for each page are defined within the config/config.scripts.php configuration file, explained below.

Header Scripts Loader:

This is located in the admin/header.php file. See the PHP HEADER SCRIPT LOADER comment within the header template above.

<?php
foreach ($scripts as $id => $script)
{
    $sections = !empty($script['sections']) && !empty($script['sections'][$page]);
    $inPages = in_array($page, $script['pages']);
    $inSections = !$sections ? false : in_array($section, $script['sections'][$page]);

    if ($script['header'] && ((!$sections && $inPages) || ($sections && $inSections)))
        echo '<script src="' . $script['file'] . '"></script>' . "\n\t";
}
?>

Footer Scripts Loader:

This is located in the admin/footer.php file. See the PHP FOOTER SCRIPTS LOADER comment within the footer template above.

<?php
foreach ($scripts as $id => $script)
{
    $sections = !empty($script['sections']) && !empty($script['sections'][$page]);
    $inPages = in_array($page, $script['pages']);
    $inSections = !$sections ? false : in_array($section, $script['sections'][$page]);

    if (!$script['header'] && ((!$sections && $inPages) || ($sections && $inSections)))
        echo '<script src="' . $script['file'] . '"></script>' . "\n\t";
}
?>
The $scripts variable used in both the above code samples is declared in the config/config.scripts.php file and is globally available within any template file.

5. Skins

The PHP version includes 22 ready skin files, which are located within the assets/css/skins/ directory. These files can be loaded automatically by reading the global $_GET['skin'] variable within the following code sample that resembles a simple PHP skin switcher.

This is located in the admin/header.php file. See the PHP SKIN LOADER comment within the header template above.

<?php

$skin = isset($_GET['skin']) && $_GET['skin'] !== 'style-default' ? $_GET['skin'] : false;

if ($skin)
    echo '<link href="' . ASSETS_PATH . '/css/skins/module.' . $module . '.stylesheet-complete.skin.' . $skin . '.min.css" rel="stylesheet" />';
else
    echo '<link href="' . ASSETS_PATH . '/css/' . $module . '/module.' . $module . '.stylesheet-complete.min.css" rel="stylesheet" />';

?>