Benjamin Tigano Developer at Large

Adding styles, scripts, meta, and other information

In this section, we'll be learning how to add titles, styles, scripts, meta, and other information to your website. Each page of your website will likely have its own title, so that will need to be displayed at the controller or action level. Other information, like CSS and meta might be consistent across the entire site. We'll be exploring both ways of performing these tasks.

First up is the site title. In the base project we started here, the layout file sets the site title, and the way it is displayed. Below is the code:

$this->headTitle()->setSeparator(' - ');
$this->headTitle('Site Title', 'PREPEND');
echo $this->headTitle();

In our case, the site will always display information as "Site Title - Page Title". It shows the site title first because we used "PREPEND" as the second argument for our headTitle() method. Using "APPEND" would show the page title first. The hyphen is used because that's the string we passed into headTitle()->setSeparator() method.
Now for the page title. If we don't have a page title, we don't need to do anything, but that's probably not the case. To demonstrate, let's open up the IndexController file, and inside the init() method, add the following code:

$this->view->headTitle('Home Page Title');

If you refresh the home page now, you'll see that the title is now "Site Title - Home Page Title". We currently only have one action in our IndexController, but if there were others, they'd all have the same page title. If we wanted a different page title for each action, we could move that code from the init method into each action method, and set each one according to the page title we want for that action.

To add CSS styles and scripts, we need to do 2 things. First, we need to add each stylesheet or script to the helpers of the view, headLink() and headScript(). I'll be doing it in the layout since the files be needed across every page of the site. We want to make sure we print the styles and scripts in the header, so we'll add the following line of code to the layout's <head> section:

echo $this->headLink(); // adds the CSS
echo $this->headScript(); // adds the Javascript

Right now, that line won't do anything because we haven't added any styles or scripts. Let's do that now. In the same file, anywhere above the line that echo's the headLink() and headScript(), add the following:

$this->headLink()->appendStylesheet('/zend-project/public/css/style.css');
$this->headScript()->appendFile('/zend-project/public/js/script.js');

I created a basic CSS file in my public/css directory and a basic JS file in my public/js directory, and that's what I'm importing here. When I refresh any page on my site, I know see this in my <head> section:

<script type="text/javascript" src="/zend-project/public/js/script.js"></script>

If you had CSS or scripts specific to a controller or action, you could add the code to the controller file, replacing $this-> with $this-view->.

Finally, we're going to add meta information. The most popular meta tags you'll see is for keywords, and a description. Other items in meta tags would be to specify a character set, content type, and other directives. We'll do a few to demonstrate the more popular tasks.

As with the other sections, we first need to add code to the layout file that will output the meta directives in the <head> section:

echo $this->headMeta();

Next we'll add some meta directives:

$this->headMeta()->appendName('description', 'A brief description of the site.');
$this->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
$this->headMeta()->appendHttpEquiv('Content-Language', 'en-US');

Refresh the page, and you'll now see the following new lines in your <head> section:

<meta name="description" content="A brief description of the site." />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="en-US" />

Again, if you wanted to set any meta information from your controller files, use the same code, but replace $this-> with $this-view->.

That wraps up this section. If you have any questions, leave them in the comments.

Download the project.

Ready for the next section? Click here to learn how to add site navigation!

Fork me on GitHub