For a long time, I always want to craft a WordPress theme with these three goals in mind:

  1. It should have great reading experience.
  2. It should look great on mobile or tablet.
  3. 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.

Opus Writing Experience

Looks Great on Every Screen

I often blog-walk using my iPhone and i found that many desktop oriented themes are not pleasurable to be read using mobile screen. Zooming in and out to read content is annoying. Hence, Opus theme is designed with mobile first approach. The default layout for Opus is a fluid layout which will be switched to fixed layout with spacious whitespace when it is opened on larger than 680 pixels. I neat javascript based trick is employed to adjust your image and embedded media to the layout displayed.

Opus Mobile

Personality Matters

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.

Customizing Opus

***

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.

Opus is available on the WordPress theme repository.

***

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

19 thoughts on “Opus

  1. Reply
    eight months ago November 26, 2013
  2. Cool WP theme bro! :)

    Reply
    seven months ago December 26, 2013
  3. Hans Martens

    I like your WP theme Opus very much. Cool!

    Reply
    six months ago January 21, 2014
    • Thank you very much. It means a lot to me that you like it :D

      Reply
      six months ago January 21, 2014
  4. […] out a demo on the developer’s website to see Opus in […]

    Reply
    six months ago January 21, 2014
  5. […] Details / Download » Demo » […]

    Reply
    six months ago January 30, 2014
  6. Reply
    six months ago January 31, 2014
  7. Reply
    six months ago February 01, 2014
  8. […] Created by WordPress theme developer Fikri Rasyid, Opus takes a mobile first approach to responsive design and features a fluid layout. When he set out to create Opus, Rasyid wanted the theme to provide a great reading experience on any device. Demo […]

    Reply
    five months ago February 07, 2014
  9. […] According to the developer of the theme, it is for those website owners who have personality. The main driving force behind the theme was to build a theme which would look great on smaller devices and provide wonderful reading experience. Additionally, the theme offers other handy tools like custom header, featured images, multiple post formats, sticky posts, custom colors and menu etc. Download | Live Preview […]

    Reply
    five months ago February 09, 2014
  10. […] Created by WordPress theme developer Fikri Rasyid, Opus takes a mobile first approach to responsive design and features a fluid layout. When he set out to create Opus, Rasyid wanted the theme to provide a great reading experience on any device. Demo […]

    Reply
    four months ago March 12, 2014
  11. Gittitat

    Nice Bro :).

    Reply
    two months ago May 28, 2014
  12. […] DEMO          DOWNLOAD […]

    Reply
    two months ago May 28, 2014
  13. […] looks like Opus Theme is on the right direction, don’t you think? […]

    Reply
    three weeks ago July 04, 2014
  14. Ekayanto

    Cool banget ya bero tema-nya :)

    Reply
    five days ago July 25, 2014

What Do You Think?