How to create a real WordPress theme: header.php and style.css files

This is the second part of a serie dedicated to the creation of a WordPress template. In the first part we saw how to create the folders and files needed for the functioning of the theme, in this post we will begin to change the HTML code of the main files.

I remind you that this guide is meant to recreate the Mymagazine WordPress theme which you can download from the theme directory of WordPress.org.

To follow this guide you need:

  • a development version of WordPress;
  • a basic knowledge of html, css, php and jQuery.

The style.css file of a WordPress template

The style.css file contains the main css instructions of the WordPress template. It can be the only file containing css rules, but in most cases you’ll find other css files within theme folders. This file always begins with a few lines of code contained within a comment, called ” file headers “. These instructions consist of a name and a value separated by the character “:” and contain meta-information on the theme, which allow WordPress to discover it in the admin panel, as we have seen in previous images; also provide more informations about the author, the description, version, and especially a few keywords (tags) that allow you to locate it inside the WordPress template directory.

/*
Theme Name: MyMagazine-demo
Theme URI: http://www.svgthemes.com/mymagazine
Author: Alessandro Costa
Author URI: http://www.svgthemes.com
Description: Mymagazine is a creative and responsive WordPress theme. It has a clean and colorful magazine style, perfect for news websites dedicated to sports or travels.
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, two-columns, right-sidebar, responsive-layout, flexible-header, custom-header, custom-menu, editor-style, featured-images, post-formats, sticky-post, translation-ready, custom-background
Text Domain: mymagazine
*/

In this code I used exactly the code contained in Mymagazine, the only difference is the word “-demo” which I added to the name of the theme to avoid conflicts with the real one. On this page of the codex you can see the list of the tags allowed.  Tags can be used only if the theme meets certain conditions, otherwise the theme reviewer will report the error, inviting you to remove the tag, or to modify the theme to make it conform to its meaning. Copy the code above in the style.css file, save it and return to the theme installer: as you can see the theme is ready to be activated!

WordPress themes installator screenshot

The preview of the new WordPress template is a blank screen, you should add a .png image to the root folder of the theme an image in .png format called “screenshot.png”, whose optimum dimensions are 1200 x 900 pixels.
All other instructions contained in style.css exclusively to the aesthetic appearance of the site, and are not specific to the operation of the WordPress template. For this reason I will not dwell over the style.css file, but if you have downloaded the theme, you can copy the contents of the style.css file and add it in your file.
Now click on “active” and try to view the site. Not exactly what you expected, is it? Quiet, it is normal that there is some display problem, so far we have only used html, php or anything WordPress templates tag. It’s time to rewrite the code!

The header.php file

All pages of the site will have the same code contained within the <head> section and the code used to display the header and the navigatio menu; so, rather then type it in all pages of the site, we can put this part of the code in the header.php file, letting WordPress retrieve it on all pages.

At this time the code inside the header.php file should be as follows:


<!DOCTYPE html>
<html lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <title>MyMagazine – a free WordPress theme</title>
        <link rel="alternate" type="application/rss+xml" title="MyMagazine » Feed" href="http://www.svgthemes.com/mymagazine/feed/">
        <link rel="alternate" type="application/rss+xml" title="MyMagazine » Comments Feed" href="http://www.svgthemes.com/mymagazine/comments/feed/">
        <link rel="stylesheet" id="mymagazine_google_fonts-css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C700%2C300italic&amp;ver=4.4" type="text/css" media="all">
        <link rel="stylesheet" id="mymagazine_foundation-css" href="http://www.svgthemes.com/mymagazine/wp-content/themes/mymagazine/css/foundation.min.css?ver=4.4" type="text/css" media="all">
        <link rel="stylesheet" id="mymagazine_main_css-css" href="http://www.svgthemes.com/mymagazine/wp-content/themes/mymagazine/style.css?ver=4.4" type="text/css" media="all">
        <script type="text/javascript" src="http://www.svgthemes.com/mymagazine/wp-includes/js/jquery/jquery.js?ver=1.11.3"></script>
        <script type="text/javascript" src="http://www.svgthemes.com/mymagazine/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
        <link rel="https://api.w.org/" href="http://www.svgthemes.com/mymagazine/wp-json/">
        <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.svgthemes.com/mymagazine/xmlrpc.php?rsd">
        <meta name="generator" content="WordPress 4.4">
        <link rel="icon" href="http://www.svgthemes.com/mymagazine/wp-content/blogs.dir/2/files/2016/01/cropped-favicon-32x32.gif" sizes="32x32">
        <link rel="icon" href="http://www.svgthemes.com/mymagazine/wp-content/blogs.dir/2/files/2016/01/cropped-favicon-192x192.gif" sizes="192x192">
        <link rel="apple-touch-icon-precomposed" href="http://www.svgthemes.com/mymagazine/wp-content/blogs.dir/2/files/2016/01/cropped-favicon-180x180.gif">
        <meta name="msapplication-TileImage" content="http://www.svgthemes.com/mymagazine/wp-content/blogs.dir/2/files/2016/01/cropped-favicon-270x270.gif">
    </head>
    <body class="home blog">


<div class="wrapper">
            <a class="skip-link screen-reader-text" href="#content">Skip to content</a>


<header id="masthead" class="site-header">


<div class="pre-header">


<div class="row">


<div class="small-12 columns">


<ul class="mobile-icons">


<li class="li-social">


<ul id="menu-social" class="social-links">


<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="http://www.facebook.com"><span class="screen-reader-text">facebook</span></a></li>




<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="http://www.pinterest.com"><span class="screen-reader-text">pinterest</span></a></li>




<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="http://www.twitter.com"><span class="screen-reader-text">twitter</span></a></li>


                                    </ul>


                                </li>




<li><span class="genericon genericon-search"><span class="screen-reader-text">Search</span></span></li>




<li><span class="genericon genericon-user"><span class="screen-reader-text">Login</span></span></li>


                            </ul>




<ul id="menu-social-1" class="social-links">


<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="http://www.facebook.com"><span class="screen-reader-text">facebook</span></a></li>




<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="http://www.pinterest.com"><span class="screen-reader-text">pinterest</span></a></li>




<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="http://www.twitter.com"><span class="screen-reader-text">twitter</span></a></li>


                            </ul>




<form role="search" method="get" class="search-form" action="http://www.svgthemes.com/mymagazine/">
                                <label>
                                    <span class="screen-reader-text">Search for:</span>
                                    <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
                                </label>
                                <input type="submit" class="search-submit" value="Search">
                            </form>


                            <a class="log" href="http://www.svgthemes.com/mymagazine/wplogin?redirect_to=http%3A%2F%2Fwww.svgthemes.com%2Fmymagazine" title="Login">Login</a>
                            <a class="log" href="http://www.svgthemes.com/mymagazine/wplogin?action=register" title="Register">Register</a>
                        </div>


                    </div>


<!-- end .row -->
                </div>


<!-- end .pre-header -->


<div class="main-header">


<div class="row">


<div class="small-11 columns logo">


<h1 class="site-title"><a href="http://www.svgthemes.com/mymagazine/" rel="home">MyMagazine</a></h1>




a free WordPress theme

  
                        </div>


<!-- .logo -->
                    </div>


<!-- end .row -->


<nav class="site-navigation main-nav">       


<div class="row">


<div class="nav-columns small-12 columns">


<h2 class="screen-reader-text">menu</h2>




<div class="screen-reader-text skip-link">
                                    <a href="#content" title="Skip">Skip to content</a>
                                </div>




<div class="header-menu">
                                    <span class="screen-reader-text">menu</span>
                                    <span class="menu-button">
                                        <span class="menu-bar"></span>
                                        <span class="menu-bar"></span>
                                        <span class="menu-bar"></span>
                                    </span>
                                </div>




<ul id="menu-primary" class="menu">

<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://www.svgthemes.com/mymagazine/mymagazine-free-wordpress-theme/">About Mymagazine</a></li>


<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a href="http://www.svgthemes.com/mymagazine/typography/">Typography</a></li>


<li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="http://www.svgthemes.com/mymagazinepro">Get MyMagazine Pro</a></li>

</ul>


            
                          </div>


<!-- end .small-2 .medium-12 .columns -->
                        </div>


<!-- end .row -->
                    </nav>


<!-- .site-navigation .main-navigation -->
                </div>


<!-- .main-header -->
            </header>


<!-- .site-header -->


<div class="start row"><!-- Main Column -->

While the code in the header.php file contained inside the Mymagazine theme folder is as follows:

<?php ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>

<div class="wrapper">
            <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'mymagazine'); ?></a>
            <?php if ( get_header_image() ) : ?>

<div class="row">

<div id="site-header">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                        <img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                    </a>
                </div>

            </div>

            <?php endif; ?>

<header id="masthead" class="site-header">

<div class="pre-header">

<div class="row">

<div class="small-12 columns">

<ul class="mobile-icons">

<li class="li-social">
                                <?php                                 wp_nav_menu( array(                                     'theme_location' => 'social',
                                    'container'       => false,
                                    'menu_id'         => '',
                                    'menu_class'      => 'social-links',
                                    'depth'           => 1,
                                    'link_before'     => '<span class="screen-reader-text">',
                                    'link_after'      => '</span>',
                                    'fallback_cb'     => '',
                                ));
                                ?>
                                </li>


<li><span class="genericon genericon-search"><span class="screen-reader-text"><?php echo _e('Search', 'mymagazine'); ?></span></span></li>


<li><span class="genericon genericon-user"><span class="screen-reader-text"><?php echo _e('Login', 'mymagazine'); ?></span></span></li>

                            </ul>

                            <?php                             wp_nav_menu( array(                                     'theme_location' => 'social',
                                    'container'       => false,
                                    'menu_class'      => 'social-links',
                                    'depth'           => 1,
                                    'link_before'     => '<span class="screen-reader-text">',
                                    'link_after'      => '</span>',
                                    'fallback_cb'     => '',
                                ));
                            ?>
                            <?php get_search_form( true ); ?>
                            <a class="log" href="<?php echo esc_url(wp_login_url( home_url() )); ?>" title="Login"><?php echo _e('Login', 'mymagazine'); ?></a>
                            <a class="log" href="<?php echo esc_url(wp_registration_url()); ?>" title="Register"><?php echo _e('Register', 'mymagazine'); ?></a>
                        </div>

                    </div>

<!-- end .row -->
                </div>

<!-- end .pre-header -->

<div class="main-header">

<div class="row">

<div class="small-11 columns logo">
                            <?php                             if ( '' != get_theme_mod( 'mymagazine_logo_image' )) {                                 $logo_image_url = get_theme_mod( 'mymagazine_logo_image' ); ?>
                                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="logo-img" src="<?php echo esc_url( $logo_image_url ); ?>" alt="logo"/></a>
                            <?php                             } else { ?>

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

                            <?php } ?>


<?php bloginfo( 'description' ); ?>

  
                        </div>

<!-- .logo -->
                    </div>

<!-- end .row -->

<nav class="site-navigation main-nav">       

<div class="row">

<div class="nav-columns small-12 columns">

<h2 class="screen-reader-text"><?php _e('menu', 'mymagazine'); ?></h2>


<div class="screen-reader-text skip-link">
                                <a href="#content" title="Skip"><?php _e('Skip to content', 'mymagazine'); ?></a>
                            </div>


<div class="header-menu">
                                <span class="screen-reader-text"><?php _e('menu', 'mymagazine'); ?></span>
                                <span class="menu-button">
                                    <span class="menu-bar"></span>
                                    <span class="menu-bar"></span>
                                    <span class="menu-bar"></span>
                                </span>
                            </div>

                        <?php                                 wp_nav_menu( array(                                     'theme_location' => 'primary',
                                    'menu_id' => 'menu-primary',
                                    'container'       => false,
                                    'menu_class'      => 'menu',
                                    'depth'           => 3,
                                ));
                                ?>
            
                      </div>

<!-- end .small-2 .medium-12 .columns -->
                    </div>

<!-- end .row -->
                  </nav>

<!-- .site-navigation .main-navigation -->
                </div>

<!-- row -->
            </header>

<!-- .site-header -->

<div class="start row"><!-- Main Column -->

Let’s examine the differences, focusing primarily on the code for html and head tags. As mentioned, this guide assumes you have at least a basic knowledge of html and php, so I will not dwell on every single line of code but only on the instructions that deserve an in-depth as specific WordPress.

The function language_attributes();

On line n. 3 we find this code:


 <html <?php language_attributes (); ? >>


The language_attributes () function allows you to specify within the <html> tag the language used by the web site, the same which is set in Settings -> General -> Language Site of the back-end of WordPress. For example, if the site language is set in Italian, the html code generated by that line of code will be as follows: <html lang = “it-IT”>

The function bloginfo();

In line n. 5 we find the statement:

<meta charset = "<?php bloginfo ( 'charset');?>">

For the first time we encounter the “bloginfo ()” function, which we will meet several times during the course of this guide. This function gives us a range of information about the site, which in most cases are the same septate in the WordPress admin pages, especially in the “Settings” section. For example, suppose you want to display the name of the site “WordPress template” within a <h2> header. Rather than write code

<h2> Welcome to the site "WordPress template" </ h2>

write

<h2> Welcome to the site "<? Php bloginfo ( 'name');?>" </ h2>.

That way if one day we decide to change from “WordPress template” to “WordPress theme” the site name we’ll just go in the admin panel, under “General Settings” and change the title of the site. Automatically the output generated by WordPress will also update without you having to change the code already written. Consult the WordPress codex page for the function “bloginfo ()”, you can discover all the information it is able to give us. It is important to note that this function directly displays the required informations in the page, without the need to use the “echo” instruction. In case you need to have returned the value of the function, you must use the “get_bloginfo ()” function.

In line n. 6 we find another tag

<meta name = "viewport" content = "width = device-width"> 

it is used to make a responsive layout, nothing specifically dealing with the use of WordPress.

As you can see, after two lines you close the <head> tag. Where have all the links to style sheets and javascript files that we had in the html version gone? To answer we must put aside temporarily our header.php and open the functions.php file, but we will do so in the next article. In the meantime, if you have doubts or questions please write a comment below, if you liked this part of the guide on how to create a WordPress template do not forget to share it!

 

Comments

Leave a Reply

Your email address will not be published. Name and email are required.