WordPress Themes .. Introduction

Pages: 1 2

The Simplest Theme

In order for WordPress to “do” anything at all, a “theme” must be active.  The simplest theme is a collection of two files.

  • style.css – a stylesheet file, which also DEFINES the theme to WordPress
  • index.php – theme template file, which controls what gets sent to the browser

An optional (recommended) third file is an image of sorts which makes it easy to identify the theme in the WordPress Admin area.

In our case we have the following three files

style.css

/*
 Theme Name: Simple 00
 Theme URI: http://www.drmagu.com/
 Description: The Simplest theme for WordPress.
 Author: DrMagu
 Author URI: http://www.drmagu.com/
 Version: 1.0
 Tags:
 License:
 License URI:
 General comments (optional).
*/

index.php

<!DOCTYPE html>
<html>
<head>
<title>WordPress Simple Theme 00</title>
</head>
<body>
<h1>Pressing Words</h1>
<img class="alignright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Wine_Press.jpg/160px-Wine_Press.jpg" alt="Wine Press" align="right" />
<p><strong>WordPress</strong> can be looked at as a specialized web server. Of course it is layered on top of a traditional web server, most often, but not always, <strong>Apache</strong>. </p>
<p>The supporting technologies are <strong>PHP</strong> as a server-side scripting language and <strong>MySQL</strong> as the underlying database engine to provide persistent storage of information. </p>
<p>This page, rendered here, is produced by <strong>WordPress</strong> in response to the URL <a href="http://maguenterprises.com" target="_blank">http://maguenterprises.com</a> being entered into the browser window. The <strong>WordPress</strong> install is using the <em>simple00</em> theme. The exact HTML which is sent to the browser is the content of the <em>index.php</em> file in the <em>simple00</em> theme directory.</p>
<p>Although this page is indeed <strong>WordPress</strong> output, <strong>WordPress</strong>'s only action was to recognize <em>simple00</em> as the active theme, and push the content of the theme's <em>index.php</em> file out to the browser. </p>
</body>
</html>

screenshot.png

WordPress Simplest Theme 00

WordPress Simplest Theme 00

 

WordPress Dashboard shows the theme active

Output from WordPress

With this theme activated, when visiting the WordPress site in question the following is displayed:

Simplest WordPress Theme

So, although simple00 is technically a valid theme, it doesn’t really *DO* anything.  Furthermore, although we have a style.css file in the theme directory, if we add the following style directives

p {font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
h1 {font-size: 18px; color: #999; }

nothing changes on the page as displayed on the browser.  Obviously the theme style.css file is not being used.  Read the next installment for an explanation as to what is happening.

 

Pages: 1 2

Leave a Reply

You must be logged in to post a comment.