Quattro and Its Colophon

So, Yeah! I know. I switched to Jekyll for a very short phase, owing to the attraction it has to developers and ‘blog-hackers’. But, then, I soon started missing some of the advanced functionality provided by WordPress, such as custom fields, granular designs, post formats, custom posts, etc.

So, I finally switched back to WordPress. The old Jekyll site can still be seen on: Github Pages, which will, from now on, only host documentations about my Github public repositories.

When I switched to WordPress, I found myself converting the previous template again for WordPress, which was not what I really wanted to do, since it was boooooring! And, hence, I decided to create a new WordPress theme which will have some of the advanced functionality, I wanted, along with a unique design.

I named the theme Quattro, owing to the heavy usage of the font: Quattrocento for primary styling, by this theme. Moreover, I wanted this theme to be HTML5 and CSS3 ready. So, I, carefully, selected the Starkers HTML5 theme framework by Nathan Staines as the base framework for this theme.

Responsive Web Design

This theme utilizes the concept of media-queries and responsive web design to target devices with specific max-width. Try resizing your browser window and the theme will try to adjust according to your browser width. Nice, right?

Well, there is more to it. The real benefit of this design layout is seen when you will try to visit this site using a mobile browser, for example. The design adjusts itself to fit the narrow width of the mobile browser, as opposed to displaying a design which was, initially, designed for a 1200+ px wide screen. :)

Post Formats

This theme makes extensive use of WordPress post formats to render different post formats in different styles. For example, a post with a post format of Gallery is displayed to be, specifically, displayed as a photo gallery. The following post formats are defined for this theme (and the description tells how these formats are implemented in this theme):

  • Aside: Styled without a title. Similar to a Facebook note update.
  • Gallery: A gallery of images.
  • Image: A single image. This image is not linked to its attachment page.
  • Quote: A quotation. Stylized in Orange text. Quote author is displayed for this quote.
  • Status: A short status update, similar to a Twitter status update. Update date is displayed for this status, e.g. this status update.

Moreover, this theme makes use of two more post formats (well, they are not actually post formats, but a similar functionality is achieved by using Custom Fields and J-Flickr plugin for WordPress):

  • Flickr Gallery: similar to Gallery post format. Except that, the images for this gallery are directly fetched from a Flickr photoset, or photo collection. This gallery is lightbox aware. Also, a single gallery can contain more than one photosets or photo collections.
  • Flickr Images: similar to Images post format. Except that, the image is directly fetched from Flickr. These posts can contain more than one images. Ideally, a Flickr Gallery is for photosets, and Flickr Images is for photos.

Home Page (Content Slider)

If you noticed the homepage, it is made up of a content slider, which uses bxSlider to create the sliding content effect using jQuery. This content slider is enabled as a Page Template and hence, allows me to re-use it for more pages.

ToDo List

  • Add support for Tasks (ToDo Lists) Custom Post Type
  • Add various shortcodes for easy styling and for download buttons, etc.
  • Add post format: Chat
  • Display related posts on 404 pages
  • Also, post to Facebook and Twitter when a status update is made.
- by Nikhil Gupta


Copyright © 2015 - Nikhil Gupta - Powered by Octopress