By: Alex Morrison
Course: IMD410: Dynamic Web Applications
Instructor: Troy Bennett
Wordpress is quickly becoming one of the most widely used blogging platforms and is being used as a CMS for sites across the web as well. The Wordpress engine runs the same across the board, but skins and styles for Wordpress vary and everyone wants a unique and different look. To answer that need, Wordpress has the capability to have differently styled themes.
In this article I will be discussing the steps and best practices on how to build your own Wordpress theme. I’ll be covering the basic structure of a Wordpress system, how to start building your own theme, and testing your site.
Wordpress Structure - getting to know the new toy
Download a fresh installation of Wordpress from Wordpress.org. If you’re unfamiliar with installing wordpress using mySQL, then refer to the 5-min installation guide.
Wordpress is built using a web of PHP files, each getting pulled into a specified spot when called upon. The standard Wordpress directory is rarely edited and all styling is done within a Wordpress theme. A theme controls the layout and style, not the backend structure. Themes are located within /wp-content/themes.
For the purposes of this article, we’ll be taking the “default” theme and modifying it to suit the style you want. It’s important to know what pieces fit together, even though most styling is done within the style.css file. The default theme has the following files:
404.php – This is used when Wordpress cannot find a post or page that has been entered into the address bar.
Archive.php – This template is used when a query for category, author, or date occurs.
Comments.php – The comments template. This holds the code for the comment form and lost of comments (when present).
Footer.php – Holds the footer code.
Functions.php – this acts as a plugin, and is suggested to be used to define functions used in templates and set up a custom admin screen.
Header.php – Holds the header code.
/images – this directory holds any images you’d like to use within your theme.
Index.php – the main template for any page.
Page.php – used when a Page is queried.
Search.php – the search results template. Used when a search is performed.
Sidebar.php – holds the code for the sidebar. Useful when working with widgets.
Single.php – the single post template. Used when a single post is queried.
Style.css – Cascading style sheet applying all layout and styling to the theme.
It’s best practice to start out with the default theme provided with a fresh installation of Wordpress. This is perfectly legal and is recommended by the Wordpress documentation.
The Sandbox – something to play in
Before we start digging into styles, we need some content to test on and play with. We’re going to start by creating a sandbox post, which contains all of the core HTML elements that are commonly found within a blog post. A sandbox is useful because it ensures that you don’t forget any element that could be used in the future, after the site is designed. These elements are (but not limited to):
- Bold text
- Italic text
- Underlined text
- Links
- Blockquotes
- Headings
- Images
You can download a great Sandbox Post text file here. (Thanks to Lorelle VanFossen)
Also, make a couple of Pages with the same sandbox information.
Layout – putting stuff where you want it
Often one of the most frustrating parts of developing a Wordpress site is just figuring out where a snippet of code comes from. To prevent this, take a look at a few different elements on the page, and look at the various PHP files, identifying where an element comes from.
If you aren’t already, I highly recommend using Mozilla’s Firefox browser with the Firebug plugin. This plugin helps you identify how an element is getting styled and has bailed me out numerous times. Let’s go over a few key areas and what they might contain:
The Header
- Logo
- Name of Site / Blog
- Tagline
- Subscription, RSS, Social Networking Icons
- Search Box
Main Content Area
- Posts
- Pages
- Post meta data
- Tags
- Excerpt text (ex. Read More..)
- Category
- Comments
- Author
- Page / Article Navigation
Sidebar
- Info about site / blog
- Search
- Social Media Links
- Popular Articles
- Categories
- Recent News
- Blogroll (external links to other sites you like)
- Contact information
- An infinite number of widgets that can be added through plugins
The Comment Area
- The Comment Form
- List of comments
- Number of comments
- Author of comment
- The comment itself
- Comment meta data
Footer
- Copyright information
- Secondary Navigation
- Social Media Links
- Resources
- Sitemap
- Contact Info
- About blurb
Example wire-framed layout:
Styling – making it look fabulous
As most designers understand, the CSS file controls how things appear on the site. CSS is more than just background color and text. It controls, borders, margin, padding, and positioning, just to start.
Let’s open up our default style.css file.
- At the very top you’ll see details about the Theme in the form of comments. This MUST always be present. Go ahead and change these details to your own!
- Next you’ll see a Typography and Colors section. This spans from line 23 down to line 234. This section decides your background colors, text colors, font families, and font sizes. You’ll notice a few positioning styles in there as well, so beware for the future.
- The next section covers your positioning, display properties, spacing, and alignment of the various elements. It spans from line 238 down to 332.
- The Headers section styles all of your header tags (h1, h2, etc). This is from line 336 to 365.
- Lines 375 to 405 style your images. Notice that the styling structure is divided into different alignments.
- Lists are a small part of the actual layout, but take a large amount of styling. The lists section is from lines 409 to 477. It covers both your ordered and unordered lists, their respective style types, images, and spacing.
- The next section is from lines 481 to 529 and adheres to your form elements. This includes the search form and comment form.
- The Comments Section is different from the comments form section. This covers the comments, once they’re submitted, and are listed out below posts. This section is form lines 533 to 574.
- Lines 578 to 589 style your sidebar and sidebar form.
- Next you’ll see the Calendar section. The calendar is a pre-packaged widget with the Wordpress installation that appears on your sidebar. It shows what days posts have been published in the past. Lines 593 to 626 style this nifty feature.
- The next section is various tags and classes. These are rarely changed, but the noteworthy element is the blockquote element. Often ignored, but when styled, can create a cool addition to posts. This section spans from lines 630 to 677.
- The last section contains your captions that are included when an image is uploaded into a post and has a caption included. This is from lines 681 to 731.
The end of the CSS document also contains as little Haiku that the original author included. It’s cute.
Plugins – adding magic to the site
One of the last and most fun things to do is research, download, and install some plugins to the backend of the site. There are thousands out there in the Wordpress Plugin Directory and can greatly enhance your site. Be careful to not download too many however! Plugins usually run on JavaScript that will slow download time for your user.
Here’s a list of the most useful plug-ins I’ve used in sites I’ve developed:
1) Wordpress.com Stats – This tracks how many views your blog is getting.
2) Askimet – Blocks 99.9% of spam attacks in comment forms. This comes pre-installed with the Wordpress installation, but you’ll need to activate it.
3) All-In-One-SEO-Pack – This plug-in optimizes every post and page that’s published or updated for search engines. It also informs popular search engines like Google and Yahoo every time an update occurs or new post is published.
4) Contact Form 7 – I have found this to be the easiest plug-in to manage multiple contact forms throughout the site. It manages what appears on various forms, and how they’re emailed. It also supports spam filtering.
5) NextGen Gallery – My personal pick for managing photo galleries. You can manage multiple galleries easily through the admin panel and insert them into any post or page.
Conclusion – that’s a wrap!
When it comes to designing a Wordpress theme or working with Wordpress in general, it can be scary and daunting. Once you see that Wordpress is just a well-structured folder of PHP files styled with CSS, it gets easier. Always refer to the Wordpress.org documentation, support forums, and tutorials online for extra help.
To review:
1) Understand the Wordpress structure. Dig in, use Firebug, and see what files elements come from.
2) Build a post and page sandbox. This will help you see a wide array of HTML elements that could be used after the page is developed.
3) Style your site! Dig into the CSS and start making it look pretty. Search out other themes and see what other designers are doing for inspiration.
4) Add plugins. Spice up the site with free plugins found in the Wordpress directory.
Sources
- VanFossen, Lorelle. “Designing a Wordpress Theme From Scratch” Lorelle on Wordpress. 28 Sept. 2005. http://lorelle.wordpress.com/2005/09/28/designing-a-wordpress-theme-from-scratch/
- Wordpress.org. “Using Themes” Wordpress Codex. http://codex.wordpress.org/Working_with_WordPress
- Hoff, Brian. “Custom Wordpress Blog Design Checklist and Walkthrough” The Design Cubicle. 8 Nov. 2009 http://www.thedesigncubicle.com/2009/11/custom-wordpress-blog-design-checklist-and-walkthrough/
