Building a WordPress theme [Infografik]

Check out my infographic on Building a WordPress Theme:

Embed this infographic on your website:

For reference, you can also find the contents of the infographic as text here:


Global file showing the header and navigation. Also contains the HTML header code ().

The loop

Your website’s content is displayed through individual template files; the system is called “the loop”.


The display of sidebars is set in this file. Multiple sidebars can be created in functions.php. The contents of sidebars are called widgets and are edited in the WordPress backend.


Contains the global footer and the HTML closing tags ().

WordPress themes consist of a folder of template files. Each of these files is responsible for a specific area. Static parts that are the same on all pages are controlled in the header, sidebar and footer files.
However, these files can also determine on which page they are displayed and display different content. This allows you to display different navigation on posts than on pages; Usually, however, these parts of a website look the same on all pages.

Home page – index.php

The index file determines the appearance of the homepage. It usually shows the latest blog posts and a link at the bottom to view more posts.

Alternatively, any page can be specified in the WordPress backend under Settings > Reading, which is then displayed as the start page. The regular blog posts created by index.php can also be modified there.

Posts – single.php

Individual posts are represented by this file. It contains a loop that loads and displays exactly one post from the database.

You can specify here whether and which sidebars should be displayed; these may differ from the sidebars elsewhere.

Pages – page.php

This file controls how individual pages look. You can show and hide sidebars and other elements for pages only.

WordPress also allows you to create different page templates. To do this, copy the page.php file, give it any name and add this code at the beginning of the file:

* Template Name. DeinVorlagenName

Archives – archive.php, category.php, tag.php

You can influence the look of the archives with different template files. If there is no archive template, the archives look as specified in index.php.
You can customize this by creating a file called archive.php. If you create a file with the name category.php, it will be used for the category archives, tag.php is responsible for tag archives.

The loop

The WordPress loop is the most important part of your theme. Each loop starts and ends with a query about which posts or pages to show
with the output of the results of the query. Everything in between can be changed by you.

You can customize the output of titles, content, metadata, custom fields, and comments in the loop. Each item is output for each post or page until all results are processed.

You can also have multiple loops in one page. For example, in single.php you can display the content of a single post, the title and post images of similar posts below it.

Querying posts or pages
Start of the loop (Everything between here and the endwhile is executed until all posts have had their turn)
the_title (outputs the title of the post/page)
the_excerpt (outputs the excerpt of the post/page)
the_content (outputs the content of the post/page)
the_category (returns the categories of the post/page)
the_author (gives the author)
the_date (prints the date)
other tags (there are other template tags that you can use in the loop)
end while (Restart the loop or stop
him when all contributions have been spent)


In order for a WordPress theme to work, a few important files are necessary in the background. You can change these as you like and they have a huge impact on the look and function of your site.


This file controls how comments are rendered. Plugins can completely overwrite this file to enable their own commenting system.


This is the main CSS file for your theme. It contains text at the beginning that specifies the theme name, the author of the theme, and the URL of the author’s website.


Here you can add your own PHP code to extend and customize WordPress. Multiple sidebars are often configured, the number of characters in the excerpt changed, or custom functions added to the WordPress backend.

The extras

Plugins, custom fields and widgets allow you to extend the functionality of WordPress even further.


A friendly and active community has created a variety of plugins for you to add to your theme.

Custom Fields

With Custom Fields you can request additional data in the WordPress backend when you create a post. You can then display this data in your theme.


Widgets are small modules that you add to your sidebars. For example, search forms, similar posts and ad blocks.

WordPress - (C) TheDigitalArtist CC0 via - Previous post Care in the blog – news behind the scenes
Next post Behind the Scenes of the Plugin Directory –