Lesson 3: Anatomy of a theme Wordpress




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.


Previous
Next Post »