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.
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!
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:
While the code in the header.php file contained inside the Mymagazine theme folder is as follows:
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>
<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.