The weblog software, WordPress, is char­ac­ter­ized 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 re­quest­ing 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 lo­cal­iza­tion 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 in­di­vid­ual basic com­po­nents work together.

Basic elements of a WordPress theme

Static webpages are es­sen­tial­ly based on in­di­vid­ual 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. Con­di­tion­al tags are used if the content to be displayed is subject to certain con­di­tions. Template hook plugins can ad­di­tion­al­ly be in­te­grat­ed. Content delivery is managed through a mechanism, which is referred to in WordPress ter­mi­nol­o­gy as a loop.

Template files

The WordPress theme can be con­sid­ered as a kind of website blueprint, which covers different states. The dy­nam­i­cal­ly 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 dif­fer­ent­ly 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 func­tion­al 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 in­for­ma­tion like the name of the theme, a short de­scrip­tion, 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 de­liv­er­ing content, the software uses index.php. The structure of the index.php depends primarily on how much code is out­sourced 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 nav­i­ga­tion, whereas in more complex themes these elements are defined in ad­di­tion­al 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 de­ter­mined in the admin area in a shortened overview.
     
  • header.php: if header.php is used in WordPress, this template file usually contains essential in­for­ma­tion 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. Ad­di­tion­al­ly, the body tag is usually opened in the header. The theme’s visible header, including the nav­i­ga­tion, can be out­sourced in the header.php.
  • footer.php: footer.php serves a coun­ter­part 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 out­sources 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 in­for­ma­tion like the post’s date, the author, cat­e­gories, 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 in­di­vid­u­al­ly.
  • home.php: this template file offers the pos­si­bil­i­ty 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 optimized to display blog posts in chrono­log­i­cal order. In addition to dynamic content, many website operators provide specific content such as 'About me' sections or contact in­for­ma­tion as static webpages. WordPress page.php makes this possible by creating in­di­vid­ual pages that are in­de­pen­dent 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 in­cor­po­rate a WordPress search bar to give your visitors the option of searching your site for whatever in­for­ma­tion 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 cat­e­gories, keywords (tags), authors, and pub­li­ca­tion 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.
  • at­tach­ment.php: the template file at­tach­ment.php is used when website operators want to view ad­di­tion­al content such as graphics, PDFs, or media files in a single view.
  • image.php: a special version of at­tach­ment.php is image.php that lets you define a separate template file for single views of graphics. If there is no image.php, at­tach­ment.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 ter­mi­nol­o­gy) are used to link in­di­vid­ual com­po­nents 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 in­struc­tions as to which content should be included from the database. Template tags enable the blog software to create every webpage dy­nam­i­cal­ly when it’s being called up. The ad­van­tages 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 au­to­mat­i­cal­ly issued. 

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

While the bloginfo('name') function acts as a place­hold­er 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 in­di­vid­ual 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 in­te­grat­ed 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 above­men­tioned 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 au­to­mat­i­cal­ly carried out on all subpages that have access to include tags.

Template hooks

Template hooks (also known as 'action hooks') are in­ter­faces that connect themes with in­di­vid­ual weblog software functions or plugins. Most of these in­ter­faces 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 in­for­ma­tion can be embedded in the header, footer, or sidebar. De­vel­op­ers can ad­di­tion­al­ly integrate their own hooks into their themes.

Con­di­tion­al tags

Con­di­tion­al tags are PHP state­ments such as if, else, or while, which, in com­bi­na­tion with WordPress, makes it possible to display certain content if con­di­tions are met. This could be a welcome message for reg­is­tered 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 re­spon­si­ble for de­liv­er­ing content is known as a loop. It basically involves various WordPress functions that are connected by con­di­tion­al 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 pre­sent­ing 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 con­fig­ured 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.

Go to Main Menu