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!
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.
Cool, thanks. Great idea on the abbreviated blueprint classes!
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.
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.
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
Using global $c is for being lazy haha
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
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:
Then we have the header.php, which includes kiss.php, and then uses all the variables in an easy to read way:
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:
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:
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!
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!
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
IN footer.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.
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.
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?
I am not too concerned about the editor warnings to redeclare stuff, unless I should be?
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.
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.
Awesome ! ! ! This may be the Ultimate Header.php :)
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.
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");
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. :-(
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.
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.
<?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.
