For a long time, I always want to craft a WordPress theme with these three goals in mind:
- It should have great reading experience.
- It should look great on mobile or tablet.
- It should have personality.
With these three main goals, I started designing and developing Opus Theme.
O, Reading Experience!
For the initial main color scheme and design elements, I found Designmodo’s Square UI kit to be suitable for the design direction. Its use of Montserrat inspired me with big bold fonts and spacious elements. Open Sans feels matched with the overall concept too, so she is joining the Opus theme. Thanks for Google Fonts for providing these great fonts for free.
As much as my aspiration for great reading experience, great writing experience is important too. The editor’s styling has been tweaked to display the content as similar as possible with how the content is displayed on the front page.
Looks Great on Every Screen
I want opus to facilitate self expression of its users. To enable this, big image slash page cover design element is implemented on Opus. Go snap big and pretty image, it’ll have its space on Opus through WordPress’ native custom header and featured image. I always feel that the color scheme of the site shows the personality of the site as much as page cover, so Opus utilizes WordPress customizer API so you can have Opus powered site with various colors.
That is pretty much about Opus for now. It is available on GitHub so you can fork, submit patch, pull request, and report bug if you found any.
Worry not, I’m submitting it to the WordPress theme repository too. I’ll let you know when Opus passes the theme review and available on WordPress repository as soon as possible. For the time being, you can download Opus on GitHub.
December 14th, 2013 – Available at WordPress Theme Repository
Opus has been approved by WordPress Theme Reviewer and it is available on the WordPress Theme repository.
July 13th, 2014 - Version 1.1
Seven months after its inception to WordPress repository, there are some stuffs that I think need to be added, tweaked, and fixed. Hence the version 1.1:
- Hiding top navigation when the page user scrolls down the page. Display the top navigation when the user scrolls up the page. Saving screen space for more important focus: the content. Inspired by this article
- Adding support for Infinite Scroll feature provided by Jetpack
- Adding support for WP-IG, the Instagram – WordPress integration plugin
- Displaying embed code, oEmbed-supported link, or url to video stored on post meta ‘_format_video_embed’ as video on single page. Note: I recommend Crowd Favorite’s wp-post-format plugin for better UX for post format
- Subtle improvement on design: smaller content width to make featured image on post format image more digestable, changing typography from open sans to roboto (IMO it is more sharper especially when it is used on large font-size), adding parallax effect to page image cover, adding subtle shadow to give sense of depth to the layout, inspired by Android Material Design
- Hiding tag box if there’s no tag to be displayed
- Fixing top nav behavior on small screen