Skip to main content
We are Brand SEO Beijing serving international business, your marketing partner, Contact us by

Website production theme production header file-header.php

Generally speaking, the head and bottom of all pages of our website are basically similar, so we can put these similar codes into a file, and then load the head and bottom files in each template file, so that we can There is no need to write the header and bottom files for each template, and it is easy to modify. If the header file is changed, all pages will take effect.
Following the previous tutorial, we created a new header file header.php under the theme folder content\themes\Aurelius, and then extracted (cut) the header code in index.php and wrote it into this file:

 Aurelius | Blog  Aurelius Get in touch Contact Us Latest news Blog Homepage Home  Our blog , keeping you up-to-date on our latest news.

Save the header file and add the code in front of index.php:

The get_header() function will automatically load the header.php file in the theme folder, so the file name of the header file is named header.php and then use the get_deader() function. Similarly, edit other files in the theme folder: archive .php, contact.php, full_width.php, page.php and single.php, delete the similar code above and change it to

Now that the header file has been made, the next job is to edit the header file header.php to replace the static html code inside with dynamic php code.
First of allWe need to change the information. Generally, we change the title information to this: Article Page Title | Website Name Of course, you can also change it according to your own seo. For example, some people add website description to the title.Put the header.php in Aurelius | BlogChange it to the following code:

<?php if ( is_home() ) { bloginfo('name'); echo " - "; bloginfo('description'); } elseif ( is_category() ) { single_cat_title(); echo " - "; bloginfo('name '); } elseif (is_single() || is_page() ) { single_post_title(); } elseif (is_search() ) { echo "Search results"; echo " - "; bloginfo('name'); } elseif (is_404 () ) { echo 'Page not found!'; } else { wp_title('',true); } ?>

The above code judges the home page, article page, category page, and 404 page It is necessary to set the information in a different form.
Several judgment functions are explained as follows:

  1. is_home() : Returns true when the current page is the home page
  2. is_category(): Returns true when the current page is a category page
  3. is_single(): Returns true when the current page is a single article page
  4. is_page(): Returns true when the current page is a single page
  5. For more details see WordPress Documentation: Conditional Tags

So if you want to make a theme according to your own needs, it will be very inconvenient if you don't know php, so I personally suggest that if you plan to make a theme, it is necessary to learn php.
Second step: Modify the path of the css file.
Find the following code in the header.php file

Maybe you will ask, isn't there a style.css file in the theme folder?Why is the stylesheet not loaded when visiting the website?
Because the path ./style.css of this style sheet is actually the root directory of the website, we will talk about it in future tutorials, if you don't want others to easily see that your website is using the wordprss program, then you can change the pictures and styles The path of files such as tables, for example, in this studio, the pictures and style sheets are moved to the root directory of the website, and the path such as wp-content/themes that only exists in the wordprss station will not appear in the webpage code.Well, change the above code to:

" type="text/css" media="screen" />

The bloginfo() function is very commonly used. The function parameters and usage are as follows:

bloginfo('stylesheet_url') will automatically output the absolute URL of the style.css file in the theme folder of the website, such as http://localhost/wp/wp-content/themes/Aurelius/style.css

However, there are still some pictures with wrong paths and cannot be displayed. Open index.php, archive.php, contact.php, full_width.php, page.php and single.php with a text editor, and add these pictures The correct URL, search code, will all:src="images/, replace in batches withsrc="<?php bloginfo('template_url'); ?>/images/.Now refresh your homepage and see if the article's thumbnail 610×150 can be displayed normally.
third step:To change the blog name and description information, we need to change the blog name and description to the information we set in the background, and the following code in header.php:
Aurelius Our blog , keeping you up-to-date on our latest news.

changed to


You can see that the bloginfo and get_bloginfo functions are still used here, so these two functions are often used.
the fourth step:Add wp_head.
The wp_head function is more important for themes that use plugins. Generally, if the plugin needs to load css files and js files, they are all output through the wp_head() header.php fileAdd in front:

When you go to your website, check the source code of the page, you will findThe following code is added to the tag:

Surely these codes are redundant, like program version?It is not safe to tell others the program version.So in future tutorials we will talk about how to remove these redundant header information.
the fifth step:Show menu bar
The current menu has several menu items, but they are all static. We hope to control it in the background. Find the following code in the header file header.php:

Get in touch Contact Us Latest news Blog Homepage Home

Modify the function to load the menu:

'menu_order', 'container_id'=>'menu','menu_id'=>'navigation') ); ?>

However, after adding the menu function, there is a menu control in the background, so we need to register a menu in the background.Just add the following code to functions.php:

//register menu if( function_exists('register_nav_menus') ){ register_nav_menus( array( 'primary' => __( 'main navigation menu' ), ) ); }

After entering and opening, you can see the background and you can see the theme support menu.This function is the latest menu function, not the same as the original. The wp_nav_menu function has a little more parameters, so I will not explain it here. You can search on the official website. .
Until now, although your theme can control the header code from the background, you can only see one page, because only the header is dynamic, and the rest are static.
But there is one important piece of information in the header file that has not been added, that is, the description and keywords.This is covered in the next tutorial.
Article source: WordPress theme making


Back to Top