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.