- WordPress Site Design – Vision
- WordPress Site Design – Domain & Hosting
- WordPress Site Design – CMS
- WordPress Site Design – CMS Installation
- WordPress Site Design – WordPress Install
- WordPress Site Design – Zenphoto Install
- WordPress Site Design – Piwik Install
- WordPress Site Design – WordPress Layout
- WordPress Site Design – WordPress Files
- WordPress Site Design – Functions and Loops
- WordPress Site Design – CSS File
- WordPress Site Design – Zenphoto Integration
- WordPress Site Design – Remaining Files
WordPress Theme design is extensive. It is also changing and evolving with each new version of WordPress. I am going to walk through one technique for creating a custom theme. Theme design is so large I am going to break it up into manageable sections. The first order of business is understanding the elements that comprise a WordPress theme. There is a file structure to a WordPress theme and then there is the Visual aspect of WordPress. They both go hand-in-hand, and I hope this post helps clear the confusion.
First let me say that most of the logic for my site, and what I know about WordPress theme design, I learned from the tutorial by Ian Stewart. His understanding and talent in the realm of theme creation and design is far beyond mine. If for some reason you are not happy with my tutorial, or need theme design explained in a different way, feel free to check out Ian’s tutorial on his site ThemeShaper.
Once again before we get started remember this tutorial is a simple theme. As you advanced and understand the elements you can rearrange everything on your site. This layout tutorial mimics my site’s design.
Study the image below. It represents the general layout of a Wordpress theme. Each rectangle represents a DIV that will hold certain code for the WordPress site. The image is divided into 3 sections by red lines. These three sections are the 3 files that will make up your WordPress page. In theory every page on a WordPress site consist of 3 files. The header, footer, and content specific page. These three all work together to present a single WordPress view. I know this is a little confusing, as I was very lost when I first started learning about this myself. To keep things simple, let’s break down each file in detail.
Note: The DIV’s are cascading to show how they lay on-top of one another. In practice you will not see the layering of the divs and all dimensions will be handled in your css file.
When the three files combine they create a single page of HTML like below. Do not copy this code. It is just an example to help you see how the page is made up in HTML. There are some differences in the actual files.
<div id="branding">Code for branding section goes here.</div><!--#branding-->
,div id="access">Code for the main menu goes here.</div><!--#access-->
<div id="content">Code for the specific page goes here.</div><!--#content-->
<div id="sidebar">Code for the sidebar goes here.</div><!--#sidebar-->
<div id="footer">Code for the footer goes here.</div><!--#footer-->
The first file, which holds the content above the first red line, is known as the “Header”. This file is adequately named header.php. Don’t worry about creating any files just yet, let’s focus on the concepts first. The header holds a couple sections that have unique purposes.
- Wrapper: this DIV is the main div that will constrain the main width and height of the site. It runs through all three files and holds everything short of the footer inside of it.
- Header: this is the header DIV, not the Header file. It holds the next 2 DIVS, Branding and Access.
- Branding: this DIV is where the Site title and caption will be inserted. It is appropriately named because it is the Branding of the WordPress site. For my site I replaced the Branding with a doodle of my name and my caption is: personal website of Daniel J. Eckes, Fresno, CA.
- Access: this DIV is the main menu that will be shown on all pages.
- Main: this DIV will hold the content and sidebar of the site. I am not 100% sure why it is in the header file, but I assume it is to help keep extra coding out of the next files.
The second file is the page file. In other words depending on what page of WordPress you are viewing different content will be displayed, and therefore coded, here. The Header and Footer are displayed on every page and they do not change. Another way to think of the Page file is the content that is inside the Main DIV. For starters this will be our index.php file. Take note of the two DIVs inside the page file.
- Content: this DIV will hold all content of the page, blog posts, photos, etc.
- Sidebar: this DIV will hold widgets that you specify in the WordPress Dashboard.
The last file is the Footer. It is hard to tell from my image but the footer file closes all the open DIVs from the previous files. The footer then contains the footer DIV that in most cases will have a simple text site map, copyright info, and links.
I hope this post helped give you a visual way to look at the code and structure that makes up a Wordpress site. I honestly suggest reading it again before moving on. Also take a look at Ian Stewart’s tutorial that I referenced earlier in the post. Like the old adage goes “Two heads are better than one”.