Lilac Creative

I get a lot of emails asking how I learned to design and build WordPress themes from scratch, and if I have any tips for those interested in building their own themes, so I thought I’d write a post about it for anyone else who might like to know.

My History with WordPress

I kind of fell into web design as a profession by accident. While I’ve always been pretty tech- and computer-savvy, I was never particularly interested in programming or computer science, so web design was never really on my radar. A few years ago I purchased my own domain and hosting (for a site that no longer exists), and installed my first WordPress blog. I was so excited to have my very own place on the web, and I wanted to take it a step further—I wanted to make it look like my place.

I knew nothing about web design (other than the visual stuff—I was very well versed in Photoshop), had a very basic knowledge of HTML, and had never even heard of CSS when I first started. But I figured out that I could take a theme that I liked the general layout of, open up the graphics in the theme’s images folder and create my own graphics over top of them, save them with the same names and suddenly have a theme with my own design. Around the same time, a friend of mine explained the general idea of CSS to me, which piqued my interested and made me want to learn more. I picked up a book that explained HTML and CSS and how to use them together, and that set me on the road to building my own WordPress themes from scratch.

Tips for Those Interested in Building Their Own Themes

If you have a self-hosted WordPress blog that you want to learn to customize yourself, or if you’re interested in getting into WordPress theme creation in general, here are a few things that really helped me get started:

1. In order to be truly creative and free in your theme-building, you really need a solid grasp of current HTML and CSS standards. Slicing a layout in Photoshop and saving it as images and HTML, or using the WYSIWYG side of Dreamweaver will NOT produce web-standard HTML. Take the time to learn how to correctly hand-write your own HTML and CSS from the ground up—you will be so glad you did!
2. Set up a local server environment on your computer for offline WordPress development. XAMPP is the one I use. It’s easy to setup and runs everything most CMSs, including WordPress, need.
3. Peruse WordPress.org’s Theme Library. Don’t just look at the themes for their graphics and visual appeal; look for interesting layouts, or functions. If you see something that’s new to you, download the theme and plug it into your local dev environment so you can dig through the code and learn how it works.
4. Google “how to create your own WordPress theme”. There are dozens of great tutorials out there that will take you through the basics of a WordPress theme. If you have a hard time understanding one tutorial, try another one. Different people take different approaches—find one that makes sense to you.
5. Work from a framework. What’s a framework? It’s like a theme template, a super simple (plain, even) theme that has all the basic necessities of a theme with a basically blank stylesheet just ready for your new design. Create your own framework or grab one of the many already-existing frameworks out there. No need to reinvent the wheel every time you create a new theme. Working from a framework will save you a ton of time!

Getting Advanced with WordPress

The list above are things that are helpful if you’re just getting started and you want to focus on customizing the way WordPress looks. But the fun of WordPress doesn’t end there. If you’ve got a little PHP under your belt, WordPress offers a ton of functionality beyond the standard template tags. Explore WordPress’ Codex if you’re wanting to dig deeper and find creative ways to use WordPress. Also be sure to check out the vast Plugin Library to add even more functionality to your themes. If you’re creating themes for sale, look into adding theme options and an admin panel to your theme.

Some Great HTML, CSS and WordPress Resources

• HTML Dog - A really well-organized (and often humorous) beginner’s guide to HTML and CSS. Instrumental in my own learning process.
• Head First HTML with CSS & XHTML - The first book I picked up on the subject. It was so thorough that I had HTML down cold by the time I was finished with it.
• NetTuts: How to Create a WordPress Theme from Scratch & How to Create a WordPress Theme from Scratch Part 2 - NetTuts offers some of the best tutorials out there, and this one on creating a WordPress theme from scratch is no exception.
• Build Your Own Wicked WordPress Themes - The basics of WordPress theming and beyond!

Things have been so busy around here for the past few months, that it had been a while since I checked my site stats (which I usually monitor about once a week). When I checked them recently I noticed a huge spike in site traffic about a month back. I checked to see where it had come from I was surprised and honored to find that Lilac Creative had been featured on HTML5 Gallery.



HTML5 Gallery is a site that showcases sites built on HTML5. Not only is it a great resource for creatively designed sites, but it's also a great place to find practical usage of HTML5. I confess to referencing it many times during my HTML5 redesign of Lilac Creative. Each site featured in the Gallery is examined, and the Gallery "curators" make notes of each site's correct and creative use of HTML5, as well as areas where various HTML5 elements could have been implemented in a more effective way. HTML5 is a great contributor to the growth and development of HTML5, and I'm excited to have my site be a part of it.

Things are looking a little different around here! When ExpressionEngine 2.0 beta was released last December, I started planning for a site redesign to be implemented once EE2 was out of beta (which happened last month with the release of ExpressionEngine 2.1). Initially, there were three things I wanted to “upgrade” in this redesign: the ExpressionEngine templates, my site content, and the visual design itself. ExpressionEngine 2 has some great new templating features (i.e. snippets and global variables) that really help simplify templates, and making use of those, I was able to get rid of a lot of redundant code in my templates and template groups. I used Google Analytics to identify content on my site that wasn’t being used. I ditched anything that wasn’t getting significant hits, and reorganized my navigation to make the site necessities easier to get to. The visual design came together slowly, in between client projects. By the time I was ready to translate the design into HTML and CSS, I started considering a fourth upgrade for my new site design: HTML5.

The Viability of HTML5

There’s been lots of buzz about HTML5 lately, but it’s still currently in the Working Draft stage of its development, which means nothing is finalized and a lot could change in the development process. Just how viable is the HTML5 specification, and should I use it for my site? These were the questions I was asking myself as I approached the coding point of my site redesign.

So I started doing some reading on the subject. I read arguments for and against using HTML5 now. Arguments against using HTML5 right away argued that HTML5 is still in the Working Draft stage of its development, and could therefore change a lot before a stable specification is settled upon. Arguments for adopting HTML5 today pointed out that most browsers already support HTML5 elements (with IE being the exception—big surprise there), and IE is easily accomodated by including a quick and easy javascript shiv to force IE to recognize the new elements.

In the end, I decided I wanted to give HTML5 a shot with this redesign, mostly so I could try out the new specification and get a feel for it.

Calling It What It Is

One of the things I like best about HTML5 is the new elements—they enhance web semantics. Before HTML5, I would wrap my header in a div named “header”, my nav in a div named “nav”, and my footer in a div named “footer”. Now each of those commonly used page sections is its own element. The whole point of web semantics in HTML is to correctly organize and identify the purpose of a site’s content while keeping it separate from the presentation of the content, and the new elements allow HTML authors do just that.

In the same vein, HTML5 forms introduce new input field types such as email, url, color, and tel for telephone numbers.

Useful HTML5 Articles and Resources

Below are some of the articles and resources I checked out when considering HTML5:

• 5 Reasons Why You Can Use HTML5 Today
• Why designers should care about HTML5
• A Preview of HTML 5
• W3C HTML5 Working Draft
• W3C HTML5 Forms Specifications
• HTML5 Gallery - A gallery of sites already using HTML5

Have you tried your hand at HTML5 yet? I’d love to hear why or why not!

I've been building ExpressionEngine sites for two years now, and I still learn fun new things EE will do with each new site I build. It's one of the things I love about EE: it's so robust and full-featured that its implementation possibilities are seemingly limitless. Rebuilding my own site on EE was a chance to explore EE even further, and I learned a handful of things I'd never even thought of before (neccessity is the mother of invention, right?). One of those things lies in EE's global variables, which I admit, I've never really paid much attention to before now.

What I Wanted to Do

I designed the blog section of my site to have a fun little banner graphic that would identify the blog and that I could change out seasonally if I feel so inclined. I'm using a pretty standard structure for the blog area: an index page that displays the most recent entries, with pagination at the bottom that will allow readers to go to the next page with the next 5 entries, etc. I wanted the banner graphic to show up at the top of the posting area on the index page, but during testing I realized that with the way I had things set up, the banner graphic would show up at the top of all the paginated pages that use the index page. I thought that was a bit redundant and unneccessary, so I went looking for a way to have my banner only display on the first page.

URL Segment Variables

I knew the logic needed to be something like: { if thisPage == "index" } Content Here { /if }, but I had no idea what variables EE used to acheive what I was going for. So, I asked in the EE forums (another super awesome thing about EE is the friendly support from both official EE techs and the scores of EE enthusiasts in the EE forums). The answer was URL segment variables.

The URL segment variable lets you change your page content dynamically based on what's in the display page's URL. EE breaks its URLs down into segments, where each section separated by a / is a segment. If you have EE installed in your root directory then your main index page is located here: http://www.yoursite.com/. So let's say you have an about page located at http://www.yoursite.com/info/about (assuming you've removed index.php from your URL using one of the hacks available for that). EE identifies segment_1 as "info", and segment_2 as "about."

Identifying My Index Page

Back to what I was trying to do with my index page and banner graphic. With this newfound knowledge, it was now possible for me to identify my blog's index page in a conditional statement using EE's URL segment variables. To get my banner graphic to display only on the index page of my blog, I used this code (outside my exp:weblog:entries loop, since URL segment variables are global, and therefore don't require a governing loop):

{ if segement_2 == '' }<img src="bannerGraphic.jpg" alt="Design Blog" />{ /if }

This code checks to see if segment_2, which would come after "/blog/" in my URL structure, is empty. If it's empty that means it's the index page, since paginated pages insert P1, P2, etc. into the URL after "/blog/" to denote the number of the paginated page. So, if segment_2 is empty, then display bannerGraphic.jpg. Voila! This particular solution could be useful for displaying featured content on your index page only, or if you decide you want your index page to display the full body of your most recent post, but display only excerpts of all following posts.

But URL segment variables have many other dynamic templating possibilities, some of which are explored on the URL segment variable page in the EE documentation, so be sure to check it out!