What you should know about WordPress themes

Structure and possibilities of a WordPress theme

Knowing the structure of a WordPress theme is an important part of the front-end development process. A WordPress theme is a set of files that interact with each other to ensure the design and functionality of a WordPress website. This makes the theme a powerful feature in website development. Combined with WordPress’ powerful platform architecture, themes allow for unlimited customization.

WordPress lists four main advantages of themes:

  1. Themes separate the appearance from the system files or actual content, allowing you to change the visual appearance with minimal effort.
  2. Themes provide options to enable or disable other features built into the themes. The designers of a theme often enable the integration of galleries or sliders, for example.
  3. Themes usually have settings to quickly and easily change the design and layout of the website.
  4. Thanks to well-developed themes, WordPress admins don’t need any knowledge of CSS, HMTL or PHP when they want to make changes to the website.

Learn more about the core components of WordPress

The default WordPress installation consists of core components divided into a wp-config.php file, a wp-content directory and a MySQL database. Themes, plugins and all uploaded assets are stored in the wp-content folder. The themes are located in the appropriately named “themes” directory.

If you choose to locate and install a WordPress theme from the dashboard, it will be transferred as a ZIP file and then unzipped in the Themes folder. Each theme has a unique folder name, but there is a consistent naming convention for the files it contains.

All WordPress theme structure documentation can be found on the WordPress.org Theme Development page.

If you are familiar with PHP and want to customize or develop a new theme or WordPress child theme, I recommend that you familiarize yourself with WordPress’ PHP coding standards. Unfortunately, PHP also allows for sloppy programming that can wreak havoc when attempting to troubleshoot your WordPress theme.

WordPress Theme Files

Believe it or not, WordPress only requires two files for a theme. The first file is a style.css file that defines the design of the WordPress theme. WordPress reads the theme description through a series of comments that launches the style sheet:

/ *
Theme Name: Mein Themenname
Theme URI: http://www.dknewmedia.com/
Description: Das ist ein benutzerdefiniertes Theme, das ich entwickelt habe
Author: DK New Media
Author URI: http://www.dknewmedia.com/
Version: 1.0.0
License: GNU General Public License v2 oder höher
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: godaddy, theme
Text Domain: mytheme
* /

The second file is the index.php file, which contains your loop query. It displays the content published in WordPress.

The WordPress theme structure

WordPress theme files do not contain all elements of your theme. If you look at any web page, you will see that the basic sections of an ordinary page are as follows:

  1. Content – The content that you create, publish, or archive specifically for this site.
  2. header.php – This file contains design templates for the top of each of your pages, posts, or archives.
  3. footer.php – This file contains design specifications for the footer area of ​​any of your pages, posts, or archives.
  4. sidebar.php – This file contains design specifications for the sidebar on your pages, posts or archive.
  5. searchform.php – The search form used in your theme.
  6. {part} .php – This can be any custom element used in your theme e.g. B. a call to action or a secondary sidebar.

WordPress Website – Template Pages

Although WordPress started out as a blogging platform, writing blog articles isn’t the only way you can use WordPress. If you don’t want to use WordPress for blogging, the following template files can be customized for specific themes:

  1. 404.php – A draft in case your page or content isn’t found, also known as a 404 status error.
  2. front-page.php – This file is used when you set a static page in your WordPress > Settings > Reading Settings.
  3. home.php – The default theme for your homepage.
  4. page.php – The default page design.
  5. page- {slug} .php – Applies this template design to the page with the matching URL slug.
  6. search.php – The default theme for search results pages.

WordPress Blog Theme – Template Pages

If you also want to blog, you have many more template design options to develop:

  1. archive.php – The default theme for displaying posts by category, author, or date. It applies if no other templates have been created.
  2. archive- {post-type} .php – If you want to implement Custom Post Types, you can customize the design for the archive list. You can find more information about Post Types here
  3. attachment.php – The default theme to display an attachment uploaded to the media library (any media except images).
  4. author.php – The default theme for an author.
  5. category.php – The default theme for displaying posts that belong to a category.
  6. comments.php – The default comment template used throughout the blog.
  7. date.php – The default theme for displaying posts by date when used in the permalink structure.
  8. image.php – The default theme for displaying an image uploaded to the media library.
  9. single.php – The default theme for a single post.
  10. single- {post-type} .php – If you implement custom post types, you can customize the design for the single version of a post type.
  11. tag.php – The default theme for displaying an archive of posts by a specific tag.
  12. taxonomy.php – The default theme for displaying an archive of posts by a custom taxonomy.

Pro tip: Don’t forget to include a screenshot of your WordPress theme. This screenshot is displayed in the theme browser when the user goes to Themes > Themes in the WordPress dashboard. The image should be in PNG format and be 880 pixels high and 660 pixels wide.

WordPress Child Theme

One of the lesser-known ways of WordPress theme structure is that you can customize themes by creating a WordPress child theme that takes the main theme as a whole, but tweaks certain aspects. We have assisted many clients who hired an agency to develop a custom theme based on a licensed, purchased theme. The agency usually immediately started working on the purchased theme in order to customize it for the customer. However, editing a licensed WordPress theme is a terrible practice!

You can instead just create a WordPress child theme by adding another theme directory and adding a reference to the parent theme to the index.php and style.css file:

/ *
Theme Name: Mein WordPress Child Theme Name
Theme URI: http://www.dknewmedia.com/
Description: Dies ist das benutzerdefinierte Child Theme, das ich entwickelt habe
Author: DK New Media
Author URI: http://www.dknewmedia.com/
Version: 1.0.0
Template: Name des Haupt-Theme-Verzeichnisses
Lizense: GNU General Public License v2 oder höher
Lizense URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: godaddy, childtheme
Textdomain: mychildtheme
* /

When you create a WordPress child theme, all you have to do is place the parent theme files you want to customize into your child theme directory. If you never edit the parent theme, you can update it when the author releases a new version. This often happens in response to WordPress changes, security issues, or bug fixes.

Additional files and folders in the structure of a WordPress theme

As long as you create files that don’t conflict with the reserved filenames above, you can add as many subdirectories and files as you like. A common example is adding an alternative page template to the WordPress theme structure. Creating a page template is easy – just add a uniquely named PHP file with the following comments in the header:

<? php / * Template Name: Eindeutiger Vorlagenname * / ?>

Now you can apply this page template to the page you created using the editing options.

Theme developers also add other subdirectories to their theme, including js (for scripts) and images specific to your theme. Advanced theme developers often use other directories for additional CSS, theme design frameworks, and even language subdirectories when translating the theme. WordPress also supports right-to-left languages ​​with an rtl.css file at the root of the theme.

There are thousands of free WordPress themes and paid themes. You can find many of these in the WordPress.org Theme Directory and in GoDaddy’s list of free WordPress themes for managed WordPress customers. With the tips listed here, you can adapt it exactly to your needs.

Translated from the English by Wolf-Dieter Fiege

Photo credit: Photo by Ricardo Gomez Angel on Unsplash