Forums

Advanced Search

Header.php Example.

Permalink 2 users found helpful
Hello folks, I have an example of a header.php I have been creating for a template of mine.

This 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
Viewing 15 lines of 84 lines. View entire code block.
boomgraphics
View Replies: View Best Answer
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
Cool, thanks. Great idea on the abbreviated blueprint classes!
TheRealSean replied on at Permalink Best Answer Reply
TheRealSean
I have started using $c = Page::getCurrentPage(); instead of global $c,

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.
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
Yeah, using "global $c" is not recommended... see this post:http://www.concrete5.org/community/forums/customizing_c5/what_is_go...

Using global $c is for being lazy haha
boomgraphics replied on at Permalink Reply
boomgraphics
Ah, thanks for the tip! I had simply used it because it is all over the forum. I'll switch over to your example. I have a few more ideas for the header.php file I might have ready by tonight. :-D
boomgraphics replied on at Permalink Reply
boomgraphics
Okey doke, I have made a new version, I think it's easier to read than the last version. Let me know if I don't have the right idea, lol.

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();
Viewing 15 lines of 35 lines. View entire code block.


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) {
Viewing 15 lines of 62 lines. View entire code block.


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) {
Viewing 15 lines of 49 lines. View entire code block.


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!
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
In order for me to use the variables in kiss.php in my footer.php file I needed to put the helper function/s into a separate file to be included in the header.php.

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.
boomgraphics replied on at Permalink Reply
boomgraphics
Are you getting these errors in your editor or in your page? I recently moved all my js into my footer using the same code as the header and I don't get any page errors.

I am not too concerned about the editor warnings to redeclare stuff, unless I should be?
boomgraphics replied on at Permalink Reply
boomgraphics
Hey I was checking this out, and I think it's just the IDE (I use NetBeans) making a fuss because it can't find the declaration since it's two includes back. To test I simply pasted all the contents of each include into a full page with no includes. There were zero errors, except one where the header logo <a> closing tag was wrapped into a conditional statement and the IDE couldn't read it. So no need for separate includes.
boomgraphics replied on at Permalink Reply
boomgraphics
I have modified styles.php so it now also minifies the parsed LESS css into one file.
<?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");
Viewing 15 lines of 61 lines. View entire code block.
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
Awesome ! ! ! This may be the Ultimate Header.php :)
boomgraphics replied on at Permalink Reply
boomgraphics
I have modified styles.php so that you no longer have to make the array yourself. Just place styles.php inside your less folder and link to it. Everything else is automatic.

<?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");
Viewing 15 lines of 62 lines. View entire code block.


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. :-(
boomgraphics replied on at Permalink Reply
boomgraphics
I have just modified styles.php again, and now it will work for both LESS files and CSS files in the same directory. They will be concatenated into one file, gzipped, minified, and cached on the server until you modify one of the files.

<?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");
Viewing 15 lines of 59 lines. View entire code block.


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.