A while ago, we introduced to you the concept of creating a WordPress theme from HTML. We split the tutorial into two parts and today we are all about fleshing out the two tutorials, so feel free to regard this post as the third serving in the post series. My objective is to take apart the WordPress theme to give you a clear picture of how it (the theme) works.
This post assumes you have a working knowledge of HTML and CSS. I will go ahead and declare that having HTML and CSS skills is a prerequisite in designing WordPress themes. One more thing, this post will stay clear of big words and difficult concepts – it will be easy to comprehend, so be ready to have fun and learn.
A Little HTML Priming
Every HTML web page is split into different parts using the <div> tag. For instance, you can break the body (<body>) of your website into several sections such as navigation, header, main content, sidebar and footer amongst others.
Once you have your web page in sections, you can order (or arrange) the sections as you wish using CSS. This process is known as styling, and it involves adding other style elements such as color, size, borders, special effects etc. Such is the power of CSS, which – by the way – is short for Cascading Style Sheets. When you put your HTMl and CSS files together and throw in a couple of images, you end up with a complete website.
Things are not very different with WordPress themes. As we saw in part 1 of How To Create A WordPress Theme from HTML, WordPress themes are split into different files. If you cannot spot some similarity at this point, allow me to explain.
Static HTML web pages are split into divisions (what we called sections earlier on) using <div> tags (or tables if you’re really old school). On the other hand, WordPress themes are split into different php files, which are then put back together using template tags.
Therefore, instead of having all body elements (header, main content, sidebar, footer etc) living in a single file (as is the case with static HTML), each of the body elements (in WordPress themes) lives in a separate files.
So, the header will live in header.php, the sidebar will find home in sidebar.php, the main content will live in index.php, or single.php (if it’s a post) or page.php (if it’s a page). The footer section will live in footer.php and so on.
Are you following? Check out the illustration below:
From our illustration above, <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_header(); ?> are called template tags. Their work is to fetch header.php, sidebar.php and footer.php in that order from your theme directory, and display the content in your index.php, thus completing the web page.
Don’t let the .php extension scare you, the content inside php files is just HTML code that you’re familiar with. For instance, your header.php can contain typical HTML list navigation. Similarly, you can put typical HTML code in the footer.php, sidebar.php and index.php.
You can also place the loop.php function in your index.php (or anywhere you fancy) to display your blog posts, but I should slow down and get back to the anatomy of WordPress themes. I have mentioned a thing or two about the loop in part 2 of how to create a WordPress theme from HTML. and we will talk about it (the loop) and other functions in the future.
A basic WordPress theme is comprised of at least four template files namely:
Let’s see what goes into each of these magical files:
Index.php Template File
This is the main file without which you don’t have a working WordPress theme. It is the first (or default) file that loads when you visit a WordPress website. Consider it the equivalent of index.html.
A typical index.php in WordPress themes will look like this:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
You can add the loop between <?php get_header(); /> and <?php get_sidebar(); ?> to display blog posts on the homepage (index.php) as shown below:
<?php get_header(); ?> <div class="content"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <div class="entry clear"> <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div><!--end entry--> <div class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--> <?php else : ?> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
You can learn more about this in part 1 of How To Create A WordPress Theme from HTML.
Header.php Template File
This template files contains your header code, navigation and HTML head code. Basically, header.php stores everything you want to show at the top of your website. You know, things like the title of your website and stuff like that.
You also link to your CSS stylesheet in the header.php. Here is a basic example of header.php:
<html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body> <div class="header"> <p>This is header section. Put your logo and other details here.</p> </div>
Sidebar.php Template File
Sidebar.php contains everything you need to appear on your sidebar(s). The sidebar contains additional menus, widgets, categories, social media icons, custom content, HTML code such as adverts etc.
Sidebar.php can contain pure HTML markup or php function calls depending on your needs. As such, a basic sidebar.php might look like:
<div class="sidebar"> Put your custom content or HTML code here. </div>
Footer.php Template File
What do you think goes into footer.php? You can put your copyright info here, additional menus, links, social media icons – anything you want! Would you like to see how a basic footer.php looks like? Here:
<footer class="footer"> Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be. </footer> </body> </html>
Notice the </body> and </html> closing tags in the footer.php? Can you guess why they must be included in the footer.php? Similarly, can you guess why the <html> and <body> opening tags are included in the header.php? Let us know your guesses in the comment section at the end of this post 😉
The four template files we just covered above make up a very basic WordPress theme. There are many other template files; there is a template file for every element you see on a WordPress theme be it comments, search results and 404 error pages just to mention a few.
To fully understand the anatomy of a WordPress theme, you need to familiarize yourself with different template files. You can browse all usable template tiles at WordPress.
Then we have template tags, which WordPress uses to fetch template files from the theme directory. You can learn more about template tags, and the role they play at WordPress.
A WordPress theme consists of the following anatomical elements:
- Template files such as index.php, header.php, search.php, category.php etc
- Template tags such as <?php get_header(); ?>, <?php get_sidebar(); ?> etc
- Images and other media files
And here is an illustration that summarizes the anatomy of a WordPress theme:
- WordPress Theme – The Anatomy, An Infographic – Yoast
- An Introduction to WordPress Theme Anatomy for Beginners – by Tom Ewer for ManageWP
- Anatomy of a Theme – WordPress Codex
Every WordPress theme you see on the web uses the same anatomical structure (even our popular Total WordPress Theme), which you can customize to meet your needs. Once you wrap your head around the basics of WordPress theme development, there is no limit to what you can do with/to WordPress themes.
Image Credits: WPTuts+ & Huasonic