A Simple WordPress Theme In Action
By Steph Skardal · Tuesday, February 22, 2011
I’m a big fan of WordPress. And I’m a big fan of building WordPress themes from the ground up. Why am I a big fan of building them from the ground up? Because...
- It's very easy to setup and build if you plan to move to utilize WordPress's blog architecture for your site, but just have a set of static pages initially.
- It allows you to incrementally add elements to your theme from starting from the ground up, rather than cutting out elements from a complex theme.
- It allows you to leave out features that you don’t need (search, comments, archives, listing of aticles), but still take advantage of the WordPress plugin community and core functionality.
- The learning curve of WordPress APIs and terminology can be complicated. It's nice to start simple and build up.
Here are some screenshots from my simple WordPress theme in action, a site that contains several static pages.
The template is comprised of several files:
|header.php||Includes doctype, header html, and global stylesheets included here. wp_head() is called in the header, which will call any executables tied to the header hook using WordPress’s hook API. wp_list_pages() is also called, which is WordPress’s core method for listing pages.|
|index.php||Calls get_header() and get_footer(), WordPress's core methods for displaying the header and footer. This also contains static content for the homepage for now (text and images).|
|page.php||Calls get_header() and get_footer(). Uses The Loop, or WordPress's core functionality for display individual posts or pages to display the page content to render the single page static content.|
|404.php||Calls get_header() and get_footer(). This is similar to the index page as it contains a bit of static text and an image and is displayed for any pages not found.|
Files that are more traditionally seen in WordPress templates excluded from this template are the sidebar.php, archive.php, archives.php, single.php, search.php, and searchform.php. I plan to add some of these later as the website grows to include blog content, but these templates are unnecessary for now.
Below are a couple snapshots of the shared elements between pages.
|The header (red) and footer (blue) are shared between the page.php and index.php templates shown here.|
You can see the site in the wild here.
Update: Since this article was published, the website shown here has been updated to include a "blog" page, which is one more page that uses the exec-php plugin to list blog articles.