WordPress themes: elements and structure

The weblog software, WordPress, is characterised by the fact that it can separate design and program core aspects. These themes enable you to adjust how content is displayed in the front end without actually changing the program itself. WordPress themes basically provide a source code that instructs how content saved on the server should be retrieved and compiled to create a dynamic web page that is then delivered to the requesting web browser. Themes offer website operators the freedom to develop designs and layouts of a WordPress site. The basic structure of a WordPress theme is made up of various PHP source files (known as template files), stylesheets, and localisation data as well as optional JavaScript files and graphics. We reveal which WordPress theme elements you should be familiar with, which functions they fulfil, and how the individual basic components work together.

Basic elements of a WordPress theme

Static webpages are essentially based on individual HTML documents that contain the entire content as well as JavaScript elements and CSS embedding. A WordPress theme, on the other hand, is made up of several template files. These are connected with include tags and, with the help of template tags, they describe how content from the database on the server should be embedded in a webpage and displayed in the web browser. Conditional tags are used if the content to be displayed is subject to certain conditions. Template hook plugins can additionally be integrated. Content delivery is managed through a mechanism, which is referred to in WordPress terminology as a loop.

Template files

The WordPress theme can be considered as a kind of website blueprint, which covers different states. The dynamically generated webpage, which is sent to the browser, is put together from a set of basic elements specially tailored to the request. These are displayed differently depending on which page the visitor accesses, be it the overview page, an article, or a comment. These basic elements are known as template files. This involves PHP source files, which contain a mix of HTML, PHP code, and template tags, and fulfil precisely-defined tasks.

A WordPress theme is basically functional if it contains the template files index.php and style.css. Generally a variety of different template files can be found in a WordPress theme, which can represent various kinds of content and therefore make the most of the blog’s range of functions. The following list shows the basic template files, which can be found in almost every WordPress theme:

  • style.css: this involves one of the two mandatory elements of WordPress themes. The template files contain header information like the name of the theme, a short description, the name of the author, the version number, the license as well as a link to the license. Style.css acts as the main stylesheet of the WordPress website, and offers space for the CSS code of your chosen theme.
  • index.php: the second mandatory element of every WordPress theme is the index.php. This generally acts as an article overview and can be used as a homepage. Index.php is handy as a last fallback file. In other words: if no specific template file is created for delivering content, the software uses index.php. The structure of the index.php depends primarily on how much code is outsourced to other template files. In simple themes index.php often contains the bulk of the entire source code including the HTML root directory, header, footer, sidebar, and navigation, whereas in more complex themes these elements are defined in additional template files such as header.php, footer.php, or sidebar.php. This is so that the index.php can merely fulfil the function of the basic structure. Index.php usually displays a number of articles determined in the admin area in a shortened overview.
     
  • header.php: if header.php is used in WordPress, this template file usually contains essential information about a website, such as the doctype, the opening HTML tag as well as the head element (including meta tags), links to stylesheets, and scripts. Additionally, the body tag is usually opened in the header. The theme’s visible header, including the navigation, can be outsourced in the header.php.
  • footer.php: footer.php serves a counterpart for the header.php. Here is where the visible footer section of the website is located. In the footer.php, both the body tag and the HTML tag are closed.
  • sidebar.php: The WordPress sidebar.php outsources sidebar content. This is where you enter the code, either directly or using specific WordPress widgets, which can be called up via the dynamic_sidebar function. An advantage of this procedure is that the sidebar content can be managed via the WordPress admin area.
  • content.php: posts in the blog overview usually contain a linked title, a preview image, a teaser, or an abridged version of the article including the 'Read more' link. This content may be embedded using content.php. The same applies to meta information like the post’s date, the author, categories, or keywords (tags).
  • single.php: while index.php offers an article overview, the WordPress single.php is used when a user wants to access articles individually.
  • home.php: this template file offers the possibility of creating a separate homepage for the weblog. If you forgo a structure with home.php, your website (based on index.php) will then show an overview of the most recent posts as a homepage.
  • page.php: WordPress themes are optimised to display blog posts in chronological order. In addition to dynamic content, many website operators provide specific content such as 'About me' sections or contact information as static webpages. WordPress page.php makes this possible by creating individual pages that are independent from the layout and design of other template files, such as index.php or single.php.
  • 404.php: if you would like to create a 404 error page for your WordPress blog, you can use the template file of the same name. It’s possible to incorporate a WordPress search bar to give your visitors the option of searching your site for whatever information they need.
     
  • search.php: the way in which search results are displayed can be defined in WordPress using search.php.
     
  • archive.php, category.php, tag.php, author.php, date.php: in addition to the search function, WordPress offers a number of template files, which can be used to arrange blog posts according to certain search criteria. Possible filters include categories, keywords (tags), authors, and publication dates. How the content is displayed with WordPress is all down to category.php, tag.php, author.php, or date.php. If these specific template files are missing, the blog software relies on the file, archive.php.
  • comments.php: if you want to allow your readers to leave comments, you need a separate template file, which contains the comment form. You can define this in WordPress with comments.php.
  • attachment.php: the template file attachment.php is used when website operators want to view additional content such as graphics, PDFs, or media files in a single view.
  • image.php: a special version of attachment.php is image.php that lets you define a separate template file for single views of graphics. If there is no image.php, attachment.php is used in its place.
  •  rtl.css: if your WordPress theme is to support languages that are written from right to left (i.e. Arabic or Hebrew), the stylesheet rtl.css is also needed.

Functions within template files (which are referred to as template tags in WordPress terminology) are used to link individual components of a WordPress site together and to load content from databases onto the server.

Template tags

Template tags are functions that are used within a template file in order to retrieve content from the database. While content is stored directly in the HTML source text when it comes to static websites, WordPress templates only contain instructions as to which content should be included from the database. Template tags enable the blog software to create every webpage dynamically when it’s being called up. The advantages of website concepts like this one are shown in the following example:

In general, an online project has a name that is displayed on every subpage of the project. In order to integrate this into any template file, this template tag is used:

bloginfo('name')

This tag is useful when you want a website title to be automatically issued. 

<title><?php bloginfo('name'); ?> |<?php wp_title(); ?></title>

While the bloginfo('name') function acts as a placeholder for the name of the site, wp_title() issues the title of the current subpage. Which content should actually be issued when a site is called up, is gathered by the database on the server. The software then creates a title according to the following pattern:

Name of blog | Title of subpage

Regarding static websites, you have to enter the page title in the actual text of each HTML page of your web project:

<title>Name of blog | Title of subpage</title>

But what happens if you want to change the name of your blog? For a static website project, you have to open every individual subpage in Editor and adjust it manually. For a dynamic website, it’s a lot easier: changes that affect many pages can be made at a single location in the database, since they are stored there and can be loaded into every webpage using template tags.

Following the same pattern, titles, post content, and metadata are loaded in the provided template files:

the_title() 
the_content()
the_author() 
the_time()
the_category() 
the_tags()

You can find an overview of all template tags in Codex on WordPress.org.

Include tags

A special variant of WordPress template tags are include tags that are used within a theme to load template files such as header.php, footer.php, or sidebar.php. Include tags are WordPress internal functions that are integrated in basic template files, like index.php, single.php, or a page.php like this:

get_header()
get_footer()
get_sidebar()

This also supports the abovementioned advantage: if the code is loaded for the website’s header, footer, and sidebar from specially designed template files, changes made to these three template files are automatically carried out on all subpages that have access to include tags.

Template hooks

Template hooks (also known as 'action hooks') are interfaces that connect themes with individual weblog software functions or plugins. Most of these interfaces are already available in the WordPress core. This is how a theme developer or a user can specify an action before the output starts or after a database request is completed. For instance, specific information can be embedded in the header, footer, or sidebar. Developers can additionally integrate their own hooks into their themes.

Conditional tags

Conditional tags are PHP statements such as if, else, or while, which, in combination with WordPress, makes it possible to display certain content if conditions are met. This could be a welcome message for registered users, for example:

if ( is_user_logged_in() ):
    echo 'Welcome, registered user!';
else:
    echo 'Welcome, visitor!';
endif;

The Loop

The mechanism within the WordPress software responsible for delivering content is known as a loop. It basically involves various WordPress functions that are connected by conditional tags. The following example shows the basic structure of a WordPress loop:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry">
        <?php the_excerpt(); ?>
    </div>
<?php endwhile; endif; ?>

The code section if (have_post()) in line 1 instructs WordPress to check whether blog posts are present. If blog posts are found in the database, the code section while (have_posts()) : the_post()  makes the software perform the following functions in the loop, until have_posts() is no longer true – in order words, until no most posts are left.

The loop therefore includes all the features up to the PHP statement endwhile in line 6 – in this example, the_title(), which is used to display the article title, and the function the_excerpt(), which instructs the software to load the post’s excerpt from the database. When it comes to presenting content, the article title is issued in h2 heading format. The article preview is put out within a div box with the CSS class name, entry.

On the homepage of a WordPress blog, this kind of simple loop means that the title and text preview of posts following one another are shown starting with the most recent content. The number of displayed posts can be configured in the admin area. It’s usual for there to be more complex WordPress loops that contain links to single views of posts as well as various metadata, such as author, date, category, and tags.

Was this article helpful?