Header.php Example.
Permalink 2 users found helpfulThis is for the folks who are learning how this stuff works, and who would like to see how your header.php might all fit together when you are finished. I have also commented the different blocks of code.
My example has some basic logic in it, and you can feel free to copy and reuse this, because I have mostly gotten my snippets from this very forum. For the HTML I am using an abbreviated version of blueprint, so for instance instead of span-* classes, I changed everything to single letters, like s24, etc. The HTML isn't really important here, though. I just want to show how you would go about integrating all that PHP you have been gleaning from the forums into a header.php include.
Comments are welcome, especially from folks who actually know PHP (I am still learning!) :-D
My header.php example has no issues with dependencies, or the like. Everything works good. Have fun!
<?php //Only need to define this stuff once: defined('C5_EXECUTE') or die("Access Denied."); global $c; global $cp; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/print.css" type="text/css" media="print" /> <!--[if lt IE 8]><link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]--> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath() ?>/main.css" /> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css') ?>" /> <?php

I am not sure if it has any benefits but appears in more of the newer documentation, and it does create $c as the global variable.
Using global $c is for being lazy haha
kiss.php makes all my variables, and lines em up real nice:
<?php //PS, this function simply appends a newline character to each string you echo with it, so the output is easier to read. function echoNL($str) { echo ($str . "\n"); } //OBJECT VARIABLES defined('C5_EXECUTE') or die("Access Denied."); $c = Page::getCurrentPage(); $cp = new Permissions($c); $u = new User(); $html = Loader::helper('html/v2'); $pageName = $c->getCollectionName(); $pageHandle = $c->getCollectionHandle(); $pageID = $c->getCollectionID(); $themePath = $this->getThemePath();
Then we have the header.php, which includes kiss.php, and then uses all the variables in an easy to read way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <?php defined('C5_EXECUTE') or die("Access Denied."); include('kiss.php'); Loader::element('header_required'); echoNL($stylePrint); echoNL($styleMain); echoNL($styleTypography); echoNL($styleIELT8); if ($headerBar) { echo $styleInterface; } if ($notEditMode) {
You may have notice that one of my css includes is a php file. Well, I have successfully managed to get LESSphp working well, in the theme, with no concrete5 mods.
This is the way I did it.
First we set up our folder structure.
We start from the root of your theme folder, and get these files together:
/less lessc.inc.php main.less screen.less styles.php /tmp
Then, we set up a simple (for some people anyways...I am a long way from knowing how to code this myself! :-D) cacheing script for LESSphp:
<?php //put this code inside style.php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler"); } else { ob_start(); } $LESSfiles = array( 'screen.less', 'main.less' ); $time = mktime(0, 0, 0, 21, 5, 1980); $cache = 'tmp/cache.css'; foreach ($LESSfiles as $file) { $fileTime = filemtime($file); if ($fileTime > $time) {
Then we simply call the style.php in a regular css header link. Note, I got this cacheing script from a tutorial website, but it has no strings attached, so have fun!
IN header.php
include(kiss_functions.php); include(kiss_variables.php);
IN footer.php
include(kiss_variables.php);
That way I can still use the variables declared in kiss in the footer.php file without getting a warning about re-declaring the functions.
I am not too concerned about the editor warnings to redeclare stuff, unless I should be?
<?php function minifyCSS($css){ $css = trim($css); $css = str_replace("\r\n", "\n", $css); $search = array("/\/\*[^!][\d\D]*?\*\/|\t+/","/\s+/", "/\}\s+/"); $replace = array(null," ", "}\n"); $css = preg_replace($search, $replace, $css); $search = array("/;[\s+]/","/[\s+];/","/\s+\{\\s+/", "/\\:\s+\\#/", "/,\s+/i", "/\\:\s+\\\'/i","/\\:\s+([0-9]+|[A-F]+)/i","/\{\\s+/","/;}/"); $replace = array(";",";","{", ":#", ",", ":\'", ":$1","{","}"); $css = preg_replace($search, $replace, $css); $css = str_replace("\n", null, $css); return $css; } if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler");
<?php function minifyCSS($css){ $css = trim($css); $css = str_replace("\r\n", "\n", $css); $search = array("/\/\*[^!][\d\D]*?\*\/|\t+/","/\s+/", "/\}\s+/"); $replace = array(null," ", "}\n"); $css = preg_replace($search, $replace, $css); $search = array("/;[\s+]/","/[\s+];/","/\s+\{\\s+/", "/\\:\s+\\#/", "/,\s+/i", "/\\:\s+\\\'/i","/\\:\s+([0-9]+|[A-F]+)/i","/\{\\s+/","/;}/"); $replace = array(";",";","{", ":#", ",", ":\'", ":$1","{","}"); $css = preg_replace($search, $replace, $css); $css = str_replace("\n", null, $css); return $css; } if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler");
In the futureI will try to make it so that it will also concatenate the header css files like all the view.css files that are included by default, but I don't know how yet. :-(
<?php function minifyCSS($css) { $css = trim($css); $css = str_replace("\r\n", "\n", $css); $search = array("/\/\*[^!][\d\D]*?\*\/|\t+/", "/\s+/", "/\}\s+/"); $replace = array(null, " ", "}\n"); $css = preg_replace($search, $replace, $css); $search = array("/;[\s+]/", "/[\s+];/", "/\s+\{\\s+/", "/\\:\s+\\#/", "/,\s+/i", "/\\:\s+\\\'/i", "/\\:\s+([0-9]+|[A-F]+)/i", "/\{\\s+/", "/;}/"); $replace = array(";", ";", "{", ":#", ",", ":\'", ":$1", "{", "}"); $css = preg_replace($search, $replace, $css); $css = str_replace("\n", null, $css); return $css; } if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler");
Just drop this into your directory that has your CSS or LESS (or both) files in it, and make sure you have lessc.inc.php in there as well (required).
To order the css and less files so they are included in the correct order (like for a reset.css), just append a number to the file, like 1screen.less, 2main.less, 3typography.less, 4interface.css, etc...
Also, I figured out that tinyMCE doesn't actually need typography.css to be included in the header in order to use it. It just needs to be in the theme root. So you can combine your typography.css/less into one file with everything else, and just set a custom typography.css in your theme root. You don't really even need styles in it. It will grab any classes in there even if they are blank (.button{}.caps{}) and add them to the drop down selector. You can then define those classes in your typography.less file that is now combined into the rest of the css.
That will remove one more http request from your header. :-)
EDIT: If you delete one of the files, the script won't know it, because it only checks the modified date. If you decide to delete a file from the folder after it has already built the cache.css file, simply delete cache.css and the script will rebuild it with the correct files.