When considering a career in the web design industry, people usually kick off with HTML and CSS. Seemingly different, the anatomy of WordPress themes and HTML still have quite a few things in common, which makes HTML and CSS an ideal starting point for developers-to-be. If you’re just starting out and are wondering what it takes to build a WordPress theme, or you’re an experienced developer looking to brush up on the essential elements of a theme before developing your own framework, we’re sure you’ll find something useful in today’s post.
Unlike HTML where all the page elements are coded in a single file and separated into divs, all elements in WordPress themes are divided into different files. Each WordPress theme is essentially a folder with at least four template files, more specifically:
Each of these files control a specific part of the website; where header, sidebar, and footer remain pretty much the same throughout all the different pages. Of course, you can tweak the code so it determines what page the visitor is on and serve different content accordingly, but it’s more common for them to stay static.
The Backbone Of All WordPress Themes: index.php
index.php is the most important file in WordPress themes – it’s the file that determines what the homepage looks like. By default, it includes a loop that displays the most recent blog posts. The typical index.php file will look something like this:
< ?php get_header(); ?>
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>
The loop is probably the most powerful element of WordPress themes. It begins with a query that determines which posts to display, and ends with an endwhile PHP statement. Those two are the only required elements of the loop; everything between them is solely up to you, whether you want to display only the post titles, the excerpt or the entire content of the post, author, or even the date.
Static Elements Of WordPress Themes
Unlike index.php, most header.php, sidebar.php, and footer.php files are static and remain the same throughout the pages. header.php contains header code, navigation and HTML head code. In other words, things like the title of your website, logo, navigation, metadata, and so on. Developers usually place copyright information inside the footer, while sidebar oftentimes contains additional menus, widgets, ads, categories, and social media icons, among other things.
There are other background files that handle the behavior of WordPress themes, like comments.php, which can be overridden by plugins such as Disqus, functions.php for including custom PHP code, and the main style.css that contains the theme information and handles the overall look and feel of the theme.