Tip:
Highlight text to annotate it
X
How do I design the header?
In most cases, you want to add a company logo here.
This needs to be implemented in the file header.php
As you see, twenty twelve just added the name of the site and the so-called tagline here.
These two lines need to be replaced by the logo in the file header.php.
Before you do any changes, you should save header.php in your own child theme folder.
This is important, because WordPress will check your child folder first for the file header.php.
If it's not there, it will check the parent folder. Therefore, make sure the file is available in the child folder.
Now you add the logo here. You may want to use an image tag for this.
Make sure you also add the alt attribute. This may be an empty text or the word "logo".
The alt attribute should describe the image and is used primarily for blind people who can't see the images.
The alt attribute is also shown in the browser, if the image could not be loaded for some reason.
In this case, you need to save the logo somewhere in the child theme folder, so that WordPress will be able to find it.
For pictures like these, I usually create a sub-folder named "images", where I store all theme related pictures and icons.
To get the proper URL for the image, I use the function get_stylesheet_directory_uri().
It returns the URL of my child theme directory.
I add the name for the sub-folder "images" and the file name for the logo at the end.
In most cases, you also want the logo to be clickable, so that a click on the logo will get you back to the front page of your site.
To implement that, I add an anchor tag that enclose the image. For the href attribute, I use the function home_url() that returns the URL of the home page.