We’ve already come a far way. We’ve:
PHP is "PHP: Hypertext Preprocessor."
That means it helps build HTML programmatically.
It also will introduce the basics of "real" programming.
There are 5 elements of "real" programming:
WordPress is Built on PHP!
We used a few of these ideas without knowing the magic.
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!
<?php
require 'functions.php';
require 'functions.php';
echo $DOCTYPE; ?>
<head>
<?php head_html(); ?>
</head>
<body>
<?php
header_html();
main_html();
?>
</body>
</html>
This contains functions, variables, and "language constructs" and is all we need to display everything.
Save and go to [USER DIRECTORY]/php/.
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();
<?php
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="https://building-web.site/4-php/index.php">';
}
?>
What this is saying is to echo
some variables into preset HTML.
<?php
$DOCTYPE = '<!DOCTYPE html>';
/*head_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.
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
.
<?php
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.
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
/*header_html()*/
$my_name = 'Douglas Thomas';
$job = 'Firmidable';
$job_url = 'http://firmidable.com';
$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!
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
.
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();
/*aside_html()*/
$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'];
$sections = array(
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!
function sections_html() {
global $sections;
foreach ($sections as $section) {
echo '<section>';
print_r($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.
foreach($section as $section_part => $value){
print_r($section_part);
}
Replace that print_r()
with this new foreach to go deeper into the arrays.
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.