The Basic Parts of a WordPress Theme
Language consists of words that are classified into different groupings depending on their function. The English language is divided into 8 parts commonly known as: nouns, pronouns, adjectives, verbs, adverbs, prepositions, conjunctions, and interjections. These words can be used in combination with one another to express a complete thought – a sentence. Other languages may have different classifications but generally, each language is comprised of several word classifications which when combined with each other express a specific thought.
We have been slowly laying the basic foundation to understanding WordPress these past few weeks. Last week, we learned common phrases that you hear in and around the WordPress community that you might not fully understand but have become familiar with because of common use. This week we shall be a bit more technical and try to introduce a little bit more of what goes on behind a WordPress theme, its basic parts, and how it is put together to function the way we normally see it.
A WordPress theme is quite similar to a sentence. It is a combination of several parts to express a visual representation of a design thought. Let’s take a look at these basic parts (not necessarily 8) to give us an idea of what they are and how they function.
A WordPress theme is comprised of as few or as many template files as you like. These templates are PHP (PHP: Hypertext Preprocessor) source files used to generate the pages requested by visitors and are output as HTML (Hypertext Markup Language). (source: codex.wordpress.org) Each of these template files can be configured to function according to a specific design.
WordPress Themes use a combination of template files, template tags, and CSS files to generate your WordPress site’s look. If you are currently a WordPress user (self-hosted or not) you can familiarize yourself by checking out the templates listed below in the backend admin panel of your site. You can look for them under Appearance>Theme>Editor. These may all seem Greek for now and and hard to understand but the goal for now is to simply observe how the codes are written in these templates. Just make sure you don’t edit them by mistake.
Below are the basic templates that you will find among the many other templates in your WordPress theme:
style.css
CSS (Cascading Style Sheets) is a language for defining the formatting used in a Web site. This includes things like colours, background images, typefaces (fonts), margins, and indentation.
The basic principle of CSS is to allow the designer to define a style (a list of formatting details like fonts, sizes, and colours) and then apply it to one or more portions of one or more HTML pages using a selector. To every CSS style definition there are two components: the selector, which defines which tags the style will be applied to, and the attributes, which specify what the style actually does.
CSS allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.
index.php
index.php is a universal template, it is what any page (home, archive, single post, etc) will use if no other template is available for it. The index file controls what the homepage looks like.
For the visual learners out there, a very helpful visual resource you can check out is this infographic Anatomy of a WordPress Theme made by Yoast. More on this next week!
Note: Many of the articles on this site include affiliate links that may earn us a commission if you decide to buy the recommended product.
