Lesson 3: Anatomy of a theme Wordpress ~ DepoTech

1 theme is one style sheet, 1 screenshot, and templates.

Style.css: the stylesheet

This file must be named style.css and is indispensable. Why? It contains the theme-related information. They are written as a comment at the top of the CSS style sheet:

/* Theme Name:
Le Guide WordPress
Theme URI: http://wordpress.bbxdesign.com
Author: bbx
Author URI: http://bbxdesign.com
Description: Le thème du Guide WordPress.
Version: 1.0
Tags: blue, orange, light, three-columns, left-sidebar, responsive-layout, editor-style, featured-images, full-width-template, sticky-post, theme-options, translation-ready, accessibility-ready */

Screenshot.png: 880 × 660

The screenshot will appear in the administration. It is not essential but convenient to activate the right theme.

What is a template?
A template is a PHP file is called by WordPress to generate HTML.
Create for example a index.php file that mixing PHP and HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first tutorial</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
</head>
<body>
<h1>Welcome to the website <?php bloginfo('name'); ?></h1>
<p><?php blogdesc('description'); ?></p>
</body>
</html>

The code is primarily HTML wherein said 3 areas PHP to insert the variable content.
It is in this case the <? Php bloginfo (); ?> With 3 different settings:

stylesheet_url: the url of the stylesheet or blog.fr/wp-content/theme/mon-theme/style.css
name: Site name (configurable in the administration)
Description: slogan

This sample is very low in index.php code, certainly, but it is enough. This is mainly to show you what a template.

For the sake of horizontal space, I will use the double space instead of the usual tabs to indent the code. Although I prefer tabs as they are more practical in HTML, code readability prevails here.

A blog Plan
To understand the templating system, one must have in mind in terms of a site, especially that of a blog first. Here, for example the imaginary plane of a basic blog, with the corresponding url type.

.Home blog.Net-explain
.Archive of the year blog.Net-explain/2011
.Monthly Archives blog.Net-explain/2011/12
.Archives of day blog.Net-explain/2011/12/25
. Category blog.Net-explain/category/geek
.Keyword blog.Net-explain/tag/iphone
.Search results Blog.Net-explain/?s=Gift
.ticket blog.Net-explain/2011/12/25/noel iphone
.About blog.Net-explain/About
.404 blog.Net-explain/404

What must be understood is that there is a hierarchy in the site: we start with the home page, you can go directly to a ticket or pass through the monthly archives, search, falling on a page that does not exist ...

According to the page where you want to go, WordPress will use a corresponding template:

PAGE CALLED URL TEMPLATE USED

Home blog.Net-explain home.php

Archive
(yearly, monthly or daily) blog.Net-explain/2011 date.php blog.Net-explain/2011/12

blog.Net-explain/2011/12/25

Category   blog.Net-explain/category/geek     category.php

Keyword blog.Net-explain/tag/iphone tag.php

Search result Blog.Net-explain/?s=Gift    search.php

Post blog.Net-explain/2011/12/25/ single.php
noel iphone

Page   blog.Net-explain/About page.php

404    blog.Net-explain/ljhgufut 404.php

Know that there are many more templates than that, but the key is there. This system allows to differentiate the content of HTML pages generated URL visited by the user.

Also, the names of these templates is very important: WordPress is used to call the right file.