For those who have been reading my previous posts, you would know that I’ve been posting to this blog as part of a class I’m currently taking. This class is called “Web Content Management Systems”, and as the name suggests we study and work with a series of WCMS’s; specifically WordPress, Joomla! and Drupal. Tomorrow morning is the last day of the winterim class and consequently the “semester projects” are due. Now, it’s not really a semester project because the class only lasts for 13 days. There is a very limited amount of material that can be covered in that period of time, and even less time to do a massive project.
For my semester project I chose WordPress as my CMS of choice. The primary decision for this was to create a way to showcase my knowledge and experience in WordPress. Since there is a high potential that I will be doing a lot of WordPress development in the coming months I came to the conclusion that my personal site should exemplify such abilities. As a “sub-category” of a WordPress project I decided I would create a custom WordPress theme, mainly because I want to have “my design” as the appearance of my WordPress site. I’ve gotten quite partial to the original design I had on my website before winterim, and I wanted to implement that design into a WordPress site. Since I couldn’t find a theme remotely close to the design I wanted, I was resorted to building my own.
As I expected, creating a custom theme is/was a very monumental task. There are a lot of little pieces that need to fit together properly in order for the theme to function within the site. As such, this played into the overall structure of my files. There were of course a certain number of files that needed to be included in the theme structure in order for it function properly. But, there are a series of files that aren’t necessary for a functioning theme. However, I decided that I would create all functionality for my theme and include all the necessary files.
I decided to go with this choice mainly because “developers suck at designing”. Meaning, most FREE themes are created by developers and as such have a tendency to be boxy and not appealing. Whereas on the other hand, themes created by designers don’t necessarily function all that well. I’d like to think that I can consider myself both a developer and a designer. Now I’m not saying I’m a great designer, but I do understand and appreciate design so I keep it in mind when I’m developing. I think this helped a lot in my overall theme construction.
The main aspect of this theme that I take pride in is the implementation of CSS3. It was an interesting experience trying to get CSS3 to work properly with everything I wanted, mainly for browser reasons. Originally I was going to lack support for Internet Explorer, however I decided against it. Making that decision proved interesting. My finished design is primarily CSS3 (which I’ll explain shortly) and CSS3 is not natively supported in IE. As such, I had to spend a large amount of time researching hack implementations for IE. In the end I found a solution called “PIE”, which stands for progressive internet explorer. Essentially, PIE makes IE compatible with CSS3 by using an htc script file. I’m not entirely sure how it works, I just know it does, and it does it very well. So if you were to look at my design in an IE browser it would look relatively the same, some features of CSS3 don’t work with this hack (element rotation) so there are a few aspects that are off. However, I was willing to make this compromise.
A second major decision I made in the design/construction of this theme was the ability for dynamic appearance changing. With a WordPress theme there is the ability to create an admin menu for site administrators to interact with. This admin menu creates a space for site administrators to make changes to certain areas of the theme, anything from design to functionality. I took a big interest in this capability and decided to implement it into my theme construction. The ending result is the ability for site administrators to significantly change the appearance of the site design. However, that significance is still limited. I created the ability for admins to change the color scheme of the site, as well as the font associated with the site title and description.
The font changing uses the @font-face css control by creating custom font types. I pre-populated the template with font files and gave the theme options page access to theme. The ending result is the ability to change the appearance of the site title via the click of a button. I did this for 2 main reasons. The first, and possibly the most obvious, is that it’s incredibly easy for me and saved me TONS of time. Since the font is controlled with font type rather than images I didn’t have to spend any time creating banners in Photoshop. The 2nd is pretty similar to the first. The site administrators can change the site title appearance with the click of a button; which means they don’t have to stick to one custom design, they can have options, and options are a good thing. Options equal dynamic content and dynamic content equals a reliable site; which yields happy users.
I’ve always been a fan of dynamic capabilities in a website, especially from an administrative standpoint. It makes implementing solutions a lot easier and efficient. In addition it’s a lot less complicated. I’m very pleased with the way content management systems handle this aspect. I haven’t worked a ton with Joomla! or Drupal, but as far as WordPress is concerned it’s handled very well. As such it is really easy to implement custom functionality into the core installation. This is a major aspect of a custom theme, and eventually is something I plan expanding more on with my theme as time allows.
I was really pleased with the capabilities of CSS3, since that was the major component of my design I spent a lot of time working with it. To say the least, my theme doesn’t use images. That statement has one exception though; the social media bar and the RSS icon use images because it’s the only way possible; the images are links, so they’re kind of necessary. Because of the lack of images in the design I had to rely heavily on the powers off CSS3, and those powers suited me well. Even with the frustrations of IE it was a very pleasant experience and all of my future website projects will be affected by it.
If anything, I think that is one of the most satisfying results of this project. I feel that having discovered new techniques in design and development is one of the best things that can come out of a class such as this, even if those techniques aren’t directly related. The two things I can take out of this are the design powers of CSS3 and the benefit to creating dynamic content. Granted, both of those “lessons” have their place in a site design. They won’t always be possible, but they are nonetheless there when needed.
There are quite a few things that I still want to do with my design, but time just didn’t allow for me to complete them. I one was to browse through the various posts they’ll notice that there are some sections of content that look kind of “blah”. There is a lot of styling that takes place to get everything to work just right, and I didn’t have time to work out some of it. I would also like to build in some more custom functionality on the administrator side; mainly for site appearance and theme features. Each of have specific elements and procedures that I need to incorporate into them, so it will take more time. I would also like to convert the theme to HTML5, I have no idea what that will all entail, but I’ve very intrigued to find out.
I eventually want to launch the theme on this site (since it’s my site and all), but I want to first work out the kinks with the design that are still there. However, if you would like to take a look at what I’m considering a “finished product” for the assignment you can visit this link: www.wiknights.com/wordpress. This is a 2nd domain that I own and primarily use for hosting development content. I imported default WordPress test content and posts, so feel free to browse through the posts and get a feel for the overall layout and design.
If you decide to take a look at the design I would really appreciate any feedback that you would be willing to give. I’m always looking to make improvements on my work and feedback is the best way to do it. My goal is to eventually release the theme for public download, but for all intensive purposes it’s still currently in beta.
So thanks for reading, and stay tuned for next time!
