Creating WordPress Theme – Inside Header File

Creating WordPress Theme Inside Header File
Share this to your friends

You’ll probably notice that the header.php file lacks meta tags as this article will be more focus on using WP(WordPress) functions.


1 <!DOCTYPE html>
2 <html <?php language_attributes(); ?>>
3 <head>
4 <meta charset="<?php bloginfo( 'charset' ); ?>"/>
5 <title><?php bloginfo( 'name' ); ?> | <?php is_front_page() ? bloginfo( 'description' ) : wp_title(); ?></title>
6 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
7 <?php wp_head(); ?>
8 </head>
9 <body>
10 <header>
11 <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
12 </header>
13 <nav>
14 </nav>

In line #4 we again use the bloginfo function. As stated in the previous post we can use this function to retrieve values (e.g. ‘name’, ‘description’, ‘version’). Values mostly in our blog General settings. You can read this article here to know more about this function.

Custom WordPress Theme Title


<title><?php bloginfo( 'name' ); ?> | <?php is_front_page() ? bloginfo( 'description' ) : wp_title(); ?></title>

In the code above, our title will first output the value retrieved by bloginfo( ‘name’ ), for our example it is ESCIMMA.com. We want to show the Site Title before the page title. And we will put pipe symbol (|) as a separator.
The output we want :

ESCIMMA.com | wp_title();

The wp_title() function displays or retrieve page title. Though as Codex stated, if we are using a custom homepage with custom loops and stuff, we will have an empty wp_title. This will only display just the site title and the separator in our main page. So they put a simple logic in the code above. Checking if the current page is the main page ( the main page will be the first page the visitor will see when they first visit the site http://escimma.com ) show the blog description instead.

The get_stylesheet_uri() Function

Obviously it retrieves the URI of the current theme stylesheet. The style.css path. Thought WP Theme Development article suggested to use wp_enqueue_scripts when linking a theme stylesheet or any script, we will just leave our header.php as is for now. We will explain how to use wp_enqueue_scripts in a separate post for a more in-depth explanation.

Switching Between Site Title and Site Logo

In the Site Identity panel we want to add a feature that will help us upload a logo for our blog. We also want to switch between showing the Site title or our Site logo. To do that we will add a custom control in our theme. Like the image below shows.
WordPress Header Customizer
This will make us jump to our functions.php file. More advance header.php codes and explanation will be posted in a different post. Let’s just put this as header.php file version 1.0.

Leave a Reply