Socially Awkward WordPress Theme

socially-awkward-home

One type of theme I’ve always wanted to build is a video theme. It’s also been requested on many occasions in the past. I’m here today to tell you that I have not built a video theme.

Honestly, when I first started working on the Socially Awkward theme, I had planned to create a video theme because WordPress 3.6 just dropped some awesomeness on us with video support. However, I decided to truly do a video theme justice (like YouTube, Vimeo, etc.), it would need an accompanying plugin to handle a lot of extra non-theme features. That’s just not what I wanted to do. I wanted to focus on designing a theme rather than developing features.

So, instead, I built a theme that highlights all sorts of media, not just videos.

About the theme

socially-awkward-video

Socially Awkward is a theme that I believe the average WordPress user needs. It’s about getting back to the roots of weblogging and sharing content.

I don’t want to sound like I’m over-hyping it too much, but this is a project I’ve fallen in love with. It’s the first time in a while I’ve pushed through 16-hour days just so I could play around with a new idea. It’s been invigorating and has rejuvenated my love for simply designing WordPress themes.

The plan for this theme was simple: use WordPress’ post formats, Hybrid Core’s new media grabber, and media from around the Web. Then, mix them all together and see what happens.

I believe I’ve created a theme that performs its job well.

What’s different about this theme?

socially-awkward-audio

Socially Awkward has some new features that I’ve been experimenting with lately but have finally gotten a chance to fully put to use. Here’s a list of a few things that’s different about this theme.

  • It’s one of the few themes in existence that takes advantage of WordPress’ new features for self-hosted audio and video like a custom-skinned media player and the display of ID3 tags (i.e., audio/video metadata).
  • Takes advantage of the Hybrid Core framework’s new media grabber (added in 1.6) to pull media from a post, which is something you’ll probably see from more Hybrid-built themes in the future.
  • Uses WordPress’ nav menu system to handle the display of your social networking profiles.
  • No theme options. Yes, that’s a feature. Themes should just work, and I’ve done my best to make theme setup as worry-free as possible.
  • Post formats navigation. There’s an included “formats” menu. But, the cool feature is that navigation between single posts is to the next/previous post by format (e.g., the next video, previous quote, etc.).
  • We’ve got Bon Iver in the demo. What other themes can claim that?

Download the theme

You can find all the relevant theme information like the download and demo links on the Socially Awkward theme page. It will also soon be on the WordPress.org theme repository (assuming it makes it through the review process).

Please enjoy this theme. All feedback is welcome. As always, please post any support questions in the support forums.

25 Responses

  1. Sami Keijonen Sami Keijonen September 4, 2013 at 8:16 am |

    It’s easy to imagine that you’ve fallen love for this one. It’s so beautiful and full of nice details.

  2. Socially Awkward Socially Awkward September 4, 2013 at 1:25 pm |

    [...] released the Socially Awkward theme over at Theme Hybrid today. It’s a responsive CSS3 and HTML5 media theme with some cool [...]

  3. Patrick Daly Patrick Daly September 4, 2013 at 3:29 pm |

    Wow. Great looking theme. You’re always good at simple, but this is also so elegant.

  4. maxheartless maxheartless September 4, 2013 at 4:09 pm |

    Great looking theme, Justin.
    Really slick-looking.

  5. Tung Tung September 4, 2013 at 7:21 pm |

    You make me want to design a child theme for this!

  6. maxwellss maxwellss September 4, 2013 at 9:27 pm |

    Hi there. Small admin problem re this theme. I’ve registered, logged in, can download other themes, but not this theme, which I’d really like to test-drive. Cleared cache and cookies, same problem. thanks.

  7. chrismccoy chrismccoy September 5, 2013 at 6:12 am |

    is this a free theme? or only to paid members?

    1. Sami Keijonen Sami Keijonen September 5, 2013 at 6:26 am |

      Free as a bird. Only support is paid.

    2. Sami Keijonen Sami Keijonen September 5, 2013 at 6:29 am |

      @Justin: When logged out, download link in theme page points to this url.

      http://themehybrid.com/club

  8. chrismccoy chrismccoy September 5, 2013 at 1:18 pm |

    Ya I noticed the download link was club for free members logged in and logged out, but the repo link points to the download on github, so thats where I downloaded it.

  9. haluk karamete haluk karamete September 5, 2013 at 2:01 pm |

    Justin, nice theme… congratulations.

    I was testing the demo page on http://locallylost.com/socially-awkward/2013/08/02/skinny-love/.

    Obviously, the navigation dropdown is having an issue there. It falls behind the youtube video. ( I’m using chrome. )

    Could this (http://stackoverflow.com/questions/9074365/youtube-video-embedded-via-iframe-ignoring-z-index) help?

  10. haluk karamete haluk karamete September 5, 2013 at 2:23 pm |

    Interesting…

    I’ve saved the demo page on my desktop as “Webpage, Complete”. My goal was to test whether the trick I suggested would work or not.

    To my surprise, chrome saved the page by changing the exact area that I’m after, which is the area where you have the youtube iframe.

    I saw this;

    S0 I had to change the what you had which is this

    Then when I added the “wmode=transparent&” piece in there, I saw that it is working. The drop downs were showing properly.

    This is FYI.

    Here is the working piece;

  11. David Chandra David Chandra September 6, 2013 at 12:56 pm |

    wooow…
    i think this is the best theme listed here @ theme hybrid.
    amazing!

  12. Freetechpark Freetechpark September 7, 2013 at 2:55 am |

    Thank you for post. wanderful and good looking theme.

  13. Samuel Dellicour Samuel Dellicour September 9, 2013 at 6:16 am |

    When I view the demo (Firefox on Linux), word breaks are not happening correctly.

    So I get something like this:
    (…) Milli
    ons upon millions of worlds.

    Istead of this:
    (…) Mil-
    ions upon millons of worlds.

    Notice the hyphen is missing, and the word breaks incorrectly.

    Removing *word-break:break all;* using Firebug while keeping word-wrap and -moz-hypen corrects this.

    Chrome doesn’t support word breaks at all, I think, so that’s not a problem.

  14. Mathias Mathias September 18, 2013 at 8:11 am |

    Beautiful Theme

  15. fuadalzubairi fuadalzubairi September 22, 2013 at 12:33 am |

    I could not add a distinct image …. Thanks

  16. Brooke Brooke September 29, 2013 at 6:42 pm |

    I’m new to this, I can’t seem to figure out how to create menu’s for different categories of things I want to post on my blog..

    Help?

  17. Brooke Brooke September 30, 2013 at 3:30 pm |

    Is there any ay to make more than one coloumn with this theme? Can I remove recent posts from the homepage?

    Thanks

Comments are closed.