Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Now that we have a basic understanding of what the WordPress Loop looks like and what it does, we will begin to add it to our index.php file to display our dynamic homepage content.
-
0:00
Before we go and add the loop to our index.php file, let's go and
-
0:04
get the extra markup that comes after the closing of the header and
-
0:08
before the opening of the footer.
-
0:13
If we come back into our index.html file,
-
0:18
we can see that after the header tag closes.
-
0:22
There's a section class, row, another class with the columns and
-
0:27
in this case, a leader class.
-
0:30
For a portfolio listing, we have a slightly different markup.
-
0:34
For now we'll just copy this section.
-
0:41
Come in and paste this in to our index.html.
-
0:45
However, when we come over and
-
0:47
look at our site, we can see that this doesn't look quite right.
-
0:51
The reason for this, lies in the functions.php file.
-
0:55
And a few errors that we made earlier,
-
0:58
that we didn't really get to see in effect until now.
-
1:02
The first one is that the foundation file,
-
1:06
I had written an s at the end when it should be no s.
-
1:10
If we refresh the page we could see that this automatically starts to look better.
-
1:15
The second is the normalize file.
-
1:18
We could see that we have given it the same name as the Google font file.
-
1:25
So, if we rename it Google, googlefont_css that should differentiate these two.
-
1:35
We could see the file change slightly.
-
1:37
However, this doesn't look quite the same as it should in our example template.
-
1:44
The reason is for this normalized CSS file, that you only really need if you
-
1:49
plan on making further customizations on the theme, and
-
1:52
want to normalize some of the styles and font sizes.
-
1:56
So, if we comment that out, and we refresh it, we can see that it's now
-
2:01
starting to look more like the template file that we had to start with.
-
2:06
[BLANK_AUDIO]
-
2:10
Now, that we have that correct, we can come back into our index.php file,
-
2:16
and add in our loop with our dynamic content.
-
2:23
We're gonna come back to the loop page.
-
2:27
And we'll copy the opening, and
-
2:36
then copy the closing.
-
2:41
And then we can think about where would be the best place to place this code.
-
2:46
For example we could see that if there are posts to
-
2:50
run it will output this entire section.
-
2:53
If there aren't then it will only output this paragraph tag.
-
2:58
However we don't want that entire section to be missing so a better idea is
-
3:03
to take this and wrap it just where we need the content specifically to display.
-
3:09
[BLANK_AUDIO]
-
3:27
When we're coding we'll create a little bit of room around these PHP blocks,
-
3:31
just so that they could help stand out, as you become familiar with using them as
-
3:35
a point of reference, and with typing them.
-
3:39
However, you don't necessarily need the white space on the page if you
-
3:42
wanna make it more condensed.
-
3:45
Now, that we have this, we can update
-
3:51
this with dynamic content by using two
-
3:57
special tags, the title, and the content.
-
4:05
There are a whole lot of functions like this in the WordPress world, and
-
4:09
as you begin to develop more themes, you'll become more familiar with more and
-
4:14
more of them.
-
4:15
However, it’s nice to know that most of them have pretty obvious names like
-
4:20
the title, the category, the author, the content, et cetera.
-
4:24
So, you can begin either guess, or
-
4:27
easily remember, or figure out if you see something what it is that it’s doing.
-
4:33
Let’s go ahead with this updated dynamic loop.
-
4:36
Come back to our site, refresh it and see that we see Hello world!
-
4:42
If we go in and we add another post,
-
4:49
and publish it go back to our site.
-
4:57
We can see that we see the new post as well as the old one.
-
5:03
Likewise, if we come into our site and add a new page,
-
5:14
and then customize WordPress in order to use a static front page.
-
5:28
And now we view our site.
-
5:30
We can see that we're displaying the static home content.
-
5:34
And if we were to edit this [SOUND]
-
5:40
we could see that it's working.
-
5:46
This index.php file, as we mentioned before,
-
5:50
serves as the backup or default template for all other pages.
-
5:56
That's why, whether we're displaying a blog listing page or a static home page,
-
6:01
or even an individual page or an individual blog post,
-
6:06
we can control and view all of that from the index.php file.
-
6:12
However, this is not generally done.
-
6:15
So, what we'll do in the rest of the videos is look at all of
-
6:18
the other types of templates that you could use,
-
6:21
to override the index.php file from acting as the primary template.
-
6:27
However, before we do that, let's look at a couple of the functions that
-
6:31
are commonly used within the word press loop like the title and the content
You need to sign up for Treehouse in order to download course files.
Sign up