Josh Leuze 10:26 pm on August 26, 2015
Tags: Improving WordCamp.org ( 17 ), official websites ( 44 ), themes ( 8 ), wordcamp.org ( 34 )

Update on building a new WordCamp theme

This is a follow up to the @iandunn post on the WordCamp.org tools survey results.

I setup a Github repo for the new WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. theme with a fork of Underscores to get things started.

To start with I have been collecting feedback and ideas for a new WordCamp theme so that our design lead, @robertnienhuis, has something to work with. I haven’t gotten too much feedback online yet, but have gotten some good ideas from several other organizers offline. If you would like to share some feedback as well please post a comment below!

Theme Features

Here is the feedback that I have collected so far, as well as my own ideas:

Great Design: I would like to keep the theme light and minimalist, easy to build on, but also have it look good enough out of the box for a WordCamp without a strong designer to be able to use as-is.
Mobile First: I’d really like to include a strong mobile version that makes WordCamp sites easy to use at the event when you are on the go.
Widgetized: It’s always tough to get markup where you want it, I’d love a lot of widgetized areas so I can get the content I need in the right spot to match any design. I spoke with some other organizers who would also like more widgetized areas, sitewide and page specific. Particularly for the featured content sections typically found on a WordCamp site.
Widgets: Building actual widgets into the theme might be a step too far, but there was some interest in having a few featured widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. styles built in, so that if you used the right markup in a text widget you could get a good looking featured section right out of the box that organizers can expand on from there.
Page Templates: Most of the people I talked to were interested in having more page templates to choose from. Like a homepage template with a page content area and multiple widget areas for featured content and also a similar homepage template with a smaller blog area setup as recent posts with excerpts. We’ll need a single column page template of course, but I’d also like to try to include a more minimalist template with little or no headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or footer as well that people can use for whatever they want as a blank canvas.
404 Template: I’d like to include a pretty minimalist template for this too that includes a widget area just for the 404 page, so that people can create a nice custom 404 page if they want to.

Website Examples

I also have a few examples of WordCamp sites that I like, please share your favorites in the comments!

WordCamp Minneapolis: Westwerk did an awesome job designing this site and if we can do half as good I’d be thrilled!
WordCamp Montreal: They had a sharp looking site this year, I really like the call to action blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. on the homepage below the header with the tickets/schedule spot, and the subscribe/ social media spot.
WordCamp Denver: A nice clean site, great for mobile, with a sweet camping vibe.

I’m pinging people that volunteered to help out in the previous post: @cheffheid, @valeriosza, @dnelle, @danielgcarvalho, @brettshumaker, @davidjlaietta

#improving-wordcamp-org, #official-websites, #themes, #wordcamp-org

Jon Brown 3:25 am on August 27, 2015

This is awesome Josh!

Mobile first, yes! Widgets, yes… sort of… Page Templates, yes!

After years of working with Genesis I’ve grown pretty averse to creating page specific widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas, far preferring custom metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes that are page template specific. That might not be workable though when one can’t write a shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. or modify a template file.

Page templates. It would be great to have a front page template that included an area for “announcements”. Often we do this with a sticky post but that’s not ideal, it’s be nice to feature a page in the “announcements” area. For example call for sponsors, or tickets on sale, or lodging details, or parking details, or… you get the idea. That also leads to wanting to use pages, not posts, and wanting pages to have excerpts in many cases. I’d say that, that a widget area on the front-page and a feature page widget that could be put in it would be awesome.

If it’s mobile first can it also be built with Flexbox instead of floats? That would make reversing directions on widgets stacking a lot easier via CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site..
- Josh Leuze 11:44 pm on August 29, 2015
  
  Thanks for the feedback Jon! Yeah, widgets aren’t always ideal, but I’ll try to make them as painless to use as I can since we’ve got limited options here.
  
  We’ve had problems with using sticky posts like that too on the WC MPLS sites. having a widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. area for that would be great so that it can easily be swapped out as priorities change from getting sponsors, to selling tickets, to helping people find the location.
  
  I haven’t used Flexbox yet, is it ready for prime time? Are we using it for any 9seeds projects?
  - marktimemedia 3:52 pm on September 8, 2015
    
    Re: Flexbox: sort-of-ready-for-primetime but needs fallbacks especially for IE. Personally I go with a display:inline-blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. solution for most things, and use it as a fallback for any flexbox layouts too.
David Laietta 2:31 pm on August 27, 2015

I agree on the above points, and think that the focus should be on mobile-first for the new sites going forward.

I think that the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas can be alright but agree with @jb510 that they don’t necessarily have to be on specific pages, since Jetpack is an assumption that we can make for the sites, and the widget visibility works well there.

I would suggest WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Orlando as one to look at: https://orlando.wordcamp.org/2015/ The team did a great job in my totally biased opinion this year.
- Josh Leuze 11:54 pm on August 29, 2015
  
  Thanks David, that’s a great point about Jetpack, I forgot that there was an option in there for widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. visibility. We should definitely make as many of the widget areas as possible site-wide and allow people to utilize that to narrow it down if they need to.
  
  Wow, the WC Orlando site does look great this year!
Ian Dunn 9:07 pm on September 4, 2015

Building actual widgets into the theme might be a step too far,

I think you’re probably right for most cases, but it’s always an option to build them as a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, as long as they’re generic enough to be used by other themes.
- Josh Leuze 9:10 pm on September 4, 2015
  
  I’ll keep that in mind as an option!
Andy McIlwain 4:02 pm on September 29, 2015

I want to get in on this. I’ve been responsible for the WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Toronto sites since 2011. Most have been quick hack jobs. Being able to contribute something (however small) towards a better starting point, for Toronto and all WordCamps, would be fantastic.
- Andy McIlwain 6:05 pm on October 2, 2015
  Some early feature requests / stories, as requested:
  - As an organizer, I want above-the-fold widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas on the homepage, so that I can promote key messaging / content / links. (Sticky posts aren’t appropriate and sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. is limited space.)
  - As an organizer, I want more control over Open Graph images on a per-post/page level, so that sites don’t fall back to sponsor images (e.g. hi-res sponsor logos get picked up on auto-shared news posts).
  - As an organizer, I want sponsors to appear across all pages regardless of template chosen, so that sponsors are always visible. (I like using full-width for tickets, schedules, speaker and session listings, but the sponsor logos aren’t visible on there because there’s no sidebar/widget area. Those should be moved to the footer on full-width.)
  - As an organizer, I want to have multiple headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. styles to choose from, so that I have more freedom in customizing the look & feel of our site. (Right now I’m using a background image set via CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. on the header with the title hidden. Not great for UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it..)
  - As an organizer, I want to be able to send out push notifications to attendees who have opted in to receive them, so that we can quickly communicate important updates or changes. (Right now we’re relying on email and telling attendees to check the site.)
  - Josh Leuze 6:14 pm on October 2, 2015
    
    Thanks for your feedback Andy, these are some good ideas!
  - Ian Dunn 10:58 pm on October 2, 2015
    
    I want more control over Open Graph images on a per-post/page level, so that sites don’t fall back to sponsor images (e.g. hi-res sponsor logos get picked up on auto-shared news posts)
    
    That’s pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party territory, but definitely something this team could work on if they want to. There’ve been a couple improvements recently — #502, #1019 — and there’s another discussion currently going for something similar.
    
    I want to be able to send out push notifications to attendees who have opted in to receive them, so that we can quickly communicate important updates or changes. (Right now we’re relying on email and telling attendees to check the site.)
    
    That’s way outside the scope of a theme, but you can post feature requests to make/Community for discussion. Let me know if you need to be added as an author.

Welcome!

Get Involved

Let’s Talk

Learn More

Update on building a new WordCamp theme

Theme Features

Website Examples

Welcome!

Get Involved

Let’s Talk

Learn More

Theme Features

Website Examples

Share this: