Install the PHP Theme
Overview
The PHP theme package contains all the necessary assets required to apply the IASTATE Theme to websites. The IASTATE PHP Theme package includes the following files:
iastate/
|-- public/
| |-- css/
| | '-- iastate.css
| | '-- iastate.legacy.min.css
| | '-- iastate.min.css
| '-- js/
| '-- iastate.js
| '-- vendor/
| '-- bootstrap-submenu.min.js
| '-- bootstrap.min.js
'-- src/
'-- Theme.php
iastate.csscontains all theme-specific and customized Bootstrap CSS, expanded. This file is provided as a CSS reference.iastate.min.csscontains all theme-specific and customized Bootstrap CSS, minified. This is the default CSS file used by the theme.iastate.legacy.min.csscontains all theme-specific CSS from the previous theme, minified. This is is provided as a stop-gap for sites to use the new theme without breaking content formatted with CSS from the previous theme.iastate.jscontains theme-specific JavaScript.bootstrap-submenu.min.jscontains Bootstrap Submenu library JavaScript.bootstrap.min.jscontains Bootstrap Submenu library JavaScript, minified.Theme.phpdefines theIastateTheme\Themeclass containing the core templating functions, markup, and configurations for the IASTATE Theme.
Installation
Let's say your web server uses the /mysite/www/ directory as its document root. We will install our theme package in /mysite/ and write an additional file to customize the theme for your site. Then we will learn how to use this theme class from an individual page to render the ISU Template.
Your document root is used to serve up webpages and is the directory users see when viewing your site from a browser. This directory could be named public_html, public, web, www, etc. depending on your server.
So, to start out we assume your server looks something like this:
mysite/
'-- www/ # Let's assume "www" is your document root
|-- css/
'-- index.php
Once we are done, the server should look like this:
mysite/
|-- autoload.php [4]
|-- src/
| '-- IastateTheme/
| '-- Site.php [3]
|-- vendor/
| '-- iastate/ [1]
| |-- public/
| | |-- css/
| | | '-- iastate.css
| | | '-- iastate.legacy.min.css
| | | '-- iastate.min.css
| | '-- js/
| | '-- iastate.js
| | '-- vendor/
| | '-- bootstrap-submenu.min.js
| | '-- bootstrap.min.js
| '-- src/
| '-- Theme.php
'-- www/
|-- iastate/ [2]
'-- index.php [5]
PHP Theme Package
Place the PHP theme package (iastate/) in the vendor/ directory in your site root.
The vendor/ directory contains third party code. Packages are namespaced to ensure we don't cause conflicts with other libraries.
Please do not modify any of the package contents. This will ensure you can update the package later on without causing any conflicts.
Public Assets
Create a symlink for the public assets:
/mysite/vendor/iastate/public/to/mysite/www/iastate
Note: Please do not modify any of these assets. Make sure to replace them with the newer versions when you update the package.
You can isolate all theme specific assets into one place by using the theme_asset_path option. Create a symlink to the theme's public/ directory from your document root and then change the theme_asset_path option to point to this directory.
Site Theme Configurations
Create /mysite/src/IastateTheme/Site.php with the following site configurations; then modify, add, or remove options as they apply to your site. This is the file that will contain the configuration options specific to your site.
<?php
namespace Site;
class Theme extends \IastateTheme\Theme
{
public function init()
{
$this->setOptions([
'theme_asset_path' => '/iastate',
'site_title' => 'Department of Lorem Ipsum',
'site_links' => [
[
'label' => 'Contact',
'uri' => '/contact',
],
[
'label' => 'Events',
'uri' => '/events',
],
[
'label' => 'News',
'uri' => '/news',
],
],
'navbar_menu' => [
[
'label' => 'About',
'uri' => '/about',
'showchildren' => true,
'pages' => [
[
'label' => 'Level 2 Page',
'uri' => '/about#1',
],
[
'label' => 'Level 2 Submenu',
'uri' => '/about#2',
'showchildren' => true,
'pages' => [
[
'label' => 'Level 3 Page',
'uri' => '/about#3',
],
[
'label' => 'Level 3 Submenu',
'uri' => '/about#4',
'showchildren' => true,
'pages' => [
[
'label' => 'Level 4 Page',
'uri' => '/about#5',
],
[
'label' => 'Level 4 Page',
'uri' => '/about#6',
],
],
],
],
],
],
],
[
'label' => 'Research',
'uri' => '/research',
],
],
'show_page_title' => false,
'footer_associates' => [
[
'label' => 'College of Nimbus Sans',
'url' => '//cdn.theme.iastate.edu/nimbus-sans',
],
[
'label' => 'Department of Lorem Ipsum',
'url' => '//sample.theme.iastate.edu',
],
],
'footer_contact' => [
'address' => [
'2221 Wanda Daley Dr',
'Room 2922',
'Ames, IA 50011',
],
'emails' => [
'theme@iastate.edu',
],
'phones' => [
'515-294-6654',
],
'faxes' => [
'515-294-6654',
],
],
'show_social_labels' => true,
'footer_social' => [
[
'label' => 'Facebook',
'url' => 'http://facebook.com/IowaStateU/',
],
[
'label' => 'Twitter',
'url' => 'http://twitter.com/iowastateu?lang=en',
],
[
'label' => 'Instagram',
'url' => 'http://instagram.com/iowastateu/',
],
[
'label' => 'YouTube',
'url' => 'http://youtube.com/user/iowastateu',
],
[
'label' => 'RSS',
'url' => 'http://www.news.iastate.edu/rss/rss.php',
],
],
'footer_legal' => [
'statement' => 'Copyright © 1995-2015<br>
Iowa State University of Science and Technology<br>
All rights reserved',
'links' => [
[
'label' => 'Non-discrimination Policy',
'url' => 'http://www.policy.iastate.edu/policy/discrimination',
],
[
'label' => 'Privacy Policy',
'url' => 'http://www.policy.iastate.edu/electronicprivacy',
],
[
'label' => 'Digital Access & Accessibility',
'url' => 'http://digitalaccess.iastate.edu',
],
],
],
]);
}
}
This will be our custom theme class. We will be using this class to render all our pages.
The src/ directory will contain code written by you. Again, packages are namespaced to ensure we don't cause conflicts with other libraries. The namespace is used as the directory name and the file is named the same as the class name.
There are quite a few more configuration options. Documentation will be forthcoming. However, in the mean time, most config options that can be overridden can be seen in the configuration section of Theme.php.
Autoloader
Create /mysite/autoload.php with the following to load the necessary classes from each package:
<?php
require 'vendor/iastate/src/Theme.php';
require 'src/IastateTheme/Site.php';
You must include this file before you can use any of the classes.
Render Theme
Create /mysite/www/index.php with the following to use the theme:
<?php
require '/mysite/autoload.php';
$theme = new Site\Theme('Hello world!');
$theme->drawHeader();
?>
<p>Hello world!</p>
<?php
$theme->drawFooter();
Now you can visit this page from your browser and see the theme in action.