Before we go and add the loop to our index.php file, let's go and

get the extra markup that comes after the closing of the header and

before the opening of the footer.

If we come back into our index.html file,

we can see that after the header tag closes.

There's a section class, row, another class with the columns and

in this case, a leader class.

For a portfolio listing, we have a slightly different markup.

For now we'll just copy this section.

Come in and paste this in to our index.html.

However, when we come over and

look at our site, we can see that this doesn't look quite right.

The reason for this, lies in the functions.php file.

And a few errors that we made earlier,

that we didn't really get to see in effect until now.

The first one is that the foundation file,

I had written an s at the end when it should be no s.

If we refresh the page we could see that this automatically starts to look better.

The second is the normalize file.

We could see that we have given it the same name as the Google font file.

So, if we rename it Google, googlefont_css that should differentiate these two.

We could see the file change slightly.

However, this doesn't look quite the same as it should in our example template.

The reason is for this normalized CSS file, that you only really need if you

plan on making further customizations on the theme, and

want to normalize some of the styles and font sizes.

So, if we comment that out, and we refresh it, we can see that it's now

starting to look more like the template file that we had to start with.

[BLANK_AUDIO]

Now, that we have that correct, we can come back into our index.php file,

and add in our loop with our dynamic content.

We're gonna come back to the loop page.

And we'll copy the opening, and

then copy the closing.

And then we can think about where would be the best place to place this code.

For example we could see that if there are posts to

run it will output this entire section.

If there aren't then it will only output this paragraph tag.

However we don't want that entire section to be missing so a better idea is

to take this and wrap it just where we need the content specifically to display.

[BLANK_AUDIO]

When we're coding we'll create a little bit of room around these PHP blocks,

just so that they could help stand out, as you become familiar with using them as

a point of reference, and with typing them.

However, you don't necessarily need the white space on the page if you

wanna make it more condensed.

Now, that we have this, we can update

this with dynamic content by using two

special tags, the title, and the content.

There are a whole lot of functions like this in the WordPress world, and

as you begin to develop more themes, you'll become more familiar with more and

more of them.

However, it’s nice to know that most of them have pretty obvious names like

the title, the category, the author, the content, et cetera.

So, you can begin either guess, or

easily remember, or figure out if you see something what it is that it’s doing.

Let’s go ahead with this updated dynamic loop.

Come back to our site, refresh it and see that we see Hello world!

If we go in and we add another post,

and publish it go back to our site.

We can see that we see the new post as well as the old one.

Likewise, if we come into our site and add a new page,

and then customize WordPress in order to use a static front page.

And now we view our site.

We can see that we're displaying the static home content.

And if we were to edit this [SOUND]

we could see that it's working.

This index.php file, as we mentioned before,

serves as the backup or default template for all other pages.

That's why, whether we're displaying a blog listing page or a static home page,

or even an individual page or an individual blog post,

we can control and view all of that from the index.php file.

However, this is not generally done.

So, what we'll do in the rest of the videos is look at all of

the other types of templates that you could use,

to override the index.php file from acting as the primary template.

However, before we do that, let's look at a couple of the functions that

are commonly used within the word press loop like the title and the content