Looking at how you can append a file before your main templates load and initialise frequently used variables.
Let's say you have paths to your CSS and JS like:
<link rel="stylesheet" type="text/css" href="/site/templates/styles/main.css" />
<script type="text/javascript" src="/site/templates/scripts/main.js"></script>You could replace the path to the templates folder with a built in config option:
<link rel="stylesheet" href="<?php echo $config->urls->templates; ?>styles/main.css">
<script type="text/javascript" src="<?php echo $config->urls->templates; ?>scripts/main.js"></script>But this is where using an '_init.php' file comes in handy.
$templatesUrl = $config->urls->templates;Now you need to append this file before your main templates load by adding some code to the config.php file.
/**
*
* Prepend template file
*
*/
$config->prependTemplateFile = '_init.php';Now you can use code like this in your template:
<link rel="stylesheet" href="<?php echo $templatesUrl; ?>styles/main.css">
<script type="text/javascript" src="<?php echo $templatesUrl; ?>scripts/main.js"></script>But don't stop there! There's more you can do with an '_init.php' file than this. You could move your css, images, js or whatever into its own folder easily and only have to change the path in one place now. Let's say you want them in a folder called 'site-assets' instead of all being in the templates directory.
$templatesUrl = $config->urls->templates;
// create the path /site/templates/site-assets/
$assets = $templatesUrl . "site-assets/";Then you can output in your templates like this:
<link rel="stylesheet" href="<?php echo $assets; ?>styles/main.css">
<script type="text/javascript" src="<?php echo $assets; ?>scripts/main.js"></script>You can also initialize variables used for outputting fields.
$home = $pages->get("/");
$title = $page->title;
$body = $page->body;
$templatesUrl = $config->urls->templates;
$assets = $templatesUrl . "site-assets/";Then use it in your templates, for example:
<?php namespace ProcessWire; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
<?php
// $title initialised in _init.php
echo $title;
?>
</title>
</head>
<body>
<ul class="navbar-nav">
<?php
// get PageArray of homepage object and child page objects
// $home initialised in _init.php
$navItems = $home->and($home->children);
// iterate over the $navItems PageArray
foreach ($navItems as $navItem):
?>
<li>
<a href="<?php echo $navItem->url; ?>"><?php echo $navItem->title; ?></a>
</li>
<?php endforeach; ?>
</ul>
<h1><?php echo $title; ?></h1>
<?php
// if current page has $body field
// $body was initialised in _init.php
if ($body) {
echo $body;
}
?>
</body>
</html>Pretty neat! You can now apply this to all your site assets, CSS, JS, images. The great thing about this is that there are no rules about how you structure your files/folders, wherever you decide to put them, you can easily retrieve them.
A more practical example is when you have minified css/js in different folders. What I've done on this site is the following.
$templatesUrl = $config->urls->templates;
$assets = $templatesUrl . "site-assets/";
// config->debug is in /site/config.php
// I set to true in local development but false on a live server
// You MUST remember to set this to false on a live server!
// if config->debug is true, $prependedFolder is "src/", else "dist/"
$prependedFolder = $config->debug ? "src/" : "dist/";
// if config->debug is true, $ext is blank, else "min"
$ext = $config->debug ? "" : "min.";And the links to my assets in my header template is like this.
<link rel="stylesheet" type="text/css" href='<?= "$assets{$prependedFolder}css/styles.{$ext}css"; ?>' />Which outputs the following.
// local server
<link rel="stylesheet" type="text/css" href='/site/templates/site-assets/src/css/styles.css' />
// live server
<link rel="stylesheet" type="text/css" href='/site/templates/site-assets/dist/css/styles.min.css' />As you can see, processwire is super flexible and as mentioned, it's up to you how you want to structure your files/folders. Hopefully this guide has given some useful suggestions and you can experiment with this to suit your own setup.
