WORDPRESS 5. More about header template.

So, this is the fifth lesson of the WordPress Theme Course. Probably, it is not worth talking anymore, but I will remind you for the last time - do not forget to read the previous lessons before considering the next one. Otherwise, you will not understand anything. Today, in this brief lesson, we will summarize everything that we have learned about the header template and become familiar with the block layout.

Step 1:

• start the apache server
• open the folder with your theme, under the name Tutorial
• open a browser, go to http: // wordpress /
• go back to the folder with the theme, open the index.php file in the editor

Step 2:

At this point you should see:

Add <h1> and </ h1> at the beginning and at the end of the line. The tag <H1> means the title number 1. In general, there are 6 titles: H1, H2, H3, H4, H5 and H6. By default, H1 is the largest tag in size, and H6 is the smallest.
Now the line of code looks like this:

Save the file, return to the browser and refresh the window.

Step 3:

Call up your blog description, type <? Php bloginfo ('description'); ?> immediately under the heading reference code. It should turn out like this:

Save it, refresh your browser so that the description of your blog is displayed under the link to the title. Later you can change the blog description in the admin panel.

<? php - the beginning of PHP;
bloginfo ('description') - call information about my blog, in particular the description;
; - stop calling the description;
?> end php.

Step 4:

This step will introduce you to the new tag - DIV.
Type <div> and </ div> at the beginning and at the end of everything that is already in the file. Like this:

Save it, refresh your browser window. You should not see any changes.

Imagine that a DIV is an invisible block. It exists to separate the link to the blog header and the blog description from the rest. If you do not design it, it does not perform any functions other than content sharing. Later, you will learn how to use the style.css file to make your invisible block your own style. DIV can be decorated with borders, textures, fields, background colors, images and other things.

Step 5:

Add id = "header" to the DIV tag, like this:

Save the file, refresh the browser window.

This change also does not lead to anything yet. We assigned an ID to the DIV tag, because that tag will not be the only one - the same invisible blocks will appear. But you need a way to somehow separate them, right? About this in the following lessons.