Here at Pixafy, I’ve built a fair share of WordPress sites. I have learned over time that whether the site is a blog, a grid of images or even a one page site, once I understood the WordPress structure, I was able to customize WordPress to what fit my needs at the time. This understanding led to developing a few practices to make this process easier each time.
Basic Structure of a Theme
When inspecting a WordPress site in a browser, it may not be obvious, but WordPress breaks a site into pieces. For every theme, it might be a little different, but usually, there will always be a header.php, a footer.php, a sidebar.php, a loop.php and a loop-single.php. When I first delved into WordPress and couldn’t figure out where certain parts of a site were coming from, it helped to look at the WordPress Codex’s Template Hierarchy. The Template Hierarchy explains how WordPress by default reads through files, depending on what kind of content it is.
Header.php will be where I open my global divs that wrap around the entire site beneath the <head></head> tags and Footer.php is where I would close these divs before the ending html tags. In the case of creating a blog, index.php runs a loop to repeat each blog post with the same style.
*As far as stylesheets and JavaScript files, all external files can be called from the header.php as usual in their respective folders. However, WordPress comes with a default stylesheet that is not in a folder, and that’s the only time I don’t make an extra stylesheet in a folder; rather, I move my styles into that stylesheet.
*This tutorial is based on WordPress’ TwentyTen Theme. Most up to date themes now enqueue their stylesheets and scripts via functions.php. This practice should be followed for cleaner code that’s segregated with others of its kind. Take a look at a newer post of ours for reference, How to enqueue a custom stylesheet.
Cross-reference
When I first made WordPress sites, I would carve the site as HTML first, and considered the integration to WordPress a whole different stage that I didn’t need to worry about until the time came. What this did was force me to go back into my files and edit usually both my HTML structure and styles to accommodate WordPress. After learning the hard way, I developed my habit of setting up my files to carve, and making sure that WordPress was already installed at the same time. So while I still carve the site first, this enables me to cross reference structure and build my HTML files accordingly, taking advantage of classes and divs that were already there. If I’m working in a blank theme where all the styles are stripped, I also like to cross-reference WP’s Twenty Ten Theme Demo to get a more visual idea of what it is I’m looking at.
Naming Divs after WordPress Functionality
So as I cross-reference between my HTML and WordPress in the process of building, I’ve also gotten into the habit of naming some of my divs after WordPress functionality so I remember their purpose when it’s time to integrate. If there’s a div where a featured image will go or something that will appear with a custom field, I will name my divs after some of these WordPress features so it’s easier for me to remember what I’m doing with them when I integrate. I might also name some wrapper divs as “about-page” or “press-page” versus “blog-post” because I understand that a page and a post behave differently depending on the content.
Carving right into WP can help
There are cases that carving parts of a site will save more time if it’s just styled in WordPress itself. Such cases include the sidebar, with WordPress native widgets. There isn’t much sense to build an entire set of widgets with all fifty categories in the Category List widget in my HTML file. However, I do imitate WordPress’ sidebar structure in my HTML with maybe one or two categories rather than fifty, and write my styles to match the WordPress classes/IDs. This is intended so as I’m integrating, I can drop the styles into WordPress, and they will theoretically work fine for the sidebar because I used its precise structure. I also don’t carve an archives page, a category archives page etc. I will write the basic styles/structure and if it saves more time to complete it in WordPress, I will do so. Some WordPress pages/pieces are difficult to re-create unless they’re being styled directly.
In repeating some of these habits, I soon memorized where some of the core files are, how they work, and have saved time in creating sites overall.
Do you have techniques or shortcuts that help you with WordPress template creation? Let us know in the comments!
