May 202014
 
Article WordPress

One of the most basic good practice in programming, is to keep separate the code that implements the functionality of the application from the code that implements the look and feel.

This is the case of WordPress, where the design of the site is maintained in a set of template scripts that a referred as a theme. In this way, replacing the theme used in a blog with a new theme  may result in a mayor change in the look and feel of the site, with no need to change anything in the functionality implemented in the wordpress core, or in the extra functionality provided by the installed plugins.

This post explains what are the components that together conform a wordpress theme, how to start developing a theme from scratch, and how to integrate the theme in the wordpress platform.

style.css and index.php files

For every theme in a wordpress installation, there is a subdirectory under “/wp-content/themes” that contains the templates of the theme. The simplest theme would only require the presence of two files in that subdirectory

style.css – As the name implies, the purpose of this file is to contain the CSS style specifications. But it is also used to keep the description of the theme, using a comment at the beginning of the file, enclosed between “/*” and “*/”. This comment is not free format, because it is interpreted by wordpress. As a minimum, it must contain the name of the theme in a line: “Theme Name: NAME_OF_THE_THEME”. For instance, the comment that appears in the first lines of the style.css file of the default Twenty Thirteen theme is:

index.php – index.php is the default template used to render the pages of the site. The theme may include other templates for different types of pages: single posts, lists of posts in a category, author pages (more on this later), but if there is no specific template available in the theme for a given type, the default template index.php will be used to render the page.

The “minimum” theme

To illustrate this post, we will create a minimum theme. First, we’ll create a directory “wp-content/themes/minimum” to hold the templates, and the we’ll create just two files under it:

  • wp-content/themes/minimum/style.css:

 

  • wp-content/themes/minimum/index.php

As we can see, we have not written yet any CSS specification in the style.css file. Only the comment with the name of the theme is in it.

On the other hand, there are three distinct parts in the content of the default template “index.php”

  • A call to get_header(). This function generates the header, starting with the <html> tag, followed by the<head>…</section> and the <body> tage, then  followed by the html code of the visible page header.
  • A central part, known as “The Loop”. The code that renders the specific content of the page requested is generated here.
  • Finally, a call to get_footer(). This function generates the page footer, and closes the page with the </body>, </html> tags.

The content to be displayed may be the content of a single post, or a list of posts (for instance the list of posts in a category, the list of posts that match a search, etc…). For each of the posts whose content is to be displayed, the call to the_post() inside the loop makes the information for that post available to be retrieved by calling the corresponding functions:

  • the_title(): Returns the post title
  • the_permalink(): Returns the url used to access the post
  • the_time(): Returns the post creation date
  • the_content(): Returns the post content
  • etc..

Besides, there is another set of functions that can be used to determine the type of page, and generate html code suited for the kind of content that is going to be displayed:

  • is_front_page(): True if the page to be displayed is the front page (either a static page, or the list of most recent posts).
  • is_home(): True if the page to be displayed is the list of most recent posts (this is also the default front page, unless a static page has been configured as the front page)
  • is_single(): True if the page will display the content of a single post
  • is_category(): True if the page is the list of posts in a category
  • is_page(): True for pages created as pages, not posts
  • is_author(): True for author pages, showing the list of posts written by the same author.

Moreover, there are other functions available that allow to check if some conditions are met, that might alter the content of the page. For instance:

  • is_admin(): True if the page will show the admin toolbar.
  • is_search(): True if the page will show a list of posts that match a search done by the user.
  • is_404(): True if the request is for a non-existent page.
  • etc…

Using these functions, we are able to add to the default template the PHP code that will generate the HTML code to display the requested content, as follows:

If a single post has been requested, show the title and creation date, and the post content.

If a list of posts has been requested, show the title and creation date of each post.

The final index.php template would be:

Once the minimum theme is ready, we can have a look at the result, configuring it as the theme for our blog, and accessing it from a browser:

list-of-posts

Theme minimum – Home Page – List of Posts

single-post

Theme minimum – Single Post

Summary

In this first post, we have presented the basic concepts used in the development of a wordpress theme from scratch, and have created a minimum theme that works. In the next posts in this series, we will be exploring other aspects that need to be addressed in the development of a theme: adding a menu and sidebar, setting up a layout, etc…

References

 Posted by at 11:50 am

 Leave a Reply

(required)

(required)