Firmidable Website Training

Where We’ve Come So Far

We’ve already come a far way. We’ve:

Why PHP?

PHP is "PHP: Hypertext Preprocessor."

That means it helps build HTML programmatically.

It also will introduce the basics of "real" programming.

"Real" Programming

There are 5 elements of "real" programming:

You’ve Already Started

WordPress is Built on PHP!

We used a few of these ideas without knowing the magic.

What We’ll Do Today

Set Up Your Files

Create the following files in a new /php directory:

View/Edit all three files.

These three files are all going to work together to make our page for us!


require 'functions.php';
require 'functions.php';
echo $DOCTYPE; ?>
	<?php head_html(); ?>

This contains functions, variables, and "language constructs" and is all we need to display everything.

Save and go to [USER DIRECTORY]/php/.

PHP Errors!

We talked last time that PHP is really good about explaining its errors.

This error is saying we haven’t created the head_html(); function.

Let’s make some functions!

Just for now -- let’s comment out the two later functions so we can get one function rolling. Add a /* before header_html(); and a */ after the main_html();

functions.PHP - head_html()

	require 'vars.php';
	function head_html() {
		echo '<title>Week 4: PHP - Firmidable Website Training</title>';
		echo '<link rel="stylesheet" href="/css/styles.css">';
		echo '<link rel="canonical" href="">';

What this is saying is to echo some variables into preset HTML.

vars.PHP - head_html() Variables

	$DOCTYPE = '<!DOCTYPE html>';
	$title = 'About Me';
	$stylesheet = '../css.css';
	$canonical = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];

$ sets a variable. A variable can be really anything! For now, they’re just strings.

$_ denotes special variables, ones that are automatically set up as part of PHP. There are a bunch of these, but $_SERVER gets you information about the server.

The [ ] means that $_SERVER is an array, a variable with multiple parts to it. We’re getting some named -- "keyed" -- values from that array.

Variable Scoping

Oh no! Our variables didn’t work!

In most programming languages, variables are "scoped" which means they only work on a certain level. For this structure, one way to solve this is to ask for those "global" variables that we set in vars.php.

functions.PHP - Adding Global Variables

	require 'vars.php';
	function head_html() {
		global $title, $stylesheet, $canonical;
		echo '<title>'.$title.'</title>';
		echo '<link rel="stylesheet" href="'.$stylesheet.'">';
		echo '<link rel="canonical" href="'.$canonical.'">';

We’re going to add global $variable, $variable_2, [ETC] to every function we use to make sure we can get those variables in the scope of the function.

functions.PHP - header_html()

	function header_html() {
		global $my_name, $tagline;
		echo '<header>';
		echo '<h1>'.$my_name.'</h1>';
		echo '<p>'.$tagline.'</p>';
		echo '</header>';

Add the header_html() function to the functions.php

vars.php - header_html() Variables

	$my_name = 'Douglas Thomas';
	$job = 'Firmidable';
	$job_url = '';
	$tagline = 'I work at <a href="'.$job_url.'">'.$job.'</a>';

Add the variables to vars.php. Uncomment out the call to header_html(); in index.php as well!

functions.PHP - main_html()

		function main_html() {
		echo '<div id="main">';

		echo '</div>';

This won’t do a lot but it’ll let us uncomment out the main_html() code in index.php.

functions.PHP - aside_html()

	function aside_html() {
		global $img_loc, $my_name;
		echo '<aside><p><img src="'.$img_loc.'" alt="'.$my_name.'"></p></aside>';

Place this aside_html() ABOVE the main_html() function.

Then, call the function by adding aside_html() between the echos in main_html();

vars.php - aside_html() Variables

	$img_loc = 'img/me.jpg';

Add this to vars.php, replacing the filename with your file.


Arrays are Variables with multiple values.

$array = array('red','green','blue','yellow');

You can also name those values with a key:

$array = array('car' => 'red','boat' => 'green','helicopter' => 'blue','spaceship' => 'yellow');

In the second example, you can echo "green" by using echo $array[1]; OR echo $array['boat'];

vars.php - section_html() Variables

	$sections = array(
			'section_title' => 'My Job',
			'section_content' => 'I manage the digital department, including Paid Search, SEO, and analytics. I manage 2 awesome teammates directly.'
			'section_list' => array(
				'SEO/SEM Specialist @ The Marketing Center',
				'Online Advertising Specialist @ Search Influence',
				'Internet Marketing Associate @ Search Influence'

This is the only part where you probably can’t copy-paste. You can mix and match the three keyed values, and for every section you should add a new array. Make sure to close it all up and end with a semicolon!

functions.PHP - section_html() - foreach loops

	function sections_html() {
		global $sections;
		foreach ($sections as $section) {
			echo '<section>';
			echo '</section>';

Add sections_html(); to your main_html() function before the last echo.

foreach runs the code "for each" member of the array. This is similar to the "loop" in WordPress.

For each value in $sections it prints the values from the array between two section HTML tags.

functions.PHP - section_html() - Nesting the foreach

			foreach($section as $section_part => $value){

Replace that print_r() with this new foreach to go deeper into the arrays.

functions.PHP - section_html() - if statements

				if($section_part == 'section_title') { echo '<h2>'.$value.'</h2>'; }
				else if($section_part == 'section_content') { echo '<p>'.$value.'</p>'; }
				else if($section_part == 'section_list') { 
					echo '<ul>';
					foreach($value as $section_list => $li_element) {
						echo '<li>'.$li_element.'</li>';
					echo '</ul>';
				else { echo $value; }}

We’re skipping a step - nesting within the li_element - to save time.

But we’re doing something very powerful!

We’re saying "IF that part is called a title, let’s treat it as a title. If it’s content, let’s treat is as content. If it’s a list, we’ll go through and echo every list element inside a ul tag. Finally, if it’s not any of that, just echo it, who knows.