Figuring out how themes work and applying that knowledge
To some people, making a WordPress theme will remain a “dark art”, while others, though knowledgeable In the basics of design (HTML, PHP and CSS), will not even try, because they can’t find the motivation to experiment with making their own theme. This tutorial is targeted at people who have a basic understanding of the technologies WordPress utilizes, but not the structure of themes themselves. It will help you understand how to make your own theme according to the accepted standard.
We need to explore the structure of a theme in order to know what we can do to modify or create our own. That’s why we’ll begin exploring what a theme comprises of.
WordPress Theme Anatomy
The basic elements of which a WordPress theme consists are :
- Style sheet files (mostly style.css) which contain the visual representations of elements on your site. Colors and positions are mostly governed from here
- WordPress template files, which control the way in which content is placed and information is fetched in the website. They control where information (posts and other dynamic content) is placed on your page. These are PHP files : header.php, footer.php, page.php, single.php and so on
- The additional functions file, functions.php. For a simpler theme we won’t be using this file.
Some words about style.css
Beside the actual CSS code, which is basically comprised of definitions of classes which you’re going to use in the theme, the style.css file also contains meta information about the theme, in the form of comments. A good example provided by the official WordPress documentation site looks like this:
/* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 default theme for WordPress. Author: wordpressdotorg Author URI: http://wordpress.org/ Version: 1.0 Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional) License: License URI: General comments (optional). */
Let’s give some clarification, though most of the fields are self-explanatory. The theme URI field is where the website of the author and theme itself is poster. URI stands for Uniform Resource Identifier. Theme URI and Author URI are used for the theme and author respectively. The Author field could be filled with the author’s real name , or his username in WordPress.org , that’s for him to decide. Tags include the basic characteristics of the theme, so that others would find it more easily , starting with the main colors, visual characteristics (like two-columns, custom-header), and advanced functionalities (like rtl-language-support, threaded-comments and so on).
Function and contents of the template files
As stated before, template files are what drives the WordPress installation to put the things stored in its database into visual representation. How your theme is ordered, what comes after what, and which PHP functions are called all depends on your template files.
What these template files include is the basic “skeleton” of the page, made in HTML, with included pieces of code called template tags. What those do is to call the PHP interpreter, and ask for information to be placed inside the HTML skeleton. You’ll notice them by their syntax :
<?php wp_somefunction(‘someparameter’); ?>
So here’s how we’re going to proceed – we’ll list each PHP file, and the tags incorporated in it. By doing that , you’ll get a notion of what you have to modify to get results on a certain place in your theme.
This file contains the header of your page, usually where the logo and title show up, which are present in every page. It contains the following tags:
<?php wp_title(); ?> - this returns the title generated for the page. Encapsulated in <title> tags <?php bloginfo('stylesheet_url'); ?> - this gives the style sheet URL loaded in the head section of the HTML code <?php wp_list_pages(); ?> - this is used to generate a list of pages to populate the navigation menu
In this file, the main loop is defined. In it, the content fetching and displaying of posts happens. Also, different structural parts like the header and footer are called. Basically, this file includes all of the other template files in it. Some tags in it are :
<?php get_header(); - site header <php the_permalink(); ?> - permalink of the post <?php the_title(); ?> - title of the post <?php the_content(''); ?> - the actual content of the post <php get_footer(); ?> - invocation of the footer
By now you’ve probably gotten the hang of it, and in order not to bore you, we’ll continue with only brief descriptions of where you can find the necessary functionality in template files. The rest is pretty much self-explained through the titles of the tags.
This template file is used whenever the necessity comes to render a single blog post. It contains options regarding the comments of the post, and displaying the full post.
This is for displaying static pages. Static pages, unlike blog posts, don’t have a date, or a read more link, or any meta information. It’s like a stripped out version of the index.php file.
is responsible for displaying the comments, and footer.php displays the bottom of the page, or the footer.
Knowing the elaborate structure of a WordPress theme, you can use basic HTML and CSS to design or modify a theme to your liking.