Grow to be a WordPress Developer: Unlocking Energy with Code

by birtanpublished on July 3, 2020

hello everyone this is the first three

hours of my 26 hour premium WordPress

course I hope this helps you get started

learning and experimenting with

WordPress have fun and I'll see you

around if you want to unlock the full

power of WordPress by learning about

code you've come to the right course

because I've spent the last 12 years

living and breathing WordPress PHP and

JavaScript and now I'm here to teach you

everything I know

here's a quick summary of what we are

going to learn we are going to create a

completely custom interactive site for a

fictional university in order to do that

we need to learn how to install

WordPress on our personal computer so

that we have a private playground of

WordPress to practice with the very

basics of the PHP language which is what

powers WordPress how to code a brand new

theme how to create custom post types so

beyond just blog posts and pages we will

set up post types like professors and

campuses and events and programs or

majors how to create relationships

between different pieces of content so

for example we can associate a professor

with the matching programs or majors

that they teach how to create an

interactive map powered by our campus

posts how to create a JavaScript powered

live search feature we will allow open

registration so anyone can visit our

site and sign up for a basic account we

will leverage the WordPress REST API to

create a my notes feature as well as

another feature that lets users like or

Hart a professor in real time on the fly

and much much more now I would love to

have you come along on this journey with

me and if you're ready to launch your

career as a wordpress developer I will

see you on the inside

hello everyone and welcome to the course

in this video I want to give you a

bird's eye view so you know what to

expect big picture the goal of this

course is for you to learn how to code

completely custom websites with

WordPress we are going to build the site

together for a fictional University and

along the way we will slowly but surely

become a wordpress developer first I

will have you install WordPress on your

personal computer so that you have a

private playground copy of WordPress

that you can practice and experiment

with next we will take our first look at

the PHP programming language this is

what powers the core of WordPress but

don't worry you don't need any prior

experience with PHP after that we will

learn how to code and create a brand new

theme after that we will learn how to

create custom post types there is an

entire world of WordPress beyond just

posts and pages for example let me show

you the admin dashboard for our finished

product in this course in my sidebar we

see posts and pages just like in a

normal WordPress installation but I've

also got campuses and events programs

professors notes

likes and each of these post types has

its own unique set of fields instead of

just a generic title and body field so

for example if I click on professors and

then if I click to edit my professor

named dr barks-a-lot yes we do have the

generic title and body field but we also

have page banner subtitle and page

banner background image which if we view

this post on the front end those fields

control this background image that is

unique to just this professor page here

we see the page banner subtitle just for

this one professor and also if we scroll

down a bit we see this related programs

field

so in this left-hand column you can

choose from the

different programs or majors that are

available at this school and you move

them over here to say which one this

particular professor teaches and then

this relationship between professor and

program gets reflected on our front end

so on this professor page if I scroll

down we see subjects taught biology this

allows us to create relationships

between different pieces of content and

this opens up all sorts of possibilities

so for example if I click on campuses up

in the header we've got this interactive

Google map with pins on it and each pin

is a campus post so for example we've

got our downtown West Campus and if I

click on that it takes me to that detail

screen for just this one campus and if I

scroll down we can see programs

available at this campus math so long

story short custom post types and custom

fields allow us to programmatically

relate different content together in

really compelling ways ok after that

section of the course we will move on to

learn about JavaScript our first big

JavaScript project in this course is to

power our live search results so for

example I can either press the s key on

my keyboard s for search or just click

this search icon up in the top right and

that opens up this full screen

transparent overlay and my cursor is

automatically placed in this search

field so I can just start typing for

whatever I'm searching for and on the

fly in real time we get our search

results and not only that but they are

organized by the content type so I

searched for biology here we have any

related blog posts or pages programs

professors related campuses and even any

upcoming events that have to do with

biology now there's really two main

aspects to the JavaScript here part one

is the JavaScript to power the actual

user interface

right opening and closing the overlay

and responding to click events things

like that and then the other aspect of

the JavaScript is actually communicating

with the WordPress server on the fly in

real time right because when someone

searches for something we need to send

that search string to the server and

then on the other hand we also need to

receive this incoming data from the

server and all of this needs to happen

in real time so this is a great exercise

to learn all about JavaScript I think

you're gonna love this portion of the

course just a bit of a spoiler the

WordPress REST API is what makes all of

this possible and very elegant to set up

ok then in the next section of the

course we will learn about user roles

and permissions so if you want to have

multiple people help maintain the

website you do not need to give everyone

administrator access so for example if

you wanted to invite a friend or a

co-worker and the only thing you wanted

them to be able to do is manage the

event post type you could set that up or

if you wanted someone to be a campus

manager you could restrict them to only

be able to change those type of posts or

you can mix and match different

permissions maybe someone should be able

to post into the blog and manage

programs but that's it the possibilities

are endless and learning about roles and

permissions will really open up new

collaboration doors moving on in the

next section of the course we will allow

open registration so for example if I

log out I'm currently signed in with my

admin account but I can click logout and

then if I visit the website again you

can see that if a stranger visits the

website they can log in or even sign up

so with open registration any random

visitor can sign up for a basic account

and once someone with a basic account

signs in that gives them access to two

new features the first feature is my

notes and in this portion of the course

we really see

our teeth into the WordPress REST API we

basically create our own mini single

page application so if a student brings

their laptop into a lecture hall they

can take a note biology note number five

and take a few notes right lorem ipsum

class was amazing

click create note on the fly it gets

added here and saved into the database

they are free to create another note

math note number one did you know that

two plus two equals four it's true go

ahead and click create okay and then

from their existing notes they are free

to make edits they can click this to

change the title click Save all of this

gets saved into the database on the fly

and they can also delete one of their

notes in real time the other feature

that basic logged-in users get has to do

with liking a professor so maybe if I

navigate to the doctor barks-a-lot

professor page you'll notice this little

heart box currently it says 1 to

indicate that one other person has liked

doctor barks-a-lot and notice the heart

is hollow but if I click on it the heart

fills in to indicate that I personally

have liked this professor and you can

see their light count went up by one and

thanks to JavaScript and the rest api

all of this happens on the fly so if I

immediately decide that actually I don't

like this professor you can just click

it again to toggle or remove your like

and all of this data is getting saved

into the WordPress database after this

section of the course I show you how to

push or deploy your website live up onto

the web so that the entire world can

view it and if you don't have a web

hosting account to practice with that's

okay this course gives you access to a

free three-month educational hosting

plan and it really is free in the truest

sense of the word

you do not even need to enter a credit

card or any form of payment so there's

no way they can automatically bill you

at the end of the three months okay so

that way everyone has access to a web

host so you can practice deploying a

site live and it's not mandatory but if

you're familiar with the git version

control system you are really going to

love the automatic get deployment setup

that I can show you and finally we end

the course with a few extra credit

challenges so there's the bird's eye

view of the course I'm really excited to

get things rolling my goal for this

course is to give you lots and lots of

small victories each time we finish a

small little feature or section and

things work the way we want them to I

want you to relish that small victory

because each time we write code and

accomplish something with it we are

moving closer to our career goals and

that's something to feel good about so

let's get some momentum rolling let's

get things started and most importantly

let's become a wordpress developer hello

everyone in this lesson we will answer

the question where do we begin so

whenever I'm helping someone learn

WordPress development I always say that

the first step our first priority should

be setting up a dev environment for

ourselves so that we can work locally

now don't worry I do not expect you to

know what that means

in order to explain what that means

let's ask ourselves two new questions

what in the world is a dev environment

and what does working locally mean let's

start with a dev environment the best

way to explain what it is is to begin

with its opposite the opposite of a dev

environment is your real website that

the entire world can see so in the past

you might have purchased a domain name

like your own dot-com org and you might

have also purchased a web hosting plan

and used WordPress to create a website

in the industry we refer to that real

website that the entire world can see we

refer to that as your live environment

or your production environment

on the other hand a dev or development

environment is a separate copy of your

website that is usually configured so

that only the owner or developers of the

website can see it so a dev environment

is a private safe sandbox or playground

to experiment in and no one from the

general public can see your

work-in-progress website ok so that's a

dev environment now let's answer our

other question which is what does

working locally mean so local is the

opposite of the cloud local refers to

your personal physical computer so for

example right now I want you to picture

two things number one your personal

computer and number two a server that

lives a thousand miles away from you now

the files that make up a website usually

live on a server that a web host company

maintains the web host company leaves

that server computer on 24 hours a day

seven days a week so that people can

access your website around the clock and

that means that WordPress and our web

sites usually live on a server not on

our personal computers however it is

possible to install WordPress on our

personal computers and that will allow

us to create WordPress websites even

when we don't have an internet

connection now granted these won't be

real websites because no one else can

view them it would be like saving a word

processing file to the desktop of your

computer you're the only person in the

world who can view that word processing

file because it lives on your physical

computer ok but long story short that

process of working from your computer

instead of connecting remotely to a

server somewhere that process is called

working locally now if we put these two

things together if we work locally

within a dev environment it creates the

perfect conditions

for coding custom websites because if we

make a typo while coding it won't be a

big deal because no one will see the

error messages except for us all so we

won't need to constantly upload new

files to a server because anytime we

save a file on our computer our local

private websites are just immediately

instantly updated and then only when

we're finished coding our website only

then do we push our files up to a real

public web server for the whole world to

see ok so if we want to work locally we

need to install WordPress on our

personal computers but that's a bit

trickier than it may sound so here's a

metaphor or an analogy for you if we had

a tree that we wanted to plant we can't

just throw that tree anywhere right we

can't just throw the tree on cement and

expect it to live and grow a tree needs

a particular environment it needs an

environment with soil water and sunlight

well it's the same thing with WordPress

we can't just plant WordPress anywhere

on our computer WordPress needs an

environment with the following three

things number 1 PHP number 2 Apache or

nginx and number 3 my sequel or Maria dB

now don't worry I do not expect you to

know what any of those things are but

for now just know that our personal

computers need to have these things in

order for WordPress to run now most

computers do not come pre-installed with

these things so we need to go out and

get them but luckily these three things

are completely free and there are lots

of different tools out there that will

automatically install all three of them

for us right so all of the tools listed

on the screen right now they are free

and they all do the same thing they give

us the metaphorical soil water and

sunlight that WordPress needs in order

to run on our computer so we don't need

all of these tools we just need one of

them now if you've dabbled with

WordPress development in the past you

might already have one

these tools installed on your computer

if that's the case you can keep using it

you do not need to install another one

but if you're brand new I don't want you

to feel overwhelmed with all of these

choices so right now

why don't we install local by flywheel

together step-by-step this is my

favorite tool of the bunch and it's

super easy to use so in a new tab in

your web browser search for local by

flywheel as of this recording the

official URL is local dot get flywheel

com

okay then go ahead and click the big

free download button and proceed to

download the software you might have to

enter your first name or an email

address or basic info but the software

is completely free you will not have to

pay even a penny the download file is a

decent size so it might take a while to

download you might need to go grab a

coffee while you wait but once the

download completes jump into your

computers downloads folder and go ahead

and begin installing the program the

installation process should look

something like this and this could take

up to several minutes so be patient when

it completes it should then give you

this option to create a new site go

ahead and click that we need to give

this new site a name just to follow

along with the course why don't you name

it fictional university personally I've

already created a site with that exact

name so just for this demo I will say

amazing College

let's click continue we can go ahead and

use the preferred default options so

continue again and here you get to

choose your username and password just

choose something that you can remember

and also enter your email address then

go ahead and click add site I'm not

interested in setting up a default

password right now so I just click not

now and this might take a few minutes to

complete but when it does we now have

our own local dev environment copy of

WordPress up and running on our personal

computer so you can just click this view

site button if that's not available yet

you might just need to start your

website up in the top right corner but

once it's up and running just click view

site and here we have a brand new

completely fresh copy of WordPress up in

the address bar you can see that it gave

us our own fake local dev domain it

basically told our computer that if we

visit this domain instead of looking out

onto the Internet just look within our

own personal computer and this means

that you are the only one in the world

that can view your website if you shared

this domain with a friend or family

member they would not be able to see

your website yet cool so you've got your

own private playground copy of WordPress

that you can experiment with if you want

to log in as the admin of the site up in

the address bar at the end of this

domain just add slash WP dash admin

press enter enter the username and

password you chose just a moment or two

ago cool and here's your typical

WordPress admin dashboard now let's

pretend you've been working and

experimenting for a while and you're

done for the day to shut things down

just jump back to the local by flywheel

application we can click stop site up in

the top right corner ok and then you're

free to close the program now let's

imagine it's the next day and you're

ready to start working on your WordPress

site again just open up local by

flywheel

it could take several minutes to load

but once it does just click on your

website that you've created here okay

and then in the top right corner we just

need to click start site cool so now

it's running again so now back in your

browser you're free to use your website

again you might need to refresh and

remember that if you forget this URL you

can always just click view site right

here okay now there's only one more

super important thing that I need to

tell you right now before we move on I

want to show you where on your computer

your new website files actually live so

right here where you see your website

listed if you right click on that if

you're on a Mac you can choose reveal in

finder if you're on Windows it will say

show in folder or something similar

basically we're looking for the folder

or directory where the website lives so

click on that option and that will show

you the folder for the current website

that you're working on if you're

wondering where this lives it's inside

your user accounts home directory if

you're on a Mac within your home folder

you will now see a brand new folder

named local sites right and that

contains our projects if you're on

Windows you will have a new folder named

local sites within the base of your main

user folder so it would be sitting

alongside your downloads folder okay now

before we bring this lesson to a close I

want to show you where the actual

wordpress files themselves live so

within local sites within our project

folder dig into app and then public and

here we are we are going to be spending

a lot of time in this folder in this

course these are the system files that

actually power WordPress perhaps the

most important folder is named WP –

content if you look inside it we see

another folder named themes and inside

there is a folder for each theme

that you have installed now in this

course we are going to be creating our

own brand-new theme so very shortly we

will be setting up a new folder here and

that's where we are going to do a lot of

our work now at this point give yourself

a pat on the back because you've

completed the first step towards

becoming a wordpress developer you now

have a local dev environment but

remember that not everyone in this

course is using this same local by

flywheel setup so before we bring this

lesson to a close I just want to stress

one thing to you and that is that even

if in future lessons

my screen doesn't look exactly like your

screen that's ok and even if I'm working

in a slightly different folder like

personally in my case my websites live

on my desktop right in this lower case

local sites folder that's not important

so just know that throughout the entire

course when you hear me say that I want

you to jump to your project folder or

your WordPress folder or your theme

folder just know that you are in the

right spot for you I just want you to

open up your project within your local

sites folder jump into it then jump into

app then jump into public ok this is

really the only folder that you need to

worry about throughout the entire course

I'm usually going to tell you things

like now I want you to jump into WP

content cool now that's gonna bring this

lesson to a close and now that you've

set up a local dev environment for

yourself we can really start learning

how WordPress works in our very next

lesson we are going to get our first

taste of PHP which is the language that

powers the heart and soul of WordPress

this is going to be a lot of fun so

let's keep things rolling and I will see

you then

hello everyone in this lesson we will

get our first taste of PHP which is the

language that WordPress is written in

now working with a programming language

might sound intimidating at first but

that's why we're going to walk through

this together step by step at a nice

pace

so without further ado let's get started

okay in our previous lesson we set up a

local dev environment copy of WordPress

for ourselves and now the question

becomes how and where can we get our

first taste of the PHP language well in

our previous lesson we also learned how

to find the files and folders that power

this site so for example if you're using

local by flywheel you can just right

click on your site right here and choose

reveal and finder or if you're on

Windows it should say show in folder or

open Explorer or something similar to

that go ahead and click into that folder

then click into app then click into

public and these are the WordPress

system files that power your site now

before you and I worry about doing

anything useful like maybe creating our

own brand new theme before we get to

that let's first start simple for now

let's just create an experiment file in

this folder where we can try a few

simple tests and dip our feet into the

PHP waters now it's important to point

out that you cannot use a word

processing program to create a new PHP

file or make edits to an existing PHP

file instead you need a dedicated text

editor program now most computers do not

come with a text editor program out of

the box but luckily three of the best

text editors in the world are free to

download and use so if you don't already

have a text

program on your computer I recommend you

download one of the following three the

first is sublime text this is the text

editor that I will be using throughout

this course so if you want to use the

same program as me this would be the

choice for you however there are tons of

different text editor programs out there

and at the end of the day it doesn't

really matter which one you choose they

will all work perfectly for editing PHP

code ok so aside from sublime text

another great option for a text editor

program is visual studio code and

another great free option is the atom

text editor and again you do not need to

download all three of these any one of

them will do the trick so just pause the

lesson right now and go ahead and

download and install one of these three

text editors okay and at this point in

the lesson I will assume anyone watching

now has a text editor ready to use so go

ahead and open up your text editor

program and if you don't already see an

empty screen where you can begin typing

just click on file new or if you're on

Windows you can usually just press ctrl

N or if you're on Mac you can press

command n to get a new file okay so in

this blank canvas

why don't we type out this is a test

okay then let's go ahead and save this

as a PHP file into our WordPress system

folder so click file save or ctrl S or

command S and we need to save this file

into a very specific location we want to

save it into that folder where all of

the WordPress system files live so

within your user account home folder

click into local sites then click on the

name of your site then app and then

public ok and this is that same

directory that we've already seen twice

now with the different WordPress files

and folders so let's save our new file

into this folder in the name of

new file only matters in the sense that

we don't want to overwrite any of the

existing wordpress files so why don't we

name our new file experiment and this is

the important part dot PHP so save it as

experiment dot PHP cool so now in that

same folder with all of the wordpress

files if i scroll down to the bottom

there is our brand-new little experiment

PHP now let's try to view this in the

web browser so back in your browser if

you visit your local dev environment

copy of WordPress write your URL might

be a bit different if you're using

flywheel remember you can always use the

view site button but at the end of this

URL add-on make sure there's a forward

slash and add-on experiment dot PHP

press enter and you can see we are

viewing that brand new file that we just

created now I want to point out that

this is not how you add new pages or

URLs to a wordpress website so you would

never do this in the real world on a

live public web site we are only doing

this for educational and testing

purposes at the end of this lesson we

are actually going to delete our

experiment PHP file however for the time

being this is a great place to try and

write our first bit of PHP code so why

don't we jump back into our text editor

and let's delete the this is a test

message and instead let's write a tiny

bit of HTML so we can then see how PHP

fits into the equation so just as a test

let's create a heading level one HTML

element and say this page is all about

Brad and then maybe right below that I

want a less important headline that

reads all about Brad ok let's save this

and refresh the page

all right so nothing too exciting here

this is just a bit of HTML a heading

level 1 and a heading level 2 but

remember we are not editing in HTML file

we are editing a PHP file so if this is

just HTML

what does PHP look like and what can it

do well check this out maybe on a new

line above this code type this out with

me less than symbol question mark PHP

and then a space and then a question

mark and then greater than symbol so

what does this code mean well this first

chunk that I have highlighted right now

this begins PHP mode and this chunk ends

PHP mode okay so in between those where

my cursor is right now that means we are

in PHP mode now when we are not in PHP

mode like down here right because this

closes PHP mode this code down here is

just regular old HTML but up here while

we are in PHP mode we can write magical

beautiful PHP code so check this out

type this out with me echo echo is how

you output things to the page while

you're in PHP mode so echo and then

let's write 2+2 then let's save this and

refresh in the browser and there we see

for now you might be underwhelmed you

might be wondering what is so exciting

about two plus two equals four well it's

exciting because we could never do that

in regular old HTML HTML doesn't have a

brain you just type out exactly what you

want and that's exactly what you get PHP

on the other hand has a brain it is a

legitimate programming language we can

give it equations we can tell it to talk

to databases we can have it resize

images or send out automatic emails we

can make PHP do just about anything for

us and what's cool is that the general

public that's visiting our website they

don't see our PHP code they only see the

final

product so for example here in the web

browser if we view the source of this

page it's a view page source so here we

can see the HTML code but notice we

don't see 2 + 2 we just see for this is

because PHP is a server-side language

and that means that all of our PHP code

runs on the server and then only the

result of that code not the code itself

gets sent to the visitors of our website

so in other words the server is what's

calculating – plus – not people's web

browsers let's jump back into our text

editor because practice makes perfect

I want to show you that we can jump in

and out of PHP mode as many times as we

need to so for example maybe after this

heading level 1 but before this heading

level 2 so maybe in between those two

lines I want to drop in to PHP mode and

maybe echo out the results of 5 times 5

okay and that'll be sure to close out or

end PHP mode okay and if I save this and

refresh cool so in between the two

headlines we see 25 so back to the code

you can see that in a PHP file we can

seamlessly jump back and forth between

PHP HTML PHP HTML alright now before we

end this lesson I want to have you type

out one more PHP example alright so on

this page you can see that my name is

included twice here and here now imagine

I legally changed my name in the future

I would have to update my name in both

places

now just updating it in two spots isn't

too bad but imagine if the page listed

my name a hundred times or 300 times

updating it in all of those places would

be very time-consuming so it would be

nice instead of having to hard code my

name if we could just include a

placeholder for my name right so for

example if instead of Brad right here it

just said blank and instead of Brad

right here it said blank and then we

could somehow programmatically replace

all of the blanks

my name well there's no way to do that

with regular old HTML but we can do it

with PHP so check this out up here on

this top line right after 2+2 while we

are still in PHP mode let's add a

semicolon the semicolon tells PHP that

we are done with this task and that we

want to move on to a new task so we

could begin typing right here where my

cursor is but just to stay organized I'm

going to drop down to a new line okay

and right now I'm still in PHP mode and

what I'm going to do right now is create

a variable that stores my name so type

this out with me dollar symbol my name

equals quote Brad and then just to be

safe why don't we add a semicolon at the

very end of the line to tell PHP that we

are done with this task now let's go

over this code that we just wrote so the

dollar symbol is how you create a

variable in PHP and then this text that

comes right after the dollar symbol this

doesn't matter what you type I just made

this up there's nothing magical about my

name instead we could have typed unicorn

or pizza right it really doesn't matter

what we type here just as long as it's

something we can remember so this line

of code basically creates a sticky note

in PHP 'z memory with my name written on

one side and then on the back of that

sticky note it says Brad now what's cool

is we can reference this throughout the

rest of our page so now instead of

literally typing out blank here we can

just use PHP to reference this my name

variable so let's delete this first

blank so this page is all about and then

we want to output whatever the value of

my name is so place our cursor here and

then we want to enter into PHP mode okay

and remember echo is how we output

something onto the page when we are in

PHP mode and then we just type out the

variable name so dollar sign my

okay and then let's be sure to close out

of PHP mode cool so on this line we

start out with HTML then we enter into

PHP mode to get that variable value then

we close out of PHP so then we're back

into HTML mode so we can close out the

headline let's go ahead and do the same

thing for this line so let's delete

blank and then instead of typing this

out again let's just copy and paste it

so select this PHP section copy it paste

it right here

okay now if I save this and refresh we

don't see any difference because my name

still equals Brad but now if we change

this variable to equal John Doe and save

cool it gets updated in both locations

now again it's not very impressive

because it's in only two locations but

imagine if your page was way more

complex and that name was referenced

hundreds of times you get the idea and

that's actually going to bring this

example to a close now I do want to

point out that what we just did in this

lesson has absolutely nothing to do with

WordPress this experiment dot PHP file

that we just created is not in any way

connected to the core of WordPress

however WordPress is written in the PHP

language and at this point in the course

you are now familiar with the basics of

PHP right you know how to enter PHP mode

you know how to close PHP mode you know

how to create variables using the dollar

sign and you know how to output content

to the page using echo and with just

that little bit of PHP knowledge in your

tool belt you are now ready to start

writing WordPress code or in other words

you're ready to use PHP to tell

WordPress what to do and this is where

things get fun

so in our very next lesson we are going

to use PHP code to create our own brand

new custom WordPress theme but really

quick Before we jump into that

lesson I want to talk about our

experiment PHP file if everything in

this lesson made sense I encourage you

to actually go ahead and delete our

experiment PHP file you don't need to

delete it you can keep it for reference

if you'd like to I just want to make

sure that you're aware that it's not

normal to have random extra files

sitting in the core root folder of

wordpress like this we only did this for

educational testing reasons so i would

strongly encourage you to delete this

file but it's not going to hurt anything

so if you want to keep it there for

reference that's okay anyways i'm

looking forward to creating a theme with

you in the next lesson so let's keep

things rolling and I will see you then

hello everyone in this lesson we will

begin creating our very own wordpress

theme without further ado let's jump

right into the action okay so in your

web browser go ahead and visit the home

page of your local dev environment copy

of wordpress your local domain might be

different than the one you see on my

screen right now that's not important

but let's go ahead and visit the admin

dashboard of our website you can always

visit the dashboard by going up to your

address bar and at the end of your

domain visiting slash WP dash admin go

ahead and login okay and if we were not

developers one of the first things you

do on a typical WordPress website is

look for a theme that you like right so

you might head over to the appearance

tab and switch to one of the other

themes that WordPress comes with out of

the box or most of the time you don't

want to be limited to just these themes

that WordPress ships with so instead you

might click add new here and then you

could search through the thousands of

free themes or your third main option is

to use this upload theme button in case

you purchased a premium theme from a

party marketplace okay but in this

course we are not going to do any of

that because we are not going to use an

existing theme we are going to create a

brand new theme now I know at first that

might sound scary creating a theme from

scratch but it's not scary because I'm

here to guide you through it step by

step and believe it or not it's very

simple to begin creating a new theme so

for example if I click on the main

appearance tab again here we see all of

our currently installed themes and if we

want to create a brand new theme that

will show up on this screen all we need

to do is create a new folder in a very

specific location so let me show you

what I mean let's go on a little bit of

a trip let's look for the WordPress

themes folder the first step to finding

it is just navigating to that WordPress

system folder we've already looked at

two or three times so navigating to that

folder is a bit different depending on

whether you're using local by flywheel

or MAMP orbit Nami or xampp or vagrant

and VirtualBox but let me walk you

through the local bi flywheel example so

right-click on your site click reveal

and finder click into your folder and

then app and then public okay now

everyone in the course regardless of

what you're using for your local dev

environment software everyone is going

to have these same core WordPress files

now at the moment we are looking for the

themes folder which is located in the

wp-content folder so click in to WP

content and here we see a folder named

themes let's look inside that folder and

here we see one folder for each of our

currently installed themes right so this

2017 folder corresponds with the 2017

theme so if we want to create a new

theme all we need to do is create a

brand new folder in this themes

directory so new folder and we can name

it anything we'd like why don't we call

it fictional

University theme just something along

these lines doesn't have to be exact

okay now all we need to do is create two

new files within this new folder and

then we will have a real theme that will

show up on this screen and that we can

activate so let's go ahead right now and

create the two files that we need what I

like to do is open this entire folder in

our text editor on Mac I can just drag

this folder into my dock onto my text

editor program or once you're in your

text editor program you can just use

file open and there should be an option

to just open an entire folder instead of

a file now you don't need to do it this

way I just find it convenient because

now in my text editor here we have the

sidebar of the folder and I can just

right click on it and choose new file so

I have this completely empty screen but

now if I try to save this my text editor

automatically knows that I want to save

it within that new theme folder that we

just created so what do we want to name

this file well let's call it index dot

PHP okay and what do we want to write

within the file for now let's just add a

bit of placeholder text that reads this

is our amazing custom theme save again

all right so I said we needed to create

two files so we created one of the two

let's create the second file so I will

right click on my fictional University

theme in the side bar and click new file

or you could just use your text editors

file new file option let's save this

okay and what do we want to name the

second file let's call it style dot CSS

now normally a CSS file only has one

responsibility and that's to tell the

webpage what it should look like so you

don't have to type this out because I'm

just going to delete it in five seconds

from now but normally in a CSS file you

would say that like the color of all the

text should be orange right you style

the content on

Paige well we will do stuff like that as

well but in WordPress

this style dot CSS file has another

responsibility WordPress needs us to use

this file to give it a bit of

information about our theme and the way

that we give WordPress that info is up

at the very top of the file here we

begin a CSS comment so slash and then an

asterisk that's how you begin a CSS

comment and then on another line to

close out the comment its asterisk and a

slash ok now between those two lines we

can write whatever we want so first and

foremost WordPress wants to know what

the name of our theme is so let's say

theme name colon and we don't need the

semicolon at the end here and now we can

make up whatever name we want so let's

say fictional university you might think

that we already named the theme when we

created the folder name but in folder

names you usually want to use dashes

instead of spaces so this is our chance

to use capital letters and have spaces

in the name you get the idea now if we

save this file and I want to point out

that it needs to be named style dot CSS

it can't be main dot CSS or screen dot

CSS the name here is very important

WordPress is on the lookout for this

specific file name in our theme folder

okay but with this comment in place and

we save the file if we jump back over to

our admin dashboard and refresh the main

appearance themes screen here we see our

brand new theme and if we hover over it

we see theme details and if we click on

that we can see it looks a bit odd right

it says fictional University and then

version and there's no version number

and also it says by anonymous instead of

our name so to fix those two things back

on our text editor on a new line still

within our comment we can say author

don't need the semicolon but author

colon and then

you can just type in your name here and

then on a new line we can also say

version and then we can just make up a

version number

maybe 10 okay so if we save this again

and then refresh our theme screen and

click on it again cool so now we see

fictional university version 10 by Brad

now all we are really missing is a

screenshot or photograph or a preview

image of our theme right you'll notice

that all of the other themes have a

preview image here so to add a preview

image to our new theme all we need to do

is go within our theme folder right I

named that folder fictional University

theme and we just need to move an image

file to live within this folder and the

file should be named screenshot dot PNG

now I conveniently have a PNG file

sitting on my desktop here you can find

this same image file in the resources

for this lesson but I'm just going to

move this file into my folder and then

I'm going to rename the file to screen

shot PNG ok because WordPress is on the

lookout for this exact file name and you

can use your own image here instead of

this one ideally you want the photo to

be 1200 pixels wide by 900 pixels tall

all right but with this in place if we

refresh this admin screen again cool so

now this looks like a legitimate theme

it's got a preview photo if we click it

it's got the essential information and

now we can just go ahead and activate

the theme so you can click activate down

here at the bottom or if you close this

out from this screen when you hover over

a theme there's also an activate button

right here okay so let's go ahead and

activate the theme and now if we use

this link up here to view the front end

of our website cool so remember this is

what we typed out in our themes index

dot PHP file so if we go back to our

text editor and jump back into the

themes index dot PHP file maybe I want

to add the word completely here this is

our completely amazing custom theme

save it refresh our website awesome so

now that we have our brand-new theme and

we activated it and we can see it on the

front end of our website here we really

don't have any need for all of these

other default themes like 2017 2016

right our new theme is all we are ever

going to need and since we don't want to

ever accidentally activate one of these

other themes why don't we just go and

delete them right now

so back to the folder structure here's

our theme folder that contains indexphp

style and our screenshot if we go up a

level okay so now I'm looking in the

WordPress themes folder we can go ahead

and delete the folders for those other

themes 2015 16 and 17 so just select

them and delete them cool so now if i

refresh this admin screen perfect we

just have one theme and it's the one

that we created

now before we bring this lesson to a

close I want to address a CSS concern

that you might have so if you're the

type of person who experiments with

lessons along the way you might have

already tried to do the following so

back in our style dot CSS file

underneath our comment lines you might

have tried to write a bit of normal CSS

so maybe you would target the entire

page and say color orange but you'll

notice that if I save that and refresh

the website nothing happens we would

expect this text to become orange but

that's not happening so don't worry I

don't expect the CSS to be loading yet I

will show you how to correctly load the

CSS on the front end of your website

very soon okay now having said that

looking forward to our very next lesson

we will learn how to do something

actually useful here instead of just as

boring placeholder sentence we are going

to look at the heart and soul of

WordPress and PHP which is functions if

you have no idea what a function is

that's okay that's actually good because

in the next lesson we are going to start

with the very basics it should be a lot

of fun

let's keep it rolling and I will see you

then

hello everyone in this lesson we will

answer the question what is a function

instead of trying to explain with words

what a function is let me show you

visually what a function is so let's

jump into our text editor and open up

the index dot PHP file that lives in our

theme folder let's try to write some new

code here together so delete this sample

line of text and then let's drop in or

enter into PHP mode so remember from our

first taste of PHP lesson to enter PHP

mode it's less than symbol question mark

PHP and then maybe down on this line

let's close out of PHP mode so question

mark greater than symbol and then in

between those two lines so where my

cursor is now we are free to write PHP

code so remember from a lesson or two

ago we tried echoing out a math problem

right we could say echo two plus two so

if I go ahead and save this and then

refresh my website fictional University

dev here we see the answer write two

plus two equals four okay so that should

jog our memory of working with PHP now

let's have our first look at a function

so let's delete this line and let's

create our very own first function we

don't even know what a function is yet

but let's create one so write out the

word function and then a space and then

we can make up a name for our function

why don't we call it my first function

right the name doesn't really matter

it's up to us to choose a name and then

right after that we don't even need a

space let's just open up a pair of

parentheses and then after the opening

close parentheses let's add a pair of

curly brackets these are the same curly

brackets that you use in CSS so you just

hold down the shift key and then press

the key to the right of your P key okay

and in between the two curly brackets I

like to drop down to a new line just to

stay organized okay and in between the

curly brackets let's write out our echo

to

– again now if I save this and refresh

the browser we do not see the number

four we don't see anything it's just a

completely blank page and that's because

this code here that we wrote is a

function definition so really all we did

here with this code is we took the task

of adding two plus two and we gave it a

name my first function so a function

definition like we have here doesn't

actually do anything it's just a

description of an action or a task in

order to actually run this function

right and actually evaluate two plus two

what we can do is below this function

definition so maybe on a new line like

right here

we just type out the name of the

function so my first function and then

include parentheses and let's include a

semicolon at the end of that line and

now if we save and refresh we do see

four so this is how you define a

function it's like the recipe for the

action that you want to take and then

this is how you actually run or call or

use the function now what's cool is you

can use the function again and again and

again you can recycle that recipe so we

could say it again my first function

save it

refresh it and now we see a second for

this is a little bit confusing because

it looks like 44 but really it's just

the number four and then there's no

spacing and then the number four again

so let's try something a little bit

clearer up in our function instead of

echo two plus two let's delete that and

instead let's say echo out a string of

text so give me double quotes and then

let's create an HTML paragraph tag right

so the opening and closing tag and in

between them let's say hello this is my

first function and let's be sure to add

a semicolon at the very end of this line

to let PHP know that we are done with

this action okay and now if we save this

and refresh cool we see it twice because

we are calling the function twice down

here so you only have to define a

function once and then you can use it

and

use it as many times as you want so if I

copy this and paste it again so there's

three of them obviously we see it three

times okay so now that we've learned how

to create a function and then run or

call the function let's go ahead and

delete all of this and try something a

little bit more advanced so first let's

give ourselves a goal let's imagine that

we want to create these two paragraphs

hi my name is John and my favorite color

is blue and hi my name is Jane and my

favorite color is green

now when I say that we want to create

these two paragraphs I don't mean just

type them out like we see here instead

what I mean is because these two lines

are so similar to each other and the

only unique parts are the names and the

colors why don't we try to create a

single function that can generate both

of these paragraphs so let me delete

these and try this out with me up here

and our PHP area let's create a new

function so to do that we just spell out

the word function and then a space and

now we make up a name for the function

why don't we call it greet okay and then

right after that we don't even need a

space open up a pair of parenthesis and

then after the parenthesis let's open up

a pair of curly brackets and then in

between the opening and closing curly

brackets let's drop down to a new line

and then let's echo or output a bit of

text so we want to wrap our text in

double quotes okay so in between those

quotes let's just begin an HTML

paragraph tag then let's close it out

and in between those we will say hi my

name is blank and my favorite color is

blank and then at the very end of this

line let's be sure to end it with a

semicolon

okay and now right below our function

definition here so down here let's just

call or run the function once for John

and once for Jane so greet parenthesis

semicolon that will run it once and then

let's just run it a second time so if I

save this and refresh in the browser

cool we see the two paragraphs so now

all we

to do is find a way to pass information

about John from this function call into

the function itself right because we

don't want it to say blank and blank so

check this out

when we call the function for the first

time in between the parentheses let's

say John and let's do the same thing for

Jane so in between these parentheses

let's say Jane okay now back up in our

function definition within these

parentheses let's add a dollar symbol

and let's say name remember from an

earlier lesson that the dollar symbol is

how you create a variable in PHP this

isn't a special word I just made it up

we could have said unicorn or Itza okay

the name doesn't matter but for now

let's just call it name because that

makes sense right John and Jane are

names so what this is going to do is

it's going to create a variable of sorts

that we can use within the meat and

potatoes of this function so we can use

this dollar symbol name variable

wherever we see fit so all we need to do

now is just remove this blank right we

don't want that and let's replace it

with dollar symbol name okay now before

I explain what's going on here and give

you the technical names of what we're

doing let's just go ahead and save this

and test it out so if i refresh in the

browser cool hi my name is John and my

favorite color is blank hi my name is

Jane and my favorite color is blank so

let's review what's going on here and

let's build up our vocabulary so when we

call the function down here twice this

little bit of data named John and this

little bit of data named Jane those are

called arguments and within a single

function call like this you can include

multiple arguments so check this out

right after the John and quote let's add

a comma and say blue right because blue

was his favorite color let's do the same

thing for Jane

so after this first argument of her name

let's add a comma and include another

argument her favorite color was Green

okay so if we are calling a function and

giving it two arguments we better make

sure that up in our function definition

we are ready for

two parameters think of a parameter as a

hollowed-out variable or a little

container that can receive the incoming

arguments so we already have a parameter

to receive the incoming name so right

after that let's add a comma and then

let's just say dollar sign color again

the parameter name doesn't really matter

you can make it up you can use whatever

name you want okay but what's important

is that now we can use dollar symbol

color within the body of this function

so let's go ahead and delete this second

blank here and let's replace it with

dollar symbol color let's save this and

refresh cool so we see my favorite color

is blue and my favorite color is green

okay so that's how you can create your

own function and use parameters to

receive the incoming arguments so that

your function can be flexible okay now

let's change gears and bring this full

circle let's tie it back to WordPress so

the beauty of WordPress is that it comes

bundled with tons of its own pre-built

functions that we can leverage right so

WordPress has already created and

defined lots of functions and then we

just get to come along and run or call

or use those functions so for example

down here once we are out of PHP mode

right so this line closes PHP mode so

down here in regular old HTML mode let's

imagine that we want to create a large

HTML headline and we want the contents

of this headline to be our websites

overall name or title

well WordPress has a function that will

give us our website's name so check this

out in between the h1 tags let's drop

into PHP mode okay and then let's exit

PHP mode okay but in the middle of those

two let's run or call a wordpress

function named blog info okay so this is

a function that has already been created

and defined by WordPress and what this

function can do is give us all kinds of

information

about our website and within these

parentheses we just provide an argument

to tell WordPress what little bit of

info in particular we are looking for so

single quotes and let's say name we want

the name or title of our website and

let's add a semicolon right after that

just to tell PHP that we are done with

this task okay and if we save this and

refresh cool we see the name of our

website now in case you're wondering

where this is coming from let's hop over

in a new tab into the admin dashboard of

our WordPress website and towards the

bottom of this left-hand sidebar hover

over settings and then choose general

okay so see this first field named site

title that's the name of our website so

if we change this from fictional

University to amazing University and

then scroll down and click Save now if

we refresh the front-end of our website

we see that name change reflected cool

so this function blog info we didn't

create or define this function WordPress

creates it for us and then we just get

to leverage it now the cool part is that

we don't need to understand how

WordPress goes and talks to the database

to dynamically find the name of our

website WordPress abstracts away all of

those technical database details so we

don't have to worry about it all we have

to do is run this convenient function

okay and that's really the heart and

soul of 95% of custom WordPress

development it's just a matter of

knowing the wordpress functions that are

at our disposal and then running them in

the right place at the right time let's

try one more example before we close out

this lesson so let's imagine that below

this headline we want to include a

paragraph that includes our website's

slogan or tagline or description in case

you're wondering what I'm talking about

back in the admin dashboard on this

general settings screen we see that the

second field is named tagline so by

default WordPress sets this to just

another WordPress website but we could

change this to

the best university in the world okay

and then scroll down and save that okay

and then back in our code if we want to

dynamically output that tagline in

between the paragraph tag let's just

drop into PHP mode and close out but in

the middle let's call that blog info

function again and then we can give it

an argument to tell it which piece of

information in particular we want it to

return and we will say description let's

add a semicolon here and then let's save

this and refresh cool there's our slogan

or tagline and now if in the future we

ever changed the tagline from the

WordPress admin area so if I change this

to we are pretty good and then save it

our front-end web site will

automatically always display that value

okay so now at this point we are at

least a little bit familiar with what a

function is and now there's only one

more topic we need to go over before we

can start doing powerful actually useful

WordPress II things and that topic is

arrays so what in the world is an array

well that's exactly what we are going to

cover in our next lesson I'll give you a

hint

right now though understanding arrays is

what's going to let us start displaying

actual dynamic WordPress content on the

front end of our website

things like posts and pages it's going

to be a lot of fun let's keep things

rolling and I will see you in the next

lesson hello everyone in this lesson we

will answer the question what is an

array so for starters even outside the

context of programming we might hear a

car dealership say that a car is

available in a wide array of colors okay

so let's think of an array as a

collection now with that in mind let's

jump right into the code so here I am in

the indexphp file that lives in our

theme folder and why don't we

head and delete all of this test code

from our previous lesson and let's try

something new so if we think back to

that first taste of PHP lesson you'll

remember that we learned how to create a

variable so let's try that again so I

will go into PHP mode down here I will

close out of PHP mode and then to create

a variable you just use the dollar sign

and maybe I want to create a variable

that stores my name so equals bread this

variable name isn't special I just made

it up it could be unicorn or pizza okay

but the idea here is that I'm setting

this variable to have a value of Brad

and now I can use that variable anywhere

else on the page so maybe down here once

I am back in HTML mode I could create a

paragraph that says hi

my name is and then maybe drop into PHP

mode so I can echo out that my name

variable okay and then close out the

sentence with a period and then close

out the HTML paragraph tag okay so if I

save that and test it hi my name is Brad

so this is an example of a very simple

variable that only contains one single

little bit of data right just one single

name however what if we want it to store

multiple names within a single variable

so that's where arrays come into the

picture so check this out let's start

over again

so let's go into PHP mode and let's

imagine that I want to create a variable

named names right plural now the name of

the variable doesn't matter so this

could be pizzas doesn't matter I just

chose names to try to indicate that I

want to store multiple values right

plural so what does our variable equal

well we can say array okay and now

within these parentheses right after the

word array we can store as many names as

we want so check this out I could say

Brad comma John comma Jane comma me

house a lot you get the idea I can store

as many names as I will

so in PHP an array is a special type of

data an array is a collection of

multiple values okay and let's imagine

that down here in HTML mode

I want to access one of these names so

maybe I have an HTML paragraph tag and I

want to say hi my name is blank

right so I would drop into PHP to access

our variable so if I want to echo out

something that lives in the names

variable okay and then to look inside

the array or look inside the collection

right here we can use square brackets on

your keyboard this is directly right of

the P key okay now let's say for example

that I want to access the first value in

this array so Brad I would just include

a zero within the square brackets you

might think that it would be a 1 to

access the first item but it's actually

a zero in most programming languages PHP

included arrays are zero based meaning

the first item is zero instead of one so

for example if I wanted to access the

second value of John I would include a 1

here if I wanted Jane a 2 if I wanted

meows a lot a 3 okay so if I save this

and refresh cool we see my name is meows

a lot if I change it back to a 2 right

so 0 1 2 we should see Jane cool but now

the question is why why would we do this

why would we want to store multiple

values in a single variable what is the

point of doing this what is the

advantage of doing this well there are

several reasons but probably the biggest

reason is for something called looping

so what in the world is looping what is

a loop well let's imagine we want to do

something once for each item in this

collection so let's imagine we want it

to output this sentence of hi my name is

blank we wanted to do that once for each

item in the collection so technically we

could just copy and paste this line and

have it four times and then change this

to 0

two three right so if I save this that

technically works but this is terrible

code this is really repetitive and it's

just not an efficient way of doing

things instead what we can do is

leverage the power of an array and

programmatically loop through the

collection and do something once for

each item so check this out let me show

you what I mean

but actually before we worry about

outputting these names let's just

practice a very basic loop first so

let's give ourselves a goal for whatever

reason let's imagine we want to output a

bulleted list on the page that counts to

100 right so imagine we want to create

an HTML list item in a series of them

something like this it goes one two

three four up to a hundred so it would

take a long time to type that out by

hand but programming and loops make that

very easy to do so check this out back

up here while we are still in PHP mode

let's use something called a while loop

so while parentheses and then right

after that curly brackets okay so how

does the while loop work well whatever

lives within the curly brackets will

happen again and again and again until

whatever we place in these parentheses

evaluates to false so let me show you

what I mean right above this while loop

let's create a variable named count the

name doesn't matter I'm just choosing

count and let's set it to equal one now

remember our goal is to output a

bulleted list that counts to a hundred

so within our parentheses let's say that

as long as the following thing is true

keep looping so in the parentheses we'll

say as long as our count is less than

100 keep doing whatever we tell it to do

within these curly brackets so then in

the curly brackets let's just echo out

an HTML list item okay and in that list

item we don't want to hard-code a value

of one or two or three instead let's

output our count variable okay so we are

saying that count begins with a value of

one so then the first

time that the while loop runs this will

echo out a 1 and then right after this

line let's just increment or increase

the count variable so we can say count

plus plus and that will add 1 to it so 1

plus 1 is 2 so now count equals 2 so

then the while loop will run again and

it will say ok now the count equals 2

that's still less than 100 so this will

evaluate to true so then this will run

again so then it will output 2 then it

will add 1 to that right so then count

will equal 3 so on and so forth so this

will just keep repeating until finally

count will equal 100 and then the while

loop will say hey 100 is not less than

100 so then this will evaluate to false

and then the while loop will finally end

I know that's a lot to absorb so you

might need to re-watch this a few times

or pause the lesson and experiment with

a while loop yourself but if I save this

and refresh cool we see a list that

counts all the way oh actually to 99

instead of a hundred so back in our code

let's just change this to less than 101

cool so now it counts all the way up to

100 all right so now that we've seen a

relatively simple while loop in action

let's try something a tiny bit trickier

so let's delete the while loop and our

count variable and let's get back to the

task at hand remember we want to loop

through our array of names and do

something once for each item in the

collection so maybe output a sentence

that says hi my name is blank alright so

here's how we can do that let's use a

while loop again

so while parentheses and then curly

brackets okay and we are going to need a

count variable again so let's create a

variable and name it count and this time

let's set it to equal 0 instead of 1

right because arrays are zero based in

order to access the first item in the

array we use a 0 okay so down in our

while loop within the curly brackets

what we want to do for

each item in the collection is just echo

out an HTML list item that says hi my

name is blank okay so we remember from

about five minutes ago in order to

access one of these items we just use

the variable name right they all live in

the variable of names and then to look

inside the array you use square brackets

so to access the first item it's a zero

to access the second item it's a one

okay so we don't want a hard code a

number here instead we want to use our

count variable so in between the square

brackets let's just say count okay so

the first time the loop runs it will be

a zero and then let's be sure to

increment the count so on the new line

let's say count plus plus so then the

next time the loop runs count will equal

one so that will give us John then it

will increment again to two which will

give us Jane you get the idea so now we

just need to tell the while loop how

many times it should repeat itself right

so within these parentheses we will say

as long as the following thing is true

so let's say as long as count is less

than and now you might think that we

would just say 4 right because there are

four items in the array but we don't

want to hard-code a number here because

what if in the future we added a 5th

name to the collection barks-a-lot

ok so we don't want to have to babysit

this code and keep updating this number

here so instead what we can do is have

PHP count the number of items in the

array for us so we'll say as long as

count is less than and then we can use

the PHP tool named count and then open

up a pair of parentheses ok and then in

those parentheses we just give it the

name of our variable right names is the

variable that contains the array so PHP

will automatically count it and say yep

there are five items in the array so as

long as count is less than 5 this will

just keep happening again and again and

again so let's save this and refresh

awesome now if this is not your first

time programming and you've worked with

before you might be yelling at the

screen right now saying Brad why on

earth would you use a while loop here

when you could have used a for each loop

well that's a great question with an

even better answer I want us to be

familiar with the while loop because

that's what WordPress uses to loop over

real content like posts and pages right

so instead of this hypothetical

worthless list of names here imagine if

we had an array or a collection of blog

posts and we wanted to loop through

those blog posts and display them on the

front end of our website for our

visitors well that is exactly what we

are going to do in our very next lesson

it's probably going to be the most fun

we've had in the course so far let's

keep it rolling and I will see you then

hello everyone in this lesson we will

learn about the famous loop in WordPress

before we worry about what that means

let's first give ourselves a goal so

let's imagine that on the home page of

our website

we want to output our most recent blog

posts now before we dig into any code

let's first make sure that we have more

than one blog post to work with so let's

jump over to our admin dashboard and

from the sidebar let's click on posts so

at the moment I just have the one single

hello world demo post but let's go ahead

and create a few dummy posts right now

just so we have multiple posts to work

with so for the title let's just say

test post and then you can just type out

a bit of gibberish or paste in some

lorem ipsum doesn't matter but go ahead

and click publish and why don't we

create at least one more dummy post so

add new I will call it second test post

add a bit of dummy content and go ahead

and publish again okay so now if I click

on posts from the admin sidebar you can

see that I have three posts so now we

can go ahead and learn how to output

those blog posts

on to our homepage here let's go ahead

and jump over to our text editor program

and in our theme folders index dot PHP

file let's delete all of this test code

from our previous lesson okay so we've

got a clean slate let's go ahead and

jump into PHP mode and then let's create

a while loop okay so the word while and

then a pair of parentheses and then

right after that a pair of curly

brackets okay so this is our empty

skeleton of a while loop and now

remember in our previous lesson we had

to do all sorts of things like create a

count variable and manually increment

that count and then come up with our own

logic like if count is less than a

certain number well this time around we

don't have to do any of that we are no

longer trying to work with hypothetical

lists of names now we are trying to work

with real WordPress content and

WordPress gives us the exact tools and

functions to do that without breaking a

sweat so within the while loop

parentheses here all we need to do is

use a special wordpress function named

have underscore posts and remember to

call or run a function you include a

pair of parentheses so forget about

programming this almost makes sense just

from an everyday English standpoint how

many times do we want to repeat or run

this loop well keep looping as long as

or while we still have posts to loop

through okay and then within the curly

brackets what do we want to do once for

each blog post well before we try to

output the title or the content of a

post first we need to call a wordpress

function named the underscore post this

is a WordPress function that we can call

and leverage and it does several

important things for us remember in our

previous lesson we had that count

variable well we don't need to do that

now because this the post function will

keep track of which post we are

we working with so each time our while

loop runs this the post function will

tell WordPress to get all of the

relevant information about the next post

ready for us to use so check this out

right after this the post and then a

semicolon why don't we drop out of PHP

and then on this line where we are

closing the curly bracket let's drop

back into PHP and what this does is now

in between those two lines where my

cursor is now we are still within the

while loop but now we are in HTML mode

so let's go ahead and create a heading

level to HTML element and inside the

headline if I say hello and then save

this and refresh we see three hellos

because we have three blog posts now

obviously it's not very useful to just

say hello instead we probably want to

output the title of each blog post now

watch how easy this is in between the

headline let's drop into PHP and now we

can use a wordpress function that is

conveniently named the underscore title

okay so we just call this function let's

save this and refresh cool we've got the

title for each post next let's try to

output the body content for each post

right below the title so back in our

code underneath this h2 let's just drop

down to a new line and I want to call a

PHP function so let's go back into PHP

mode and you might be able to guess the

name of the function that we want to run

it's name is the underscore content

semicolon okay and then maybe right

below this line why don't we add an HTML

horizontal rule just to create some sort

of visual separation between each of the

three posts in the real world we would

use CSS to accomplish that but this is a

quick and dirty solution so let's save

this looks good let's give ourselves

another goal let's imagine that whenever

we click on one of the head

lines we want to be taken to a detail

screen for just that one single

particular post so if we want to turn

the headlines into links if you've ever

worked with HTML before you know that we

just want to wrap this content here in a

tags

okay so right before the title let's

open up an HTML a tag and then right

after the title gets output let's close

that a tag okay and then in HTML you

give the opening a tag and attribute

named href and this tells the web

browser where it should go

when someone clicks on the link so the

question becomes what do we want to type

within these quotes what URL do we want

to send the visitor to well you might

have guessed it but WordPress has a

function that will output the perfect

URL here so within the quotes let's drop

into PHP and then let's call a function

named the underscore perm as in

permanent perma link parentheses because

we're calling the function okay let's go

ahead and save this and test it out cool

so the headlines look like links and if

I click on this first one I'm taken to a

screen with only that one single post

and more importantly notice the URL up

here in the address bar WordPress

automatically knows what data to query

from the database based on the URL that

we visit right so this is the permalink

or slug for second blog post so

WordPress knows to fetch or query just

that post from its database back on the

home page when we are simply at

fictional University dev in this case by

default WordPress will query or fetch

your 10 most recent posts when you're on

the home page but if we go to one of

these detail screens for just a single

blog post WordPress will see the

permalink or slug in the URL it will

only fetch or query that one post and

that way when we try to loop over all of

the current posts there will only be one

single post to

loop through okay let's give ourselves

another goal now that we are on this

single detail screen for just one post

for example it doesn't make much sense

for this headline to still be a link

right because we are already on the

detail screen for this post there's no

reason to click this again so the

question becomes how do we let that

remain a link while we are on the home

page while removing the link once we get

to a single detail page well check this

out back in our text editor I want you

to create a brand new file in our theme

folder so new file let's name this new

file single dot PHP and within the new

file let's just type out a bit of random

dummy text like Hello one two three and

if we save this and refresh here we see

that dummy text and we are on the URL

for a single post but if we go back to

our home page we see that it is still

powered by index dot PHP so what this

means is that depending on the current

URL WordPress will be on the lookout for

different file names in our theme folder

so our home page uses index dot PHP but

then if we click on one of these single

posts WordPress will look within our

theme folder for a file specifically

named single dot PHP if that file

doesn't exist then WordPress will use

index dot PHP as a universal default

fallback okay but having said all of

that let's get back to the task at hand

remember on this screen we just want to

show the blog post title and the content

but we don't want the title to be a link

like it is on the home page so here's

what we can do back in our text editor

let's go back into our index dot PHP

file and let's select and copy the

entire contents into our clipboard and

then let's go back into single dot PHP

and let's delete this dummy text and

then paste in our clipboard and now

let's simply remove the

tags that surround the title so let's

delete the closing tag and let's delete

the opening tag here and now let's go

ahead and save and refresh cool so now

on the home page

each headline is a link but then once

you click on one of those since you're

already on the detail screen there's no

need for the headline to be a link cool

and we can adjust our single dot PHP

file further to maybe remove this

horizontal rule line because there's no

need to separate the content from

anything below it so back in our text

editor let's delete that HR element

perfect okay now at this point let's

change gears so far in this lesson we've

been working with posts but WordPress

also has pages so for example let's jump

back into the WordPress admin dashboard

and in the left hand sidebar let's click

on pages and we could try to work with

this sample page but just to make sure

everyone's on the same page why don't we

use the add new button to create a new

page let's give it a dummy title like

test page 1 2 3 and then for the content

let's just include a bit of dummy lorem

ipsum text then go ahead and publish or

save the page ok and now you'll notice

this permalink here you can always click

this to preview the page cool so that

takes me to a screen with only the

content for that one page and if we look

in the URL bar we can see the slug for

that page

however even though this screen only

displays information for that one single

page we see that the headline is still a

link which means that this URL and this

screen is being powered by index dot PHP

instead of single dot PHP and that's

because WordPress only uses the single

dot PHP file for individual posts for

individual pages WordPress looks in our

theme folder for a file named page dot

PHP so why don't we go and create that

file right now so back in our theme

folder let's create

new file let's name it page dot php' and

instead of typing out the loop code

again why don't we just go into single

dot PHP copy all of this into our

clipboard and then paste that into the

new page PHP and just to prove to

ourselves that this is indeed the file

being used maybe right above this

heading level two why don't we create a

heading level one that says this is a

page not a post let's save this refresh

cool so we see this which proves that

we're using page dot PHP here's the

title and the content if we go back to

just fictional university dev homepage

this is powered by index dot PHP and if

we click on one of the blog posts this

screen is powered by single dot PHP so

the important concept for this lesson is

that depending on the URL you visit

WordPress is going to use different

files in your theme folder to control

what you see on the screen here and even

though we have these different files

like page index and single they all have

one very important thing in common and

that is that they all use the famous

loop which is this general pattern of

doing something once for each item in a

collection even if that collection only

has one item in it okay but in the

WordPress universe the loop is a famous

term any WordPress developer will know

what you're talking about if you mention

the loop the loop is at the heart and

soul of WordPress and it's something

that we will use again and again

throughout this course now that's

actually going to bring this lesson to a

close in our next lesson we will learn

how to create a global or Universal

header and footer should be a lot of fun

let's keep it rolling and I will see you

then

hello everyone in this lesson we will

learn how to set up a global header and

footer if you don't know what I'm

referring to let me show you so here's

the home page that we set up in our

previous lesson and on most websites

you're going to want some sort of header

area that appears on every page of the

website same thing with the footer area

so if you want to add content at the

very top and bottom of your pages your

first instinct might be to go into your

index dot PHP file in your theme folder

and just add something up at the very

top so even before the opening PHP tag

you can include an HTML headline that

says this is the header area and for the

footer down at the very bottom after the

closing PHP tag we could say HTML

paragraph this is the footer area and if

I save this and refresh the homepage

cool we have a header and a footer so

that works but it's not ideal because we

want this same identical header on every

single page of the site but we know from

last lesson that index dot PHP doesn't

power every page on our website so for

example if we click on one of the blog

posts we lose our header and footer

because this screen is powered by single

dot PHP and don't forget about page dot

PHP which powers individual pages

instead of posts so long story short if

we wanted this header and footer on

every page we would have to duplicate or

copy and paste this code into multiple

different template files now duplicating

code like that is almost always a bad

practice because then if in the future

maybe a week from now we want to change

something in the header we don't want to

have to make that change in 5 or 10 or

20 different template files instead we

want our header code to live in just one

file right we want a single source of

truth so check this out right now I want

you to create a new file in your theme

folder

so new file and let's name this new file

header dot PHP and in this new file

let's write out a bit of dummy text so

maybe an HTML headline that says

greetings from headerphp alright let's

save this and then jump back in to index

dot PHP and let's delete this headline

that we set up a couple of minutes ago

and instead let's write a bit of code

that will pull in the contents of header

dot PHP so let's enter into PHP mode and

then call a wordpress function named get

underscore header and remember to call a

function you include parentheses right

after it semicolon and we could close

out of PHP here but because we are just

going to drop right back into PHP for

all of this code why don't we just get

rid of this closing tag and also get rid

of this opening tag so that way we just

stay in PHP mode anyways back to the

task at hand this get header function

will pull in the contents of header dot

PHP so if we save this and refresh the

home page cool we see greetings from

header dot PHP next let's do the same

thing for our footer so back in our text

editor let's create a new file in the

theme folder let's name this new file

footer dot PHP in this file let's write

out a bit of dummy text so maybe a

paragraph that says greetings from

footer dot PHP save this and then back

in our home page index dot PHP file

let's replace this down here with code

that will dynamically pull in the

contents of the footer file so we could

drop into PHP mode down here or we could

just write this code up here while we

are still in PHP you can probably guess

the name of the WordPress function we

want to use git underscore footer ok

with that in place

we save cool greetings from footerphp

and if we click on one of the blog post

links we do not see the header or footer

but all we need to do is go into single

dot PHP and call those get header and

get footer functions so back in the text

editor let's jump into our single dot

PHP file and right before the while loop

let's say git header alright and then

right after the curly bracket that

closes the while loop let's say get

footer let's save that and now our

single post screen is in business so

that takes care of individual posts

let's not forget about individual pages

remember in our WordPress admin

dashboard if we click on pages in the

sidebar in our previous lesson we

created this dummy page test page one

two three and if I use this view link

here to preview it this screen is

powered by page dot PHP so let's go

ahead and jump into our text editor and

hop into page dot PHP and let's pull in

our global header and footer so git

header and down here below the curly

braket get footer cool so now whenever

we update header dot PHP or footer dot

PHP we can rest assured that our entire

website globally will be updated now

before we bring this lesson to a close I

have two more tasks for us that are

directly related to the header and

footer first let's learn how to load our

CSS file on the front end of our website

and secondly let's learn how to add the

black admin menu bar that's supposed to

sit at the top of our website globally

you can see the menu bar I'm referring

to if you jump over to the WordPress

admin screens but that bar should also

be on the front end of our website while

we are signed in okay but let's start

with our fur

tasks of actually loading our CSS file

on the front end of our website if

you've worked with HTML in the past you

probably already know how to load a CSS

file right you include it towards the

top of your HTML file in the head

section so to get started let's jump

into our text editor and open header dot

PHP and let's delete this dummy text and

start fresh let's begin with the basic

skeleton of an HTML document right so

you always begin with the doctype and

then right below that you create an HTML

sandwich and then within that you have

two sandwiches the head sandwich and the

body sandwich so within the body section

is where you include your actual content

right so maybe you'd have a headline

that says fictional University all right

but back to the task at hand the head

section is usually where you load your

CSS file only in WordPress instead of

manually including our CSS file using

link instead of doing that in WordPress

we just call a PHP function named WP

underscore head and this lets wordpress

be in control of our head section

so imagine down the road we install a

few wordpress plugins and maybe those

plugins need to load CSS files of their

own so this function lets WordPress have

the final say and load whatever it needs

to load in our head all right now with

this line of code in place all we need

to do is programmatically tell WordPress

to load our CSS file and the way that we

do that is by creating a brand new file

in our theme folder and let's name this

new file functions dot PHP now this new

functions file is a bit different from

all of the other files we've been

creating so far all of our other files

are what we might call template files

right they control the HTML that the

general

we'll see on our website well think of

this functions dot PHP file has a bit

more private this is our behind the

scenes file this is where we can have a

conversation with the WordPress system

itself alright but back to the task at

hand we want to tell WordPress to load

our CSS file so within this functions

dot PHP file let's open up PHP and then

call a wordpress function named add

underscore action this is a super useful

WordPress function that we will use

again and again throughout the course

within these parentheses this function

wants us to give it two arguments so for

example quotes and then a quotes B now

obviously we're not going to pass it an

argument of a and B I'm just including

these as placeholders okay now let me

explain what this function actually does

so WordPress lets us give it

instructions and tell it what to do by

using this add action function the first

argument is where we tell WordPress what

type of instructions we are giving it

depending on what we are trying to do

WordPress will run this code at

different times in this case we want to

load a file so the special wordpress

hook name that we want to hook on to is

WP underscore on Q underscore scripts

okay

and the name here definitely matters you

need to spell it exactly right or

WordPress won't know what you're trying

to do alright so this is our way of

saying hey WordPress I want to load some

CSS or JavaScript files and then this

second argument instead of B let's

delete that and what we do here is give

WordPress the name of a function that we

want to run and it's important to point

out that this is going to be a function

that we create and define in about ten

seconds from now so in this case we need

to make up a name why don't we name our

function fictional University resources

or fictional university files

how about univer

City underscore files okay for this

argument the name doesn't matter it just

needs to be something that makes sense

to you personally and that you can

remember all right now right above this

line why don't we create a function with

this exact name so we will say function

and then spell out that name University

underscore files parentheses and then we

are defining or creating the function so

then curly brackets and now within these

curly brackets within the body of this

function we can load as many CSS or

JavaScript files as we want

for now though we just want to load one

CSS file right our main style dot CSS so

we will call a wordpress function named

WP underscore on cue style and within

the parentheses this function is looking

for two arguments for the first we just

need to make up a nickname for our main

stylesheet this name does not matter it

just means to make sense to us why don't

we call it university main styles okay

and then the second argument is just a

location that points towards the file

later on in this course we will learn

how to point towards custom folder

directories and look up specific file

names but in this case since we just

want to work with the main style dot CSS

file and that's sort of the default

style sheet in WordPress we don't need

to manually spell out a location here we

can just call a wordpress function named

get underscore stylesheet underscore URI

okay and that's a WordPress function

that we are calling so include

parentheses right after it cool and if

we wanted to include a second or third

CSS file you could just duplicate this

line here and if you wanted to load a

JavaScript file instead of CSS you would

just change this word from style to

script singular script not plural

but I wouldn't worry about that because

I will show you how to load a JavaScript

file very soon okay but for now if we go

ahead and save this file and let's also

be sure to save the recent changes to

headerphp and then if we refresh in the

browser cool we see that all of the text

is orange and that's because in our

style dot CSS file remember we wrote

this as a test in an earlier lesson so

if I change orange to green you get the

idea our CSS file is loading now before

we move on to our final task for this

lesson which is loading the black admin

menu bar up at the top here before we

get to that I want to take a minute to

review all of that code we just wrote in

our functions PHP file because this can

definitely feel confusing or

overwhelming so let's break it down

really all we did was create or define a

brand new function that we chose the

name of we got to make this name up the

name doesn't matter within that function

we called a wordpress function and

pointed towards the CSS file that we

wanted to load okay but remember that

when you create and define a function

the function doesn't actually run

someone or something needs to call that

function later on and that's exactly

what we are doing in this line of code

WordPress has a function named add

action and you give it two arguments

let's begin with the second argument

this is just the name of a function that

you want WordPress to call at a specific

moment and this is how you say which

moment that should be so WordPress has

tons of different hooks or moments that

we can hook on to so altogether this

line of code is basically saying hey

WordPress right before you get ready to

output your code that's gonna go in the

header that's gonna go in this WP head

area right before you're getting ready

to output that we want to tack on to

that moment and we want you to run our

custom function now before we move on I

want to go over one last topic that is a

common points of confusion for people

you might be thinking hey I thought

whenever we

halt or run a function we have to put

parentheses right after it right we did

that here and we've been doing that

throughout all of our template files so

why don't we include parentheses after

this name here right if we want to call

this function why don't we add

parentheses here well we don't add the

parentheses because we don't want to

literally call this function right now

which means instead of you and I

immediately calling the function right

here now what we're doing is just

telling wordpress hey here's the name of

the function it's up to you WordPress to

actually run it at the precisely right

moment okay now let's move on to our

final task of adding the black admin bar

up at the top here so to begin let's

jump into header dot PHP and what I want

to do is move the closing body and

closing HTML tags out of this file and

into footer dot PHP if that doesn't make

sense to you right now that's okay just

follow along with me so delete the

closing HTML and delete the closing body

tag all right let's save this and then

jump into maybe index dot PHP just for a

frame of reference from a bird's eye

view how is our page getting created so

first we include our header dot PHP then

we output the main content meat and

potatoes of the page and then we have

footer dot PHP so back to header we

don't want to close out the body and

HTML sandwiches within this file we want

to do that at the very end of the HTML

that gets generated so over in

footerphp underneath our dummy text

let's close out the body tag and close

out the HTML tag and now here's the

important part right before the closing

body tag I want you to drop into PHP and

call a function named WP underscore

footer if you've ever worked with

JavaScript before you know that a lot of

times you don't want to load JavaScript

files up in the head section instead you

want to load them right before the

closing body tag so this is just our way

of giving WordPress the final say

before we close out the body tag so

WordPress can use this for all sorts of

things like loading JavaScript files or

in this case for adding the black admin

menu bar up at the top of the page okay

so with this in place if we save this

file and refresh awesome

there's the admin bar and that's

actually going to bring this lesson to a

close at this point in the course you

might be thinking to yourself hey when

is the website gonna start looking like

it was built in the last decade because

right now this plain white background

and the text and the full width of it it

looks like it was built in 1995 well in

our very next lesson we will address the

visual or graphic design of our theme

let's keep our progress rolling and I

will see you then hello everyone in this

lesson we will learn how to convert a

static HTML and CSS page into a living

breathing WordPress theme so up until

this point in the course the wordpress

theme and site that we've been working

on has zero style or designed to it now

this isn't very realistic is it because

in the real world we're never gonna make

any money if our web sites are this ugly

so we need to add design and art

direction to our theme now we could

start writing CSS together and try to

create something that looks nice but

this isn't a course about CSS in this

course we want to stay focused on

WordPress PHP and a little bit of

JavaScript so in order to avoid getting

bogged down in CSS and design for the

next 20 hours what we're going to do is

download a little bit of HTML and CSS

that I've already written for us but it

could just as well be HTML and CSS that

you or your coworker wrote the actual

HTML and CSS itself doesn't matter what

matters is that we learn how to

integrate it into a living breathing

WordPress theme okay so right now let's

go and download my starter code I want

you to open a new tab in

web browser and visit this URL so it's

githubcom slash learn web code slash

university – static anyways once you're

on this page we just want to use this

green clone or download button that we

see here and once you click on that then

we are interested in this download zip

button and once you go ahead and extract

that zip file you will have a folder

named University static master now this

time around it doesn't matter where you

place this folder because the folder

isn't going to have anything to do with

our wordpress site we're basically just

going to copy and paste stuff from this

new folder into our wordpress theme

folder okay but first let's just go

ahead and look within this new folder

and the first thing I want you to do is

find the indexhtml file and preview it

in your web browser

so in this empty Google tab I will just

drag indexhtml on top of it and this

page is just static HTML this file has 0

PHP in it and has absolutely nothing to

do with WordPress so none of the links

are real they don't go anywhere

none of the buttons do anything it's our

job now to copy and paste this HTML into

our WordPress theme and then sort of

hollow it out and program it to pull in

real user generated WordPress content

like posts and pages so we want to start

moving over some of this HTML into the

WordPress theme that we've been working

on that lives at fictional University

dot dev and the question of the moment

is where do we begin

well it's just personal preference but I

always like to begin with the header so

in this case the part that I'm

highlighting right now we've got the

logo in the top left and the navigation

links and buttons in the top right so if

we want to move or copy and paste this

into our theme why don't we open up that

new folder that we downloaded just a

moment ago and let's open this

indexhtml file in our

editor all right so this is the HTML

that is creating this page and if we're

interested in this top header part all

we need to do is look right below the

opening body tag here and we see a

header element so let's just place our

cursor at the very beginning of that

header tag and then scroll down a bit

and you'll see that that header element

closes right here so I'm just going to

hold down the shift key on my keyboard

and click at the end of it here cool and

now with that code highlighted let's

just copy it into our clipboard and now

we want to paste it into one of the

files in our wordpress theme folder so i

know this is getting a little bit

confusing that's why I'm using one text

editor with a light color scheme and

another text editor with a dark color

scheme right so this dark screen is the

files that we just downloaded a minute

ago and this light screen is the

WordPress theme folder that we've been

working on for several lessons now so

here's what I want you to do in your

theme folder jump into our header dot

PHP file and right below the opening

body tag let's delete this h1 element

and then go ahead and paste in your

clipboard okay and if we save this and

refresh our wordpress site here's the

new header content now it's not styled

yet and that's because we haven't moved

over any CSS code yet don't worry we'll

do that in just a minute or two but next

let's move over the footer from the HTML

page right so on this page if we scroll

down to the very bottom we see this

footer section that we are probably

going to want on every page of the

website so back in the recently

downloaded indexhtml file if we go

ahead and scroll down to the very bottom

of it right above the closing body tag

and this script tag we see a footer

element so why don't we place our cursor

at the end of the footer element and

then scroll up a bit okay and here we

see the opening tag for the footer so

let's just pull down the shift key on

our keyboard and click at the very

beginning of the footer element then

copy this into our clipboard

and then we want to paste it into our

theme folders footer dot PHP file so

back in our WordPress theme folder jump

into your footer dot PHP file and we

want to leave these lines intact but

let's go ahead and delete this dummy

paragraph and then just go ahead and

paste in your clipboard and if we save

that and refresh the wordpress site now

we've got the footer in place however we

still don't have any sort of styling or

design so next why don't we take the CSS

from this page and add it into our

WordPress themes style dot CSS file so

in that new folder that we downloaded in

this lesson go ahead and open the style

dot CSS file in a text editor and we

want to copy everything in this file

into our clipboard so press command a if

you're on a Mac or ctrl a if you're on

Windows that will select everything and

then copy it into your clipboard and

then back in your WordPress theme folder

jump in to style dot CSS remember we

created this file in this comment back

when we first created the theme now we

definitely want to leave this comment in

place but right below it we can delete

this test placeholder CSS we had and

then let's just paste in our clipboard

then save this file and then if we

refresh on the front end of our website

we see the hint of a design shining

through okay now looking at this page I

see all sorts of things we need to fix

so let's just start working through it

bit by bit

so you'll notice down here in the footer

underneath this connect with us column

back in the HTML template for this page

they're supposed to be social network

icons there and when I created this page

I used an icon package named font

awesome so we just need to make sure

that we load the font awesome icon pack

in our WordPress theme let me show you

what I'm talking about so if we open the

indexhtml file that we downloaded

earlier in this lesson and we scroll up

to

very top of it you'll notice that in the

head section on this line I'm loading

the font awesome icon library now your

first instinct might be to copy and

paste this line into the header dot PHP

file in WordPress but that's not the

ideal way of doing things let me show

you why

so back in our wordpress theme folder if

we jump into header dot PHP up at the

top here's our head section and remember

that instead of loading CSS files

directly here we added this WP head

function so that WordPress can be in

control of loading different files and

assets so if we want to load another CSS

file that loads up the font awesome icon

pack we actually want to jump into our

themes functions dot PHP file now

remember that this is the line of code

that loaded our main style dot CSS file

so if we want to load another CSS file

what we can do is just right above this

line let's call the WP on cue style

function again all right now within the

parentheses we want to pass in two

arguments the first is a nickname that

we get to make up why don't we call this

one font awesome

the name doesn't matter it should just

make sense to us and then comma and then

let's include a second argument and this

just needs to be a location that points

towards the file now if we jump back

into our indexhtml template file you

can see here that I was loading font

awesome from an external URL so let's

just copy and paste part of this URL

into WordPress so do this with me place

your cursor in between this colon and

the first forward slash and then I want

you to select all the way to the end of

the file name so it ends in dot CSS okay

so with that selected let's copy it into

our clipboard and then back in our

wordpress functions PHP file just paste

that in between the quotes for this

second argument cool so now if we say

and refresh those icons are in place now

let's move on to the next fix so the

next thing that I notice is that the

text on this page is using a generic

font but the text on the HTML template

is using a custom font and if we look at

this indexhtml file in our text editor

right above the font awesome line you

can see on this line I'm loading custom

fonts from Google so if we want to move

this over into WordPress let's just jump

back into our themes functionsphp file

and right above the line that we just

created a moment ago let's add a new

line and let's just call that WP on cue

style function again so in the

parentheses the first argument is a name

that we make up let's call it custom

google fonts and then let's add a comma

and quotes for the second argument and

we just need a URL that we can paste

into there

so back in indexhtml on this google

fonts line place your cursor in between

the colon and the first forward slash

and then drag to the right and stop

right before that ending quote ok with

that selected let's copy it and then

back in our wordpress file paste it into

the second argument cool now let's save

that and refresh our WordPress site and

it's a subtle change but you can see

that we are now using custom fonts next

let's focus on the actual content of the

homepage right so instead of this

generic listing that loops through our

blog posts instead of that why don't we

work on importing this custom welcome

area and two column layout and slideshow

so to do that let's jump back in to our

indexhtml template and you can scroll

up to the very top and then you'll

notice that we've already imported this

header element so scroll down a bit

until you get to the end

the header element and then let's place

our cursor right before this page banner

element okay and then let's scroll down

all the way to the bottom right before

the footer element begins so we don't

want to include this we've already

copied and pasted that so just hold down

shift and click right here at the end of

this div so let's just copy that to our

clipboard and then let's jump over to

our wordpress theme folder and the file

that controls the homepage is index dot

PHP now in this file we still want to

begin by including the header template

and we still want to end by including

the footer template but we want to get

rid of everything in between so let's

delete this test placeholder loop code

that we wrote earlier okay and now we

want to paste in the HTML from our

clipboard but you'll notice that we are

currently in PHP mode so on this line

let's just drop out of PHP and then

right before get footer we can enter

back into PHP so that means right here

we are in HTML so we can just go ahead

and paste in a clipboard let's save that

and refresh the wordpress site looks

good we just have two quick problems to

solve the first issue is that we are

missing the images or photographs that

should be displayed here and then down

here as well and the second problem is

that this slideshow section isn't

behaving like a slideshow okay so let's

fix both of those things but let's begin

with the missing photos so all we need

to do is look within the new folder that

we downloaded at the beginning of this

lesson and we need to copy or move this

images folder into our WordPress theme

folder and while we're at it I also want

you to copy over this CSS folder and

this j/s or JavaScript folder so you

should be able to just click on one

folder and then hold down the command

key on Mac or the ctrl key on Windows

and then just click on the other folders

that you want then right-click and

choose copy and then we're just going to

paste them into the wordpress theme

folder so remember your theme

folder lives within your local sites or

projects folder or wherever you set up

WordPress so open that up and then drill

in to your theme folder so if you're

using my vagrant setup go into fictional

university and then the app folder and

then WP content and then themes and

here's our fictional University folder

so go in there and this is where we just

want to paste in our clipboard cool

so we copied over those three folders

and now if we refresh our website we

still don't have the images but now we

are very close we just need to update

our HTML to look for the images in the

right folder so back in our text editor

in our theme folder jump in to index dot

PHP and up towards the very top of the

file you'll see a div with a class of

page banner BG image and it's using an

inline style that's trying to pull in a

background image and this code tells the

web browser to look within the current

folder for a subfolder named images and

look inside it for a jpg named library

hero so the reason our photo isn't

loading is because if we go up to our

address bar we don't have an images

folder in the root of our domain or the

root of our project directory instead we

do have a wordpress folder named WP –

content and then within that folder we

have a themes folder and then the name

of our specific theme is fictional

university theme and that is where the

images folder lives so then we could

look within there for library hero JPEG

okay cool so this path works but look

how long this is you probably don't want

to have to type this out every time you

want to load an image so let's go back

and jump back into our text editor and

I'll show you a trick so go ahead and

select this current path so from images

to jpg copy that into your clipboard and

then go ahead and delete it okay so now

we just have empty parenthesis and what

we're going to do is drop into PHP

because WordPress has a function here

that can help us so within the

HP tags let's echo out the results of a

wordpress function named get underscore

theme underscore file underscore URI and

it's a function so open up parentheses

and it only takes a single argument so

quotes so now just add a forward slash

and then paste in your clipboard and

that's all we need to do this WordPress

function will generate the path to our

theme folder all on its own cool so

let's save this and refresh and we're in

business now let's just do the same

thing for the three images down here at

the bottom of the page so back in index

dot PHP if you scroll down to the very

bottom we see images bread images apples

and images bus so go ahead and pause the

lesson and adjust these three image

paths the same way that we just adjusted

the image up at the top the only problem

now is that this section isn't cycling

through the three slides it's just

showing all three slides stacked on top

of each other all we need to do to fix

that is load a JavaScript file that

handles the slideshow behavior so back

in our text editor jump in to our themes

functions dot PHP file and loading a

Java Script file is just like loading a

CSS file so right above this line let's

add a new line and let's call a function

named WP on cue and then instead of

style its script within the parentheses

the first argument is our chance to name

the file the name doesn't really matter

let's just call it main university

javascript the second argument is where

we point towards the file that we want

to load to point towards the JavaScript

file let's use a function named get

theme file URI and it's a function so

parentheses and we want to look inside

our theme folder and then look inside

that j/s folder that we copied over a

few minutes ago and the file that we're

looking for is named scripts – bundled

dot j/s now loading a JavaScript file

requires a few more arguments than when

we load a CSS file so

to the quote and then this parentheses

let's include a comma so we can add

another argument and WordPress wants to

know if this script depends on and the

other scripts right does it have any

dependencies in this case it doesn't so

we can just say null it doesn't have any

then WordPress wants a version number

for our file it doesn't really matter

let's just make up a version number of

10 and then the final argument is

basically WordPress asking us do you

want to load this file right before the

closing body tag yes or no so we say yes

or true and that way it loads at the

bottom of the page instead of up in the

head section which is much better for

overall performance so if we save this

and refresh now we have typical

slideshow behavior perfect that's going

to bring this lesson to a close in our

next lesson we'll start working on an

interior page template let's keep it

rolling and I will see you then hello

everyone in this lesson we will set up

an interior page template what in the

world do I mean by that well for example

this is our home page but when someone

clicks on a generic page like about us

up in the header or privacy policy down

in the footer we will need a generic

page template to power those pages so in

this lesson we will work on integrating

this custom design of hours into our

themes page dot PHP file now in case it

wasn't clear from the last lesson by the

end of this course we will have made

everything on this home page dynamic and

be pulling from Riegel wordpress content

but for the time being let's leave this

static home page as a placeholder and

let's focus our attention on interior

pages okay now let me show you what I'm

referring to when I say interior page

template so in that new folder that we

downloaded in our previous lesson

university static master if we look

inside that folder there is a file named

interior – page dot HTML

and if we go ahead and drag that file

onto a new tab in our web browser we see

a template that we can use for the

majority of our wordpress pages now

before we start integrating this HTML

into our theme

let's first jump into our WordPress

admin area and let's create a couple of

new pages just so you and I are synched

up so from the sidebar let's hover over

pages and click add new for starters

let's create a page named about us and

for the content let's just say this is

the about page content and then maybe

paste in a bit of lorem ipsum dummy text

and then let's save or publish this and

while we're at it let's create another

new page so add new and let's name this

page privacy policy and for the content

this is the privacy policy content lorem

ipsum okay go ahead and save this and

now we can use this permalink to preview

the page so here we see the title and

here we see the content so it's working

but it doesn't look quite right this is

not a very pretty page template right so

instead we want to use this as our page

template so to do that I want you to

open up the folder that we downloaded in

the last lesson and open up interior

page HTML in a text editor

all right so towards the top of the file

right after the opening body tag we see

this header element and we already

integrated that in our previous lesson

so let's scroll down below that and

right when that header element ends we

see a new div begin that has a class of

page banner so this is where we want to

begin copying and pasting so let's place

our cursor at the very beginning right

before that div opens up and then let's

scroll down keep scrolling keep

scrolling and around line 68 or 70

you'll see

did with a class of page section page

section beige and that corresponds with

this area in the template we don't need

that for now for now let's just copy and

paste over this top section so back in

the text editor I'm going to hold down

the shift key on my keyboard and click

right here

cool now with that selected let's copy

it into our clipboard and then we want

to paste it into a file that lives in

our theme folder so within your

WordPress theme folder that we've been

working in go ahead and open up page dot

PHP in your text editor okay so we still

want to begin with our header we still

want to end with our footer and we still

want to use the while loop in between

but we don't want to output this test

placeholder HTML that says this is a

page not a post

okay so let's delete that line of HTML

and let's also go ahead and delete the

h2 HTML headline below it and we can

also delete this PHP the content

function okay so at this point we still

have a while loop we are still calling

the the post function which will get all

of the appropriate data ready for us

from the WordPress database we're still

closing out of PHP here and opening up

PHP here which means right where my

cursor is right now we can add HTML so

just go ahead and paste in your

clipboard and if we save this and

refresh in the browser within our

WordPress site back on the privacy

policy page we've got that template in

place and now we can just start

hollowing out some of the static content

and replace it with WordPress functions

that will pull in dynamic content for

example let's begin with this large page

title headline so up at the very top of

page PHP within this page banner section

here we see an h1 headline with a

hard-coded value of our history so let's

just delete our history and instead drop

into PHP and call the function name

the title cool so if we refresh now we

see privacy policy which makes sense

since that's the page we're on next

let's work on hollowing out this main

content field area so back in the text

editor if we scroll down just a little

bit here we see a div with a class of

generic content and what we want to do

is just delete and hollow out all of the

paragraphs inside it okay and instead of

those hard-coded paragraphs we just want

to drop into PHP and call the function

named the content and if we save and

refresh perfect now we see this is the

privacy policy content next let's

address this sidebar menu of links that

we see here we are not ready to set this

up yet so for the time being why don't

we just comment it out let me show you

what I mean

back in page dot PHP on this line where

we just called the the content function

right above that we see a div that has a

class of page links so this is the Dib

that is creating that sidebar menu and

if we want to comment it out right above

it we can just say less than symbol

exclamation – – so that begins the

comment and then let's end the comment

right when the div ends so it's just – –

greater than to end the comment so this

way we leave this code in place so we

can work with it in just a couple of

lessons from now but on the front end of

our website it's now hidden cool we can

circle back to that menu a bit later on

but for now the next thing I want to

address is this subtitle in a future

lesson we will learn how to set up a

custom field so that each page can have

its own unique subtitle here but for now

why don't we replace this hard-coded

text with a message to ourselves so we

don't forget to implement that feature

later on so back in page dot PHP of our

theme folder up at the very top within

this page banner sect

we see a paragraph with that hard-coded

content and let's delete that and

replace it by just saying don't forget

to replace me later cool also regarding

the plain black background of this top

area if we look at that same area within

our static template that we are copying

from we see that it's supposed to use a

background image of the ocean so we need

to get that image to work within our

theme and if we jump back into our text

editor up at the top of page PHP within

this page banner div we see an inline

style that is trying to load an image

named ocean dot JPEG and the reason this

isn't working is because we don't have a

folder named images at the root of our

domain in reality our images folder

lives within our theme folder so let's

do this let's hollow out these

parentheses so delete this images ocean

JPEG and in these parentheses let's drop

into PHP and then echo out the results

of a function named get theme file URI

and we are calling a function so

parentheses and this function will

automatically provide the beginning part

of the URL that will look in wp-content

themes and then our theme name so now we

can just say quotes look in the images

folder for ocean jpg cool so let's save

this and refresh now in a future lesson

we will set things up so that in the

admin edit page screen you can upload a

unique image for each page but for the

time being I think this placeholder

ocean image will do the trick

okay moving on that leaves us only with

this little breadcrumb area that we

still need to address we will circle

back to this section at the very end of

this lesson but for now let's not worry

about it what I do want to worry about

right now

is the title of this page that we should

be seeing up here in the title of this

browser tab now the fact that we are

seeing the URL of the page here instead

of a legit

title means that we are missing the

title tag that usually lives in the head

section of a website so if that's the

case your first instinct might be to

jump into your text editor and hop into

our theme folders header dot PHP and

your instincts might be to go inside

this header element and create a title

tag and say my little title now

technically that works so we see the

title here but that's far from ideal

because you want the title to be unique

or specific for each page or post that

you're viewing so let's delete this

title line and instead since we are

already giving WordPress control over

our head section with this WP head

function what we can do is jump into our

theme folders functions PHP file and

tell WordPress to automatically generate

an appropriate title tag for each screen

so the question is how do we tell

WordPress to do something and the answer

is that you add an action so down here

we've already added one action and this

is the event that we wanted to hook on

to when our goal was to load CSS and

JavaScript files but in this case we

have a different goal so let's drop down

to the bottom here and let's add a new

action so we call the add action

function and the name of the WordPress

event that we want to hook on to is

after setup theme and then let's pass

this function a second argument and this

is just the name of a function that we

are going to invent in about a second or

two from now so we get to make up this

function name let's name it University

features so we make up a name and then

we just have to create a function with

that name so right above this new line

that we just wrote let's create a new

line and let's say function we want to

create a new function we want it to be

named University features parentheses

curly brackets and when you want to

enable a feature for your theme the

function that you call is add

Thieme support now there are all sorts

of different features that you can

enable with this function so we need to

tell WordPress which feature in

particular we're interested in in this

case its title tag okay so with this new

code in place if we save this file and

refresh the front-end of our website

look up here in the top of my browser

tab privacy policy which makes sense

since we're on that page but if we

change the URL and go to about us

cool the title tag gets automatically

generated by WordPress now you'll see

that it's followed by a – and then the

name of our website if you ever want to

change this top-level name of your

website just go into the settings

general screen of WordPress ok moving on

now that we have an about Us page and a

privacy policy page it would be nice if

those links in the header and footer

actually did something when you click on

them now in a future lesson I will show

you how to create real dynamic WordPress

menus that you can control and manage

from the admin appearance menu screen

but for now let's just manually add

those links within our header and footer

theme files let's start with the about

Us header link so in our theme folder

within headerphp just a bit down from

the top here we see the about Us link so

let's delete the placeholder hash tag

and technically we could just say slash

about us and that works if you're using

a developer domain like we are fictional

University dot dev but if you're using

something like map or xampp you might

not be using a real developer domain and

in that case you don't want your links

to just point to the root of the current

domain because you might have multiple

WordPress sites all living on your one

local host so instead a more reliable

way of creating links is to drop into

PHP and echo out the results of a

function named site URL and that will

automatically give you the route URL of

your cur

WordPress site and then anything we

include as an argument it's added on to

it so we can just say slash about us

let's save that and now even if I go

back to my home page when I click on

this about Us link we are in business

next why don't we set things up so that

if you click on this logo in the top

left corner it takes you back to the

home page so up at the top of hetero a

just a couple lines down from the

opening header tag we see this h1 with a

class of school logo text and all we

need to do is change this links href

value so delete the placeholder hashtag

and then there's no sense in typing out

that same code again so let's just copy

and paste what we set up down here from

the opening PHP to the closing PHP tags

copy that back up here in this href

value paste it except this time we don't

want to link to the about Us page so we

can simply call the function and not

pass it any arguments whatsoever and

that will give us the route or home URL

so I'm on about us and if I click that

logo or on the home page cool now let's

do the same thing for a few of the links

in the footer so this should take us

back to the home page about us and

privacy policy so in the text editor

jump into your themes footer dot PHP the

first h1 that we see should link us back

to the home page so here's the a element

and here's the href so just delete the

placeholder hashtag and then paste in

your clipboard this should point towards

the home page so let's delete this

argument so the parenthesis are empty

okay and then down here let's set things

up for the about Us link in the footer

so delete that paste in our clipboard

perfect let's scroll down a little bit

here's the privacy policy link so delete

that placeholder pasted in the clipboard

change about us to privacy policy cool

so if we save that now we can use the

links in the footer to jump around ok so

at this point we now have a basic

interior page template up and running

now we can circle back to this little

breadcrumb box here because this box

makes zero sense on a top level page

like privacy policy however imagine we

want to have sub pages or children pages

on our site so for example maybe on our

about Us page we want to have two

children pages our history and our goals

well in our very next lesson that's

exactly what we're going to learn about

parent and children pages and how to

work with them on the front end of our

website I know this lesson we just

worked through and the one right before

it they were not tons of fun

they're probably two of the most boring

lessons in the entire course but we had

to get up and running and working with

the same page templates so you and I are

in sync from here on out there won't be

as much mindless copying and pasting

we're gonna get back to truly

educational content so let's keep things

rolling and I will see you in the next

lesson hello everyone in this lesson we

will learn how to adjust our theme

templates to account for parent and

children pages so for example imagine

under our about Us page we want two new

children pages named our history and our

goals

now before we update our theme to

reflect parent child page relationships

let's first go and actually create the

two children pages over in the WordPress

admin area so let's add a new page let's

title this one our history paste in a

bit of dummy content and here's the

important part over in the right hand

column under parent instead of no parent

let's choose about us okay so we are

saying that the our history page belongs

to the about Us page so let's publish

that and just for good measure let's

create another new page and let's call

this one hour of goals dummy content

over in the sidebar tell the parent to

be about us let's save that

okay so we've created the two pages but

now we need the front end of our website

to actually reflect those parent-child

relationships so for example if we use

this permalink here to visit the our

goals page our focus for this lesson is

this breadcrumb box now at the moment it

is entirely hard-coded right so this

shouldn't say our history it should say

the name of the current page which is

our goals so right now let's dig into

our theme code and make this breadcrumb

box dynamic so in our text editor within

our theme folder let's open up page PHP

and from the top if you look below this

page banner div you'll then see a

container and right below that this div

with a class of meta box that's the

breadcrumb box so you can see towards

the end of this div we have hard-coded

our history so why don't we begin by

deleting that hard-coded our history and

instead we can drop into PHP to output

the title of the current page so let's

just call the function named the title

cool so that makes this text dynamic

next let's set things up so that this

entire breadcrumb box only appears on

child pages right because it makes sense

that we would want a link back to the

parent page but once you are back on the

parent page there is no need for this

box so back in our text editor we only

want to display this meta box div or

this breadcrumb box div if the current

page being viewed is a child's page now

the first step to achieving that is by

using something in PHP called an if

statement so do this with me right above

this div with a class of meta box right

above that let's add a new line and

let's drop into PHP and within PHP let's

write our first if statement so we just

type out the word if

and then a pair of parentheses and then

a pair of curly brackets okay now

whatever we place within the curly

brackets will only occur if whatever we

place within the parentheses is true so

let's work through an example in the

curly brackets let's maybe echo out a

phrase that says the sky is blue okay

and now within our parentheses on this

line let's say if two plus two equal

sign equal sign for so this will always

be true right

two plus two will always equal four so

because our condition within these

parentheses is true PHP will run

whatever we place within the curly

brackets so save and refresh here we see

the sky is blue but if we change our

condition to two plus two equals seven

that is false right so because it's

false the code in the curly brackets

will no longer run so now you can see we

are missing the sky is blue so what we

want to do is come up with a condition

instead of two plus two equals something

we want our condition to be if the

current page has a parent page right

because if it does that means it's a

child page now in order to find out

information about a page like that we

are going to need to review a wordpress

topic named post ids so what in the

world is a post ID well the easiest way

to explain that is to jump into your

WordPress admin screen and begin editing

any existing post or page and I want to

direct your attention up to the address

bar whenever you're editing a post or

page towards the end of the URL you will

see a number and that is the unique

numerical ID for that post or page in my

case my our goals page has an ID of 24

and if I go check out the main about Us

page in my case it has an ID of 16 in

your WordPress website it might have a

different ID number but that's not

important what is important

that each page in post has this unique

number and back in our code we can use

that unique ID number to find out

information about a page or post so

right now I want to show you a few

WordPress functions we can use that are

related to post IDs so for the time

being let's delete this if statement so

now we just have this empty PHP section

and I want you to type this out with me

let's echo out the results of a

wordpress function named get the ID and

notice the I and D are capitalized but

if we save that here we see a 16 on the

about Us page and if we go back to the

our goals screen we see a 24 cool so

this get the ID function will give us

the ID of the current page that's being

viewed but that's not exactly what we're

interested in we want to know if the

current page has a parent page so

instead let's do this let's delete this

line and instead let's echo out the

results of a wordpress function named WP

get post parent ID and this function

will do exactly what it says it will do

so within the parentheses we give it an

ID for a page or post and this function

will respond by giving us back the ID

number for that page is parent so for

example if we were on the our goals page

and we wanted to find the ID of this

page as parent

well this page itself has an ID of 24

but instead of hard-coding that number

we want this to be dynamic so to get the

ID of the current page remember the

function get the ID so altogether what

this line of code is saying is get the

ID of the current page we're viewing and

then WordPress we want you to use that

number to look up the ID of its parent

page so if we save this and refresh we

see a 16 and remember that's the ID of

my parent about Us page and if we go to

that

about us parent page the number we see

is zero and that's because this page

about us doesn't have a parent so this

function WP get post parent ID it will

return zero if a page doesn't have a

parent and if a page does have a parent

we just get the ID of that parent page

now that behavior will play very nicely

with an if statement let me show you

what I mean let's bring this full circle

and get back to an if statement but

before we go ahead and delete this line

I want you to copy part of it to your

clipboard so beginning from the W at the

start of this function name and then all

the way right before the semicolon let's

copy this part in nor clipboard so we

don't have to type it again in a few

seconds cool so now let's go ahead and

delete this line and let's put

everything together so let's write an if

statement if parenthesis curly brackets

within the curly brackets let's echo out

and say I am a child page now within the

parentheses right after the if for our

condition I want to show you something

neat so we already tried two plus two

equals and then four would be true and

then some other made-up number this

would be false but obviously we don't

always want everything to be a

mathematical equation that evaluates to

true or false in PHP and many other

programming languages there's a special

boolean value if you say true that will

obviously evaluate to true so we see I

am a child page you could also say false

but beyond that what's neat is simply a

value of zero will evaluate to false

right so now we do not see I am a child

page and any number such as 1 or any

number that's larger than that will

evaluate to true I am a child page so

here's the cool part for our condition

we can just paste in our clipboard

because remember this function will give

us the ID of the pair

Paige and if the page doesn't have a

parent it returns a zero and if it's a

zero that evaluates to false cool so now

we finally have a bit of code that will

only run if the current page is a child

page so we're on the our goal screen and

we see I'm a child page to go to the

main about us parent page we don't see

that message so now all we need to do is

move this div with a class of meta box

this is that little breadcrumb box let's

just move this HTML to live within the

if statement so let's do this let's

delete this echo I am a child page and

right above it on this line right after

the curly bracket let's drop out of PHP

and then on this line when the curly

bracket ends right before that let's go

back into PHP so now on this line where

my cursor is we can have regular old

HTML so now let's just cut and paste

this meta box breadcrumb box cut it and

then let's paste it right here cool so

let's save that and I'm on the about Us

screen now we no longer have that

breadcrumb area but if I go back to the

our goals page cool there it is

the next thing we should work on is

adjusting this so that the words about

us are not hard-coded right because what

if we were on a child page that didn't

belong to about us for example down in

our footer remember we created a privacy

policy page so let's click on that and

what if we had a child page that

belonged to privacy policy well in that

case we wouldn't want our template to

have this about us title hard-coded

instead we would want this to

dynamically pull in the name of the

parent page now before we write the PHP

code to achieve that why don't we first

go and create an actual privacy policy

child page so that things will be easy

to test and see if they're working so

back in the admin section I will use the

add new button and let's just create a

new page and maybe call it cookie Policy

paste in a bit of dummy content

and the important part is that we want

to set the parent to privacy policy

okay so let's save this and now if I use

this permalink here to view that new

page cool so there's the title cookie

policy but this back to about Us link

doesn't make any sense instead it should

say back to privacy policy so right now

let's write a bit of PHP code to make

this dynamic so let's delete this

hard-coded about us and instead let's

drop into PHP and let's echo out the

results of a wordpress function named

get the title now this function name

sounds very similar to the function

that's just the title the difference

between these two functions is that the

title will output the title of the

current post or page whereas get the

title allows you to pass in an ID number

in these parentheses and it will give

you the title for that post instead of

just the current post that you've looped

through so we don't want to hard-code a

numerical ID here we want this to be

flexible let's just place an X just as a

temporary placeholder and we will circle

back to this in just a moment for now

let's shift our focus onto the href

attribute we want to replace this hash

tag with a URL that points to the parent

page of the current page so within those

quotes let's drop into PHP and let's

echo out the results of a function named

get permalink so this function is

similar to get the title instead of

being limited to just the current page

of posts that we've looped through we

can pass it a number or an ID and it

will give us the permalink for that post

or that page so let's also just place an

X here as a placeholder and now all we

need to do instead of having an X here

and here we just need to use the same ID

number that we created up here with

these two functions right remember this

WP get post parent ID function will give

us the ID of the current pages

Paige now this code that I'm

highlighting right now is a lot to type

so we probably don't want to have to

type that out again here and here

instead right above this if line why

don't we create a variable that stores

this numerical ID and then we can just

access that variable again and again so

let's create a variable and we can make

up the name let's call it the parent the

name doesn't matter we're just making

something up that we can remember and we

just want it to equal the number that

this function generates so let's just

copy and paste this or you can even cut

and paste it right so now the

parenthesis for the if statement will be

empty and we can say that our variable

equals that and now we can use this

variable in three places we can use it

as the condition for our if statement so

we can say if our variable right because

if it's a zero that will evaluate to

false it'll work just the same as this

it's just less typing this time around

and then as you might have guessed we

can use that same variable where our X

placeholders are so right here let's

delete the X and just say the parent and

let's do the same thing for this X so

get the title and then the parent and

then if we save this and refresh our

cookie policy page which is a child of

privacy policy when i refresh now we see

back to privacy policy here and if I

click on that cool it successfully takes

me to the parent page and if I go up

into the address bar and visit the about

us our history sub page or child page

cool we see back to about us and if we

click it the link indeed works now at

this point you might be asking yourself

how our visitors of the websites

supposed to navigate to the child pages

right we're on the about us parent page

and nowhere do we see links to the two

children pages well that is the exact

issue that we are going to fix and work

on in our next lesson we will learn how

to add a sidebar menu right about here

that automatically includes links to any

and all

children pages it should be a lot of fun

to code out let's keep things rolling

and I will see you in the next lesson

hello everyone let's take a quick break

from our project to answer one of the

most common PHP questions and that is

why do certain functions need to be

echoed while other functions don't in

order to understand the answer to this

let's write a couple of functions

together right now so jump into your

text editor and within your theme folder

let's open up index dot PHP we're just

gonna write a bit of test code for

educational purposes that we will delete

in about 5 minutes from now

so it doesn't really matter where we

type this but I'm just gonna open up a

new PHP area right below the header ok

and now we can experiment so type this

out with me let's imagine we want to

create our own brand new function so

function and let's call it double me

parentheses curly brackets and let's

imagine that the purpose of this

function that we are creating is that

when you call it you give it a number

and this function will double that

number and give you the result so for

example below the function definition

when it's time for us to actually run

and call the function we might say

double me five right and we would expect

that to generate 10 or if we said eight

we would expect it to generate 16 okay

so let's go ahead and make that happen

within the function definition so within

these parentheses we want a parameter

that can receive the incoming number

doesn't matter what we call it let's

just call it dollar symbol X as a

placeholder variable okay and then in

the curly brackets in the body of the

function we can just echo out whatever

number that someone passes into this

function x – or asterisk – cool

so now down below this function

definition we could say double me four

right and we would expect that to echo

out eight onto the page

so if we save this and refresh the

homepage of our website if i zoom in a

bit there you can see that number 8

cool and if we change this to 25 saved

we see the number 50 so that's an

example of a function that we don't need

to echo we just call the function and it

echos something out onto the page for us

however not all functions are like this

most functions or I should say a lot of

functions instead of echoing out their

result they return their result so what

does that mean what does return do it's

basically a functions way of saying my

work here is done

I've done my job and now I'm returning

this results or I'm returning this value

so then down here when we call or run

the function and say doublemeat 25 this

will still equal 50 PHP will evaluate

this to be 50 however we are not doing

anything with that value of 50 in this

case it's just going to sit in PHP s

memory and we aren't doing anything

useful with it so if we save this and

refresh you'll notice that that value of

50 disappears up here so now it's up to

us to actually do something with the

value that this function returns now

there are a million different things we

could do with the value probably the

most obvious example would be that we

could echo it out so echo the results of

double me 25 so now that will indeed

show 50 again now functions that return

values like this are really nice because

they're so flexible right because in the

world of programming there's a lot of

things we need to do other than just

echoing out simple values so for example

we could create a variable magical

number and tell it to equal double me 10

right so we aren't trying to echo

anything onto the page we're just

setting a variable to equal this value

or for another example maybe we want to

use that function as an if statement

condition so for example we could say if

double me 12 equals 20

or then echo out onto the page the

function is performing the math

correctly cool so you get the idea this

is not a real-world example you'd

probably never do this but the idea is

that you can use the value that a

function returns anywhere now before we

bring everything full circle and tie

this back into the topic of WordPress

specifically let's have a bit of fun

first so right now let's delete this if

statement so we've still got our double

me function definition and right now

below this let's create another brand

new function named triple me instead of

typing it out we can just copy and paste

this function so copy paste let's change

the name to triple me and then on this

line change this from x 2 to x 3

ok now below this let's actually call

and run these two functions together

because I think this will really

illustrate the power of functions that

return values they're so flexible that

they can fit together nicely so let's

begin by saying double me 5 so that

would be 10 but then we can wrap that

within the triple me function so then

right before that we could say triple me

parenthesis and in the parenthesis here

so instead of just saying triple me 10

I'm trying to show you that you can use

the value that a function returns as an

argument for another function so let's

test this out by echoing it or

outputting it onto the page if you

triple 10 we would expect to see 30 so

save this refresh cool then if i zoom in

you can see a value of 30 ok now that's

enough PHP for the sake of PHP let's tie

this back in to WordPress so when it

comes to the WordPress functions that we

don't have to create that we just get to

leverage it can be a bit confusing

whether a function is going to echo

something for us or if it's just going

to return a value and so we need to echo

it so let me show you a tip that can

save you tons of confusion back in the

I will delete all of this sample code so

that we can talk about wordpress

functions so for example wordpress has a

function named the title but it also has

a function named get the title also

there's a wordpress function named the

ID but wordpress has another function

named get the ID so how do we make sense

of this well there's a rule of thumb

that if a wordpress function begins with

the word get that means it's not going

to echo anything for you it's just going

to return a value and it's up to you to

use that value however you see fit

on the other hand if a function begins

with the word the that means WordPress

will indeed handle echoing and

outputting it onto the page for you now

at this point in the course I say we

just leave it at that so I'm going to

delete all of this test code from this

lesson so I'm putting my index dot PHP

file back to the state that it was in

before this lesson even began and moving

forward I wouldn't worry about

preemptively memorizing every function

and knowing exactly what it does because

that's not how people work in the real

world in the real world you will Google

in plain English terms whatever you're

trying to accomplish in WordPress with

code and in the search results you'll

want to look for two main websites codex

and developer dot wordpressorg these

are the official WordPress websites and

they have a wealth of information they

will tell you exactly what a function

does how to use it what arguments you

can pass it and most importantly it will

tell you if the function returns

something or outputs something for you

now having said all of that you don't

need to go and do any of your own

research at this point relax take a deep

breath you're in this course for a

reason

it's my job to gradually introduce you

to more and more WordPress functions and

by the end of this course with a little

bit of repetition thrown in there for

good practice you will have a rock-solid

understanding of what WordPress

functions are at your disposal and what

they do I'm never a fan of pre-emptive

memorization I'm big on practicing

experimenting and organically building

up your understanding so long story

short

even if you didn't understand everything

in this lesson 100% I wouldn't worry

about it because we're going to keep

practicing these same concepts several

more times

hopefully this lesson cleared up a bit

of confusion let's keep things rolling

and I will see you in the next lesson

hello everyone in this lesson we will

learn how to set up a menu of children

page links for the current page that you

are viewing so for example if I navigate

to our about Us page we know that this

page has two children pages named our

history and our goals but we don't see

links to those anywhere so our goal for

this lesson is to add a menu right about

here that has links to the applicable

children pages if you think back to

several lessons ago you will remember

that we actually commented out that menu

so over in your text editor within your

theme folder jump into page dot PHP and

if you scroll down about halfway or a

little bit further

remember this div that we commented out

so at this point we can just remove

these comments and then remove this

closing comment down here okay so we've

got this div with a class of page links

and if I save this and refresh the page

here's the menu that I'm referring to

but right now it's hard coded which

means it's not dynamic what I mean is

the hard-coded data of about us our our

history and our goals only makes sense

because that's a contrived example but

if we scroll down to the footer and

click on the privacy policy page now it

becomes painfully obvious that the menu

is not dynamic right instead of about us

this should say privacy policy which is

the current parent page and then down

here we should see links to any privacy

policy children pages so right now let's

begin writing the code to make this menu

dynamic let's focus on this list of

children links first and then after that

we'll work on this parent page header

link so back in the code here is the

unordered list of links right there's a

list item for

each link so we don't want these list

items to be hard-coded so let's just

delete these so now we have an empty UL

element and within that element let's

drop in to PHP and let's call a

wordpress function named WP list pages

now before we even worry about providing

any arguments inside the parentheses

let's just save this and see what it

does so that function created links to

every single page on our website which

is obviously not what we want we only

want children pages of the current page

being viewed also up here we can see

that this function outputs this odd

little title named pages and we don't

want this so the question becomes how do

we tell this function WP list pages to

do what we want it to do well obviously

that's the job of arguments that we can

pass it within the parentheses however

this function needs us to provide it

arguments in a very specific format so

for example we can't just include one

argument and then a comma and then

another argument instead this function

wants us to pass it an array and not

just any array it needs an associative

array so right now let's take a quick

timeout and forget about this function

and instead answer the question what in

the world is an associative array so

several lessons ago we saw an example of

a very basic array so to refresh your

memory let me create a very basic array

maybe I'll create a variable named

animals and set it to equal an array so

then within that array I can say cat

comma dog comma pig so an array lets us

have multiple pieces of data that live

within a larger collection however what

if I wanted to associate a value with

each

animal so for example what if I wanted

to list the sound that each animal makes

so for cat it would be meow for dog it

would be bark and for pig it would be

oink well in order to do that I would

need to create an associative array so

check this out let me delete this line

and let's imagine I want to create a

variable named animal sounds and I set

it to equal an array and then within the

array the first item is cat and then

right after cat I say equal symbol

greater than meow and then include a

comma and do the same thing for dog now

I could list all the items on a single

line but when I'm working with

associates of arrays just to stay

organized I like to put each one on its

own line

so we've got cat equals meow then comma

dog equals symbol greater than dog

equals bark comma pig equals point and

this is an example of an associative

array we've associated a value with each

item and now maybe later on in my code

if I want to access the sound that a dog

makes and maybe I want to echo it out

onto the page I can just say echo look

inside my variable so echo animal sounds

and then to look inside an array you use

square brackets and then instead of

looking for a zero-based numerical key

since we are working with an associative

array we can just reference this label

or key name so within the square

brackets I could just say dog and be

sure to end that line with a semicolon

and if we save and refresh there we see

the value of bark cool so now that we

are at least a little bit familiar with

an associative array let's get back to

the task at hand which is working with

this WP list pages function so let me

delete this example code and now let's

get down to business of providing this

funk

with an associative array that tells it

exactly what we want it to do so within

the parentheses let's say array and then

give the word array its own pair of

parentheses right this is how you create

an array in PHP now we could begin

typing here but just to stay organized I

like to drop down in between these array

parentheses on to a new line and the

first thing I want to do is tell the

function that it doesn't need to output

this odd little pages title so if we

don't want that title this function has

a parameter named titled underscore Li

for list item and we can just set that

to equal null so just like earlier when

we said cat equals meow or dog equals

bark we are saying the title equals

empty or nothing so if we save that and

refresh cool that awkward title went

away now we just need to tell the

function that we don't want every single

page on our website

we only want links to children pages of

the current page so back in our code

let's add a comma at the end of this

line so we can add another item to the

array and this function has a parameter

named child underscore of and we just

want to set that to equal the numerical

ID of a certain page or post now before

we make this dynamic let's hard-code a

number just to see how it works so for

example if I want children pages of the

privacy policy page I can find the

numerical ID of the privacy policy page

by going into my admin dashboard looking

under pages and if I click on that

privacy policy page to begin editing it

up in the URL address bar I can see it

has an ID of 18 so back in the code if I

say child of equals 18 save it and

refresh cool there we see cookie policy

which is the only child page of privacy

policy

and if I use this link in the header to

visit the about Us page if we want to

display the to about us child pages we

can just go into our admin dashboard

find the ID for about us which is 16 so

if I say child of equals 16 cool we see

the applicable child pages now obviously

we don't really want to hard-code a

number here we want this menu to be

dynamic right because if I go back to

the privacy policy page it should just

automatically pull in the correct

current child pages so in order to make

this dynamic your first instinct might

be to get rid of the hard-coded number

and use the wordpress function get the

ID right this will return the ID of the

current page so let's try that so that

works perfectly when you are on a parent

page but once we click on to the cookie

policy child page now that section is

completely blank and that's because once

we are on a child page now our code is

going to try to use that child ID and

try to find children of it and that's

not what we want so we need to provide a

different ID number here depending on

the situation if we are on a parent page

we can indeed go ahead and just use the

ID of the current page but if we are on

a child page we can't just use the

current ID we need to actively look up

the parent page ID so here's how I would

handle things up above this function so

right when we're getting into PHP here I

would just create an if statement so the

word if parentheses and then curly

brackets and for my condition within the

parentheses I would say if the variable

named the parent remember we set up that

variable in our previous lesson we

created a variable named the parent and

it will equal the ID of the current page

of parent page or if the current page is

a parent it will just equal 0

okay so let's leverage that variable

again down

here so this code is saying only if that

the parent variable does not equal zero

only if that's the case run the code

within these curly brackets or in plain

English only if the current page has a

parent do something so let's just create

a brand new variable and call it find

children of the name doesn't matter I'm

just making up this name but if you're

currently on a child page let's set this

to equal the parent ID okay and what if

this evaluates to false so if you're

viewing a parent page this will be 0

which will evaluate to false so this

code will not run and then what we can

do is right after this curly bracket we

can say it else and then open up a new

pair of curly brackets and this will

only run if this is false so if this is

the case do this otherwise else do

whatever we say here in this case let's

assign our find children of our made-up

variable in that case we can go ahead

and get the current idea of whatever

page you're viewing so get the ID cool

so now we've taken care of that

conditional logic now down here when we

are actually calling the important WP

list pages function we can just say

child of equals and we can reference

this variable of ours that we just made

up so find children of so let's go ahead

and save that and refresh perfect so now

even though I'm on a child page of

cookie policy we still see links to

children pages of the current section so

if I go up in the header and click on

about us we see the two sub pages and

even if I click on to our history we

still have the relevant child links okay

now at this point let's change gears and

work on this blue header link this

should always point back to the current

sections parent page so back in our code

here is that blue headline link and we

don't want it to be hard-coded to about

us

so first let's make the title dynamic

then let's make the href link value

dynamic so delete about us and drop into

PHP and then let's echo out the results

of a wordpress function get the title

and within the parentheses we can just

pass an argument of our the parent

variable this will work really nicely

with this function because if this

returns a 0 which means the current page

is a parent page this get the title

function interprets a 0 as meaning the

current page cool now let's do something

very similar for the href value delete

the hash tag drop in to PHP and let's

echo out the results of get permalink

and within the parentheses just pass it

an argument of our the parent variable

cool so let's save that and refresh so

we're currently on the our history child

page but if I click this blue headline

takes me to the parent page and if I go

down into the footer and click on

privacy policy I can click on this to

navigate to a child page and we can

always use this header link to go back

to the parent page ok so at this point

we've made the menu dynamic but now we

need to ask ourselves what happens if we

go to a page that isn't a child page but

also isn't a parent page because it

doesn't have any children of its own so

for example to show you what I'm talking

about up in the address bar if I visit

my sample page named test page 1 2 3

this page doesn't belong to any other

pages but it also doesn't have any of

its own children so in this case we

probably just don't want to display this

side menu at all right so we wouldn't

even want this blue headline to appear

so back in our code what I recommend

doing is wrapping this page links div

just wrapping that entire thing within a

PHP if statement so right before this

begins let's drop into PHP and say only

if

parentheses curly braket but let's only

use the opening curly bracket and then

dropped out of PHP so then we can have

all of this HTML and then right when

that div is going to end right after

that you can drop into PHP close out the

curly bracket for the if statement and

then close out of PHP so now all we need

to do is fill out the if statements

condition within these parentheses so we

only want to display this menu if you

are currently on a child page so to

check for that we can just use our the

parent variable right because on a child

page this variable will equal the number

larger than 0 so this will evaluate to

true and then right after that we can

say or we also want to display this menu

if you're on a parent page so the or

operator here is very powerful it lets

us have multiple conditions and if

either one of them evaluates to true

then this will run now believe it or not

in WordPress there is no easy way to see

if the page is a parent but there is a

slightly roundabout tricky way of doing

it so here's what I would do let's add a

line right above this current line that

we're on okay and let's create a

variable we could name it whatever we

want I will call it test array and let's

set it to equal the results of a

wordpress function named get underscore

pages this get pages function is very

similar to WP list pages really the only

difference is that this function will

handle outputting the pages onto the

screen for you whereas this function

just returns the pages in memory so if

this function is almost identical to

this function that means we want to pass

it an array of arguments so within these

parentheses let's say array and then I

like to drop down just to stay organized

and the only parameter we need to use

here is child of equals and let's just

use the ID of the current page so get

the ID and now if the current

Paige has children this function will

return a collection of any and all

children pages on the other hand if the

current page doesn't have any children

this function won't return anything it

will return null or false or zero and as

we know within an if statement if

something is zero or empty it will

evaluate to false so if the current page

has a parent or if it is a parent all we

need to do to check for that is just

type out our variable name test array so

or test array cool so let's save this

and refresh this test page which is

neither a child page or a parent page

and hopefully this menu should disappear

completely cool but if we go back to the

about Us page

the menus back in business we can go to

a child page we can go to the privacy

policy page things are looking good now

before we bring this lesson to a close I

have one last tip for you if I go back

to the about Us page you'll notice that

I have multiple children links and you

might be wondering how can you control

the ordering of these for example what

if I wanted our history to come before

our goals by default WordPress will use

alphabetical ordering but if you want to

use your own custom ordering all you

need to do down here when we are calling

this list pages function within our

array of arguments let's just add

another item and let's use a parameter

named sort column and set it to equal

menu underscore order now if we save

this and then jump in to our WordPress

admin screen if I jump into the page

that I want to be first our history over

in the right hand column in this page

attributes area you'll see an order box

now if I give that page in order of one

and then go give the other our goals

page in order of – well those order

values will determine which goes first

and that's going to bring this lesson to

a close that means we're done with

relatively boring page

and now we can move on to dynamic

navigation menus and building out our

blog and after that we'll get into the

truly fun stuff probably the reason you

signed up for the course in the first

place which is learning about custom

post types custom fields creating

relationships and pulling in information

dynamically with JavaScript we've come a

long way but we still have tons to learn

let's keep it rolling I'll see you in

the next one to get immediate and

lifetime access to the full 26 hour

video course

you can find a coupon link in the

description for this video thank you so

much for watching and take care

Related Videos

Be the first to comment “Grow to be a WordPress Developer: Unlocking Energy with Code”

Your email address will not be published.

There are no comments yet.