WordPress Tutorials

At this point you've gone through the trouble to create a semantic, user-friendly, and accessible XHTML theme, and one of the benefits of that structure is that it helps with SEO (Search Engine Optimization, if you haven't guessed by now). You might as well go all out and take time to set up a few more optimizations ...

I like to simplify this process by using a simple PHP script with a local TTF font (True-Type Font) to help me quickly generate my header graphics. I can then just include them into my CSS sheet, dynamically setting up the text that the header needs to say. This technique is very useful if your site is going to be mainly controlled by a client. As they'll probably have to let you know every time they make a new header that needs to be a graphic loaded in via CSS. You'll be able to accommodate them on-the-fly (or even better, teach them how to do it), as opposed to having them wait for you to ...

The HowToons.com site does something more than just make their posts creative; the speech-bubble bottoms of each post and the nice big background image that is positioned with no-repeat and fixed in the bottom right, achieve what I refer to as 'boundary breaking‘. Whether we realise it or not, we tend to create theme designs and page templates that adhere to a 'grid' of some sort. This is not a bad thing. It makes for good design, easier use of the interface, and most importantly, easier content reading. However, I tend to find we can become 'desensitised' to many site's designs, and ...

In these next few sections, we're going to focus more on ideas than specific techniques. The good news is, because you're using the Firefox browser with the Web Developer Toolbar, you'll be able to easily 'deconstruct' many of these site samples using the CSS | View Style Information and CSS | View CSS tools and think of ways to creatively use them in your own themes. How Toons (http://www.howtoons.com/blog/) is a great kid's site that teaches them interesting things in math, art, history, and science using fun comic illustrations. The site's blog features a great use of the Comic Sans ...

I'll be honest; I'm on the cheater's band wagon when it comes to rounded corners. I often create locked-width designs so I always know exactly how much room my columns can take up, and they only need to be able to expand vertically. More aListApart: Again aListApart.com comes in with a great take on this two image process, along with some great tips for creating the corners in your favorite graphic program: http://www.alistapart.com/articles/mountaintop/ This rounded corner fix only works for a set width with a variable height. That means, how wide you make your graphic, is as wide ...

Ideally, you'll wrap your WordPress template tag in enough div tags to be able to create a round cornered object that is flexible enough to scale horizontally and vertically. You can also use heading tags or probably any other XHTML tag that occurs in the element. Really understanding rounded corners in a table-less design: If you haven't noticed by now, I'm a fan of aListApart.com, so I'll leave it to these trusted experts to give you the complete low-down on the details outs of making rounded corner boxes with pure CSS: http://www.alistapart.com/articles/customcorners/ Also, there are ...

Rounded corners have been pretty popular the past few years, to the point that many sites have been accused of incorporating them just beacuase they seemed 'Web 2.0-ish‘. Fads aside, rounded corners are occasionally just flat going to work well with a design (they're great for implying happy-friendly-ish tones and/or retro styles), so you might as well know how to incorporate them into your WordPress theme. ...

Next, I'll go through what I feel are the most popular tricks used in website design today. After that, we'll take a look at some interesting samples of unique design ideas and how theme authors approached achieving them. Most techniques are easily incorporated into WordPress as they're handled one hundred percent via CSS. A few items will require you to think and plan ahead, as you'll need to make sure the WordPress theme code accommodates the effect. The best thing is, if you can implement these techniques into a WordPress theme, you can implement them into any website. First off, we've ...

Alright, for this last chapter, let's sum things up by giving you a few final design tips, tricks, and troubleshooting ideas to take with you into your future WordPress theme designs. As we've gone through this book there are quite a few tips that have been given to you along the way. Here are the top four to remember: 1. Create and keep lists: Check lists, color lists, font lists, image treatment lists. Keep all of these handy from your initial design phase. You'll find them to be useful and excellent inspiration for your designs to come. 2. Design for FireFox first, then, fix for IE: ...

The fun doesn't stop there! What's that? You don't have time to go read up on how to use a JavaScript library like jQuery? Never fear! There are many other JavaScript effect components and libraries that are built using the libraries above. One of the most popular scripts out there that makes a big hit on any website is Lightbox JS: http://www.huddletogether.com/projects/lightbox2/ Lightbox JS is a 'simple, unobtrusive script used to overlay images on the current page.' It's great, but it uses both the Prototype and Script.aculo.us libraries to achieve its effects. I also found that ...