All language subtitles for 003 First Taste of PHP__en

Hello, everyone.

In this lesson, we will get our first taste of pee, HP, which is the language that word press 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.

OK.

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 P.

HP 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 in Finder.

Or if you're on Windows, it should say show in folder or open explore 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 P HP waters.

Now, it's important to point out that you can not use a word processing program to create a new P HP

file or make edits to an existing P HP 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 the industry

standard and most popular text editing program is completely free to download and use.

So right now, in a new tab, I want you to search for Visual Studio Code.

As of this recording, the domain is code dot visual studio dot com.

Obviously, this is not the only text editing program in the world, but I strongly, strongly encourage

you to use this as your text editor.

There are many reasons why this is the most popular editor, but the biggest reason I recommend it is

because a bit later in the course when we need to work with the command line.

Well, V.S. Code has a built in command line and it's always automatically pointing towards your current

project directory, which will save us from having to manually navigate around our folders in the command

line.

It's also nice to not have to jump back and forth between two different program windows.

Write your text editor and your command line, your text editor and your command line.

It's nice to have them both just in one program.

So right now, go ahead and pause this video while you download and install VNS code.

Once you've installed and opened V.S. code, then you can come back and resume this video.

Okay.

Now, once you do that, once you've opened up V.S. Code here, you'll see a welcome screen.

We actually want to create a new empty canvas or a new file where we can begin typing.

To do that, you can either use the file menu and then choose file new or you can just press control

n on your keyboard on windows or command an on Mac.

Essentially, we just want a new file where we can begin typing.

OK, so in this blank canvas, why don't we type out.

This is a test.

OK then let's go ahead and save this as a P HP file into our WordPress system folder.

So click file save or control 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 our 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 X bereavement?

And this is the important part.

Dot p HP.

So save it as experiment dot BHP.

Cool.

So now in that same folder with all of the WordPress files by scroll down to the bottom, there is our

brand new little experiment, DCPI, HP.

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.

If you're using flywheel, remember, you can always use the view site button.

But at the end of this, you r-al add on, make sure there's a forward slash and add on experiment dot

p hp 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 you are URLs to award press Web site.

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 DCPI, HP file.

However, for the time being, this is a great place to try and write our first bit of P HP 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 h t N.L. so we can then see how p HP fits into the equation.

So just as a test, let's create a heading level one HDMI 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 each demo heading level one and a heading level two.

But remember, we are not editing an H t AML file.

We are editing a P HP file.

So if this is just H.T. Amelle, what does P HP look like and what can it do?

Well, check this out.

Maybe on a new line above this code.

Typed this out with me.

Less than symbol.

Questionmark P HP.

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 BHP mode and this chunk ends P BHP mode.

OK.

So in between those where my cursor is right now, that means we are in p hp mode.

Now when we are not enpi HP mode like down here.

Right.

Because this closes p p mode.

This code down here is just regular old HDMI all but up here while we are in p p mode we can write magical

beautiful p HP code.

So check this out.

Type this out with me.

Echo echo is how you output things to the page while you're in p p mode.

So echo and then let's write two plus two.

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 H.T. demo.

Each team doesn't have a brain.

You just type out exactly what you want and that's exactly what you get.

BHP, 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 P HP do just about anything for us.

And what's cool is that the general public that's visiting our Web site.

They don't see our P.

HP code.

They only see the final product.

So, for example, here in the Web browser, if we view the source of this page view, page source.

So here we can see the H.T. Amelle code.

But notice we don't see two plus two.

We just see four.

This is because P HP is a server side language.

And that means that all of our P HP code runs on the server.

And then only the result of that code, not the code itself, gets sent to the visitors of our Web site.

So in other words, the server is what's calculating two plus two, 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 HP mode as many times as we need to.

So, for example, maybe after this heading level one, but before this heading level two.

So maybe in between those two lines, I want to drop in to P HP mode and maybe echo out the results

of five times five K and then I'll be sure to close out or end P HP mode.

OK.

And if I save this and refresh.

Cool.

So in between the two headlines we see.

Twenty five.

So back to the code.

You can see that in a P HP file we can seamlessly jump back and forth between P.

HP hdmi l.

P hp h.

Temo.

All right.

Now before we end this lesson, I want to have you type out one more P HP example.

All right.

So on this page, you can see that my name is included twice here in 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 100 times or 300 times updating it and 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 place holder 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 with my name.

Well, there's no way to do that with regular old HDMI oil, but we can do it with P HP.

So check this out.

Up here on this top line right after two plus two.

While we are still in P HP mode.

Let's add a semicolon.

The semicolon tells BHP 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.

OK.

And right now, I'm still in P HP 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 P HP that

we are done with this task.

Now, let's go over this code that we just wrote.

So the $ symbol is how you create a variable in P-H p.

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 P.H. PS 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 BHP 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 P.H. P mode.

OK.

And remember, Echo is how we output something onto the page.

When we are in p p mode.

And then we just type out the variable name.

So dollar sign my name.

OK.

And then let's be sure to close out of P p mode.

Cool.

So on this line we start out with H Temo.

Then we enter into p p mode to get that variable value.

Then we close out of P HP.

So then we're back into H.T. AML 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 BHP section.

Copy it pasted right here.

OK.

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 p HP file that we just created is not in any way connected to the core of WordPress.

However, WordPress is written in the P.

HP language.

And at this point in the course, you are now familiar with the basics of P HP, right?

You know how to enter p HP mode.

You know how to close p HP 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 P HP knowledge in your tool belt, you are now ready to start writing

WordPress code, or in other words, you're ready to use P HP to tell WordPress what to do.

And this is where things get fun.

So in our very next lesson, we are going to use P HP Code to create our own brand new custom WordPress

theme.

But really quick, before we jump into that next lesson, I want to talk about our experiment dot p

HP file.

If everything in this lesson made sense, I encourage you to actually go ahead and delete our experiment.

DCPI, HP 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 OK.

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.