WordPress Theme Design

By Tessa Blakeley Silver
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started as a WordPress Theme Designer

About this book

This title will take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build a custom WordPress theme. From development tools and setting up your WordPress sandbox, through design tips and suggestions, to setting up your theme's template structure, coding markup, testing and debugging, to taking it live it reviews the best practices. The last three chapters are dedicated to additional tips, tricks and various cookbook recipes for adding popular site enhancements to your WordPress theme designs using third-party plugins.

Whether you're working with a pre-existing theme or creating a new one from the ground up, WordPress Theme Design will give you the know-how to understand how themes work within the WordPress blog system, enabling you to take full control over your site's design and branding.

Publication date:
May 2008
Publisher
Packt
Pages
224
ISBN
9781847193094

 

Chapter 1. Getting Started as a WordPress Theme Designer

Welcome to WordPress theme design! This title is intended to take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. WordPress was originally, and is foremost, a blog system. Throughout the majority of this book's chapters—for simplicity's sake—I'll be referring to it as a blog or blog system. But don't be fooled; since its inception, WordPress has evolved way beyond mere blogging capabilities and has many standard features that are expandable with plug-ins and widgets, which make it comparable to a full CMS(Content Management System).

In these upcoming chapters, we'll walk through all the necessary steps required to aid, enhance, and speed your WordPress theme design process. From design tips and suggestions to packaging up the final theme, we'll review the best practices for a range of topics: designing a great theme, rapid theme development, coding markup, testing, debugging, and taking it live.

The last three chapters are dedicated to additional tips, tricks, and various cookbook recipes for adding popular site enhancements to your WordPress theme designs using third-party plug-ins, as well as creating your own custom plug-ins.

WordPress Perks

As you're interested in generating custom themes for WordPress, you'll be very happy to know (especially all you web standards evangelists), that WordPress really does separate content from design.

You may already know from painful experience that many CMS and blog systems end up publishing their content pre-wrapped in (sometimes large) chunks of layout markup (sometimes using table markup), peppered with all sorts of pre-determined selector id and class names.

You usually have to do a fair amount of 'sleuthing' to figure out what these id and classes are, so that you can create custom CSS rules for them. This is very time consuming.

The good news is, WordPress only publishes two things:

  • The site's textual content—the text you enter into the post and the page Administration Panels.

  • Supplemental site content wrapped in list tags—<li> and</li>—which usually links to the posts and pages you've entered and the meta information for those items.

That's it! The list tags don't even have an ordered or unordered defining tag around them. WordPress leaves that up to you. You decide how everything published via WordPress is styled and displayed.

The culmination of all those styling and display decisions along with special WordPress template tags, which pull your site's content into design, are what your WordPress theme consists of.

 

WordPress Perks


As you're interested in generating custom themes for WordPress, you'll be very happy to know (especially all you web standards evangelists), that WordPress really does separate content from design.

You may already know from painful experience that many CMS and blog systems end up publishing their content pre-wrapped in (sometimes large) chunks of layout markup (sometimes using table markup), peppered with all sorts of pre-determined selector id and class names.

You usually have to do a fair amount of 'sleuthing' to figure out what these id and classes are, so that you can create custom CSS rules for them. This is very time consuming.

The good news is, WordPress only publishes two things:

  • The site's textual content—the text you enter into the post and the page Administration Panels.

  • Supplemental site content wrapped in list tags—<li> and</li>—which usually links to the posts and pages you've entered and the meta information for those items.

That's it! The list tags don't even have an ordered or unordered defining tag around them. WordPress leaves that up to you. You decide how everything published via WordPress is styled and displayed.

The culmination of all those styling and display decisions along with special WordPress template tags, which pull your site's content into design, are what your WordPress theme consists of.

 

Does a WordPress Site Have to Be a Blog?


In a nutshell, even before the release of themes in WordPress 2, WordPress has been capable of managing static pages and sub-pages since version 1.5. Static pages are different from blog posts in that they aren't constrained by the chronology of posts. This means you can manage a wide variety of content with pages and their sub-pages.

WordPress also has a great community of developers supporting it with an ever-growing library of plug-ins. Using plug-ins, you can expand the capabilities of your server-installed WordPress site to include infinite possibilities like event calendars, image galleries, side bar widgets, and even shopping carts. For just about anything you can think of, you can probably find a WordPress plug-in to help you out.

By considering how you want to manage content via WordPress, what kind of additional plug-ins you might employ, and how your theme displays all that content, you can easily create a site that is completely unique and original in concept as well as design.

Again, WordPress was built to be a blog system, and it has some great blog post and category tools. But, if you want to use it to manage a brochure-style site, or have a particular third-party plug-in to be the main feature of your site, and downplay or even remove the blog, that's fine too! You'll just tweak your theme's template files to display your content the way you prefer (which is something you'll be very good at after reading this book).

 

Pick a Theme or Design Your Own?


I approach theme design from two angles. The first is Simplicity; sometimes it suits the client and/or the site to go as bare-bones as possible. In that case, it's quick and easy to take a very basic, pre-made theme and modify it.

The second is Unique and Beautiful. Occasionally, the site's theme needs to be created from scratch so that everything displayed caters to the specific kind of content the site offers. This ensures that the site is something eye-catching, which no-one else will have. This is often the best route when custom branding is a priority or you just want to show off your 'Hey, I'm hot-stuff' kind of design skills.

There are many benefits to using or tweaking pre-made themes. First, you save a lot of time getting your site up with a nice theme design. Second, you don't need to know as much about CSS, XHTML, or PHP. This means that with a little web surfing, you can have your WordPress site up-and-running with a stylish look in no time at all.

Drawbacks to Using a Pre-Made Theme

The drawback to using a pre-made theme is that it may not save you as much time as you would hope for. You may realize, even with the new header text and graphic, several other sites may have downloaded and/or purchased it for themselves and you don't stand apart enough.

Perhaps, your site needs a special third-party plug-in for a specific type of content; it might not look quite right without a lot of tweaking. And while we're discussing tweaking, I find that every CSS designer is different and sets up its theme's template files and style sheets accordingly; while it makes perfect sense to them, it can be confusing and time-consuming to work through.

Your approach may have started out as Simplicity, but then for one reason or another, you find yourself having to dig deeper and deeper through the theme, and pretty soon it doesn't feel like quick tweaking anymore. Sometimes you realize—for simplicity's sake (no pun intended)—it would have been a whole lot quicker to start from scratch.

Before trying to cut corners with a pre-existing theme, make sure your project really is as simple as it claims to be. Once you find a theme, check that you are allowed to tweak and customize it (such as an open-source or creative commons license or royalty free purchase from a template site), and that you have a look at the style sheet and template files. Make sure the theme's assets seem logical and make sense to you.

 

This Book's Approach


The approach of this book is going to take you through the Unique and Beautiful route (or Unique and Awesome, whatever your design aesthetics call for) with the idea that once you know how to create a theme from scratch, you'll be more apt at understanding what to look for in other WordPress themes. You'll then be able to assess when it really is better or easier to use a pre-made theme versus building up something of your own from scratch.

 

Things You'll Need to Know


This book is geared toward visual designers (with no server-side scripting or programming experience) who are used to working with the common industry standard tools like PhotoShop and Dreamweaver or other popular graphic, HTML, and text editors.

Regardless of your web development skill-set or level, you'll be walked through the clear, step-by-step instructions, but there are many web development skills and WordPress know-how that you'll need to be familiar with to gain maximum benefit from this book.

WordPress

Most importantly, you should already be familiar with the most current stable version of WordPress. You should understand how to add content to the WordPress blog system and how its posts, categories, static pages, and sub-pages work. Understanding the basics of installing and using plug-ins will also be helpful (though we will cover that to some extent in the later chapters of the book as well).

Even if you'll be working with a more technical WordPress administrator, you should have an overview of what the WordPress site that you're designing entails, and what—if any—additional plug-ins or widgets will be needed for the project. If your site does require additional plug-ins and widgets, you'll want to have them handy and/or installed in your WordPress development installation (a.k.a sandbox—a place to test and play without messing up a live site). This will ensure that your design will cover all the various types of content that the site intends to provide.

Note

What version of WordPress 2 does this book use? This book focuses on WordPress 2.5. It has been an exciting few months to try to write a book for WordPress! When I started writing this book, I was using WordPress 2.3.2. I soon upgraded to 2.3.3 and then found myself upgrading again to very much improved version 2.5. Everything covered in this book has been tested and checked in WordPress 2.5. You may occasionally note screenshots from version 2.3.3 being used, but rest assured, any key differences between 2.3.x and 2.5 are clearly noted when applicable. While this book's case study was developed using version 2.5, any newer version should have the same core capabilities enabling you to develop themes for it using these techniques. Bug fixes and new features for each new version of WordPress are documented at http://WordPress.org.

First time with WordPress? I recommend you read WordPress Complete by Hasin Hayder.

CSS

I'll be giving detailed explanations of the CSS rules and properties used in this book, and the 'how and why' behind those decisions. You should know a bit about what CSS is, and the basics of setting up a cascading style sheet and including it within an XHTML page. You'll find that the more comfortable you are with CSS markup and how to use it effectively with XHTML, the better will be your WordPress theme creating experience.

XHTML

You don't need to have every markup tag in the XHTML standard memorized (yes, if you really want, you can still switch to the Design view in your HTML editor to drop in those markup tags that you keep forgetting—I won't tell). However, the more XHTML basics you understand, the more comfortable you'll be working in the Code view of your HTML editor or with a plain text editor. The more you work directly with the markup, the quicker you'll be able to create well-built themes that are quick loading, semantic, expand easily to accommodate new features, and search engine friendly.

PHP

You definitely don't have to be a PHP programmer to get through this book, but be aware that WordPress uses liberal doses of PHP to work its magic! A lot of this PHP code will be directly visible in your theme's various template files. PHP code is needed to make your theme work with your WordPress installation, as well as make individual template files work with your theme.

If you at least understand how basic PHP syntax is structured, you'll be much less likely to make mistakes while re-typing or copying and pasting code snippets of PHP and WordPress template tags into your theme's template files. You'll be able to more easily recognize the difference between your template files, XHTML, and PHP snippets; so you don't accidentally delete or overwrite anything crucial.

If you get more comfortable with PHP, you'll have the ability to change out variables and call new functions, or even create new functions on your own, again infinitely expanding the possibilities of your WordPress site.

Note

Beef up those web skills! I'm a big fan of the W3 Schools site. If you'd like to build up your XHTML, CSS, and PHP understanding, you can use this site to walk you through everything from basic introductions to robust uses of top web languages and technologies. All the lessons are easy, comprehensive and free at http://w3schools.com.

Not Necessary, but Helpful

If your project will be incorporating any other special technologies such as JavaScript, AJAX, or Flash content, the more you know and understand how those scripting languages and technologies work, the better it is for your theme making experience (again W3Schools.com is a great place to start).

Note

The more web technologies you have a general understanding of, the more likely you'll be to intuitively make a more flexible theme, which will be able to handle anything the site may need to incorporate into itself in the future.

Note

More of a visual 'see it to do it' learner? lynda.com has a remarkable course selection from the top CSS, XHTML/XML, JavaScript, PHP, and Flash/ActionScript people in the world. You can subscribe and take the courses online, or purchase DVD-ROMs for off-line viewing. The courses might seem pricey at first, but if you're a visual learner (as most designers are), it's money and time well spent. You can have a look at http://lynda.com.

 

Tools of the Trade


In order to get started in the next chapter, you'll need the following tools to help you out:

HTML Editor

You'll need a good HTML editor. DreamWeaver is good; I prefer to use Coda for Mac. When I was on a PC I loved the free text editor HTML-kit (http://www.htmlkit.com/), though, any HTML or text editor that lets you enable the following features will work just great (and I recommend you enable all of the following):

  • View line numbers: This comes in very handy during the validation and debugging process. It can help you find specific lines in a theme file for which a validation tool has returned a fix. This is also helpful for other theme or plug-in instructions given by author, which refer to a specific line of code that needs editing.

  • View syntax colors: Any worthwhile HTML editor has this feature usually set as a default. The good editors let you choose your own colors. It displays code and other markup in a variety of colors, making it easier to distinguish various types of syntax. Many editors also help you identify broken XHTML markup, CSS styles, or PHP code.

  • View non-printing characters: OK, you might not want this feature turned on all the time. It makes it possible to see hard returns, spaces, tabs, and other special characters that you may or may not want in your markup and code.

  • Text wrapping: This of course lets you wrap text within the window, so you won't have to scroll horizontally to edit a long line of code. It's best to learn what the key-command shortcut is for this feature in your editor, and/or set up a key-command shortcut for it. You'll find it easier to scroll through unwrapped, nicely-indented, markup and PHP code to quickly get a general overview or find your last stopping point, yet want to turn it on quickly so that you can see and focus your attention on one long line of code.

Graphic Editor

The next piece of software you'll need is a graphic editor. While you can find plenty of CSS-only WordPress themes out there, chances are you'll want to expand on your design a little more and add really nice visual enhancements and effects. These are best achieved by using a graphic editor like Photoshop.

I'll be using Adobe Photoshop in this title, and assume that you have some familiarity with it and working with layers. Any graphic editor you prefer is fine. One that allows you to work with layers is very helpful, especially with the design comping (a.k.a mockup) techniques I will suggest in Chapter 2; but you can still get by without layers.

Note

Need a graphic editor? Try GIMP. If you're on a budget and in need of a good image editor, I’d recommend it. It's available for PC, Mac, and Linux. You can get it from http://gimp.org/.

Prefer Vector Art? Try Inkscape, which is also available for PC, Mac, and Linux. Bitmap graphic editors are great in that they also let you enhance and edit photographs, but if you just want to create buttons or other interface elements and vector-based illustrations, Inkscape is worth trying out (http://inkscape.org).

Firefox

Last, you'll need a web browser. Here, I'm not so flexible. I strongly suggest that you use the latest, stable version of the Firefox browser (http://mozilla.com/firefox/).

Why Firefox? I view this browser as a great tool for web developers. It's as essential as my HTML editor, graphics, and FTP programs. Firefox has great features that we'll be taking advantage of to help us streamline the design creation and theme development process. In addition to those built-in features, like the DOM Source Selection Viewer and adhering to CSS2 standards as specified by the W3C, Firefox also has a host of extremely useful extensions like the Web Developer's Toolbar and Firebug, which I recommend to further enhance your work-flow.

Note

Get the extensions: You can get the Web Developer's Toolbar from https://addons.mozilla.org/en-US/firefox/addon/60, and Firebug from https://addons.mozilla.org/en-US/firefox/addon/1843. Be sure to visit the developer's sites to learn more about each of these extensions.

We'll Be Developing for Firefox First, then IE

In addition to Firefox having all the helpful features and extensions, IE6 and even IE7 have a thing called quirks mode, and while Microsoft has attempted a lot of improvements and tried to become more W3C compliant with IE7, there are still some CSS rendering issues.

Your best bet will be to design for Firefox first, and then if you notice things don't look so great in IE6 or IE7, there are plenty of standardized fixes and work arounds for those two browsers because their 'wonks' are just that—'wonks' and well-documented.

If you design only looking at one version of IE first, getting your design to look the way you want, then find it a mess in Firefox, Opera, or Safari; you're going to have a much harder time fixing the CSS you made for IE in a more standards compliant browser.

Firefox doesn't have to become your only browser. You can keep using IE or any other browser you prefer. I myself prefer Opera for light and speedy web-surfing, but Firefox is one of my key web development tools.

 

Summary


To get going on your WordPress theme design, you'll want to understand how the WordPress blog system works, and have your head wrapped around the basics of the WordPress project you're ready to embark on. If you'll be working with a more technical WordPress administrator and/or PHP developer, make sure your development installation or sandbox will have the same WordPress plug-ins that the final site needs to have. You'll want to have all the tools that are recommended installed and ready to use as well as brush up on those web skills, especially XHTML and CSS. Get ready to embark on designing a great theme for one of the most popular, open-source, blog systems available for the web today!

About the Author

  • Tessa Blakeley Silver

    Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

    Browse publications by this author
Book Title
Unlock this full book FREE 10 day trial
Start Free Trial