Sonja Leix 11:09 am on December 28, 2016
Tags: campsite-theme ( 4 ), meta-wordcamp ( 19 ), wordcamp sites ( 10 )

WCEU17 design team is building improved and more flexible WordCamp theme

In the Summer of 2015, a survey on WordCamp.org tools has brought up some great ideas and suggestions for a new default WordCamp.org theme. We, the growing design team of WordCamp Europe 2017, this year 6 people strong, want to help create such a new default theme for WordCamps. The ideas voiced in the survey were pretty much in line with our vision for a new theme.

We currently use 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. Base Redux” theme for WCEU17 which is based on a very old version of _s, lacking some of the newer features. The Redux theme also has some major A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues we’d like to tackle.

The suggestions from the survey we felt most strongly about were “serve the many, not the few“, “flexible starter theme“, and “be a theme only“. Using a current version of _s would solve a lot of these wishes voiced by the community.

The status quo

To tackle this, we compared the Base Redux theme with a current version of _s. We wanted to identify feature that were added and might need to be implemented in a new WordCamp base theme. Many added functions in Base Redux are legacy code, including older versions of the custom post types for speakers, session, etc. As those features are now handled by plugins, they are no longer needed in a new theme.

After stripping out all old and unused functions, we identified only some additional 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 used:

Two additional widget areas after the 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.: after-header and after-header-homepage (only on the front_page)
Two additional widget before the content: before-content and before-content-homepage (only on the front_page)
A second 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.: sidebar-2
5 footer widget areas: footer-widget-1 … footer-widget-5
A credit action in the footer (which was never really used)

We do see the need for some additional widget areas and will decide which widget areas make sense to add to the new default theme to add additional flexibility. Having special page templates with no sidebars (full width) or other layout options, could also be very useful additions.

In the comments to the survey, Josh Leuze came up with some ideas for a new default theme. He wanted to introduce a theme with a basic design, so any WordCamp organizing team, with limited design resources, has a good starting point for a nice WordCamp theme. Josh included some of his ideas in the GitHub repo with additional assets for visual design ideas.

A new theme without a bundled design

The Base Redux theme is a starter theme and doesn’t really include any design. When using it you basically have three options, to create a design:

Clone the design of a current WordCamp also using Base Redux
Adding styles to Base Redux using the “Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.” functionality from Jetpack
Adding styles to Base Redux using the “Remote CSS” functionality bundles in a WordCamp.org 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. 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

For the new WordCamp theme we envision to:

Have a solid technical framework with improved A11y using the latest version of _s
Provide more flexibility and ease in setting up the WordCamp site by providing more layout options, page templates, and additional widget areas
Provide modular CSS and style guide (provided separately / not included in theme – more info below)

Other theme improvements

We’re still working on the full list of theme improvements and features we’d like to include in the new WordCamp theme, but here are some of our ideas so far:

More flexible homepage options to share timely announcements, calls for sponsor/speaker/volunteers throughout the life span of an event
Page templates for speakers, sponsors, etc
Paginated archives for post types
Improved A11y

Sneak Peek: Theme CSS and a living style guide

Designing a WordCamp website can be challenging since we can’t modify HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. or JS so it’s important to have a good CSS starting point and documentation to speed things up. Separate from the new WordCamp theme, we’re also creating modular CSS and a living style guide as a convenient starting point for WordCamp organizers to use.

We’ll be releasing it open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. for anyone to use, edit, and fork to create and share new versions. The styles can easily be applied to a WordCamp site using the “Remote CSS” plugin.

We’re hoping this to be a starting point and that the style guide will evolve over time. This will give others the opportunity to release more versions of it for the community to choose from. We understand that not every WordCamp team has design resources, so we want to help with some of the heavy-lifting providing this style guide.

We’ll be publishing more info about this soon. But for now, we’d like to share a few screenshots of what such a style guide would look like:

Style Guide: Color variables and values

Style Guide: Example of components

Big thanks to my team members @kau-boy and @lucijanblagonic who helped me kick this off.

Dear community

We’re very excited about this project and we’d love to hear your feedback! Also read our intro post on WCEU.

#campsite-theme, #meta-wordcamp, #wordcamp-sites

Chirag Patel 11:19 am on December 28, 2016

We are very excited to more help in the community. We would love to more help on 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. design.
jennybeaumont 11:40 am on December 28, 2016

This is such a great, and much needed, project – kudos!
Ian Dunn 2:01 am on December 30, 2016
+1

This is awesome, thanks for all the work you and the rest of the team have put into it 🙂
The suggestions from the survey we felt most strongly about were…

Those were closer to guidelines than suggestions 🙂
I think most of them should apply here too, but there are some exceptions:
- It’s ok for this theme to not have a bundled design, and just focus on providing a solid foundation
- It’s ok if the team is mostly made up of 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. Europe organizers, as long as input is gathered from the rest of the community, and the theme is betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.-tested with several other camps before it’s enabled for all sites.
- Sonja Leix 5:55 pm on January 3, 2017
  
  Thanks Ian, we absolutely want the community to give feedback and share their input. And of course we were very much hoping the community will help betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. test the new theme to make sure it is working and can be release bug free.
  - Ian Dunn 1:11 am on January 14, 2017
    
    Awesome, thanks Sonja 🙂
Ian Dunn 2:08 am on December 30, 2016

Pinging people who participated in the discussion about the “Quinzhee” theme last year, in case they have input or want to contribute.

I’d love to see some discussion about how this new theme can be complementary to Quinzhee, rather than duplicating features.

@jleuze, @robertnienhuis, @cheffheid, @valeriosza, @dnelle, @danielgcarvalho, @brettshumaker, @ryelle, @harbormark, @chanthaboune, @nvwd, @rafaehlers, @davidjlaietta, @dimensionmedia, @iandstewart, @miss_jwo, @topher1kenobe, @georgestephanis, @jb510
- Sonja Leix 10:02 pm on January 9, 2017
  
  @iandunn As I see it, Quinzee is providing a theme for WordCamps that has design included. Something people can use out of the box. It doesn’t include any additional page templates, but introduces some new 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. We will provide more of a starter theme, with more options for homepage layout, additional widget areas, and useful page templates. In addition we’re working on the style guide so 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. organizers can have a style sheet to use as is, customize, or use as a base for their own styling.
  
  Quinzee also uses an older version of Underscores, so there is definitely a benefit in using the latest version in regards to A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and performance.
  - Ian Dunn 1:19 am on January 14, 2017
    
    Thanks for the details 🙂
    
    I’m sure Quinzee will merge the latest version of _s before being submitted, but the rest sounds good to me. Anything related to accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and performance should probably be included in both themes (cc @jleuze).
    
    I mainly just want to make sure that the user-facing features are complementary rather than redundant (where “user” == “organizer” in this case).
    
    A site using Quinzee could still choose to remove the default styles and use it as a starter theme, so I’m thinking more about things like 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 and page templates. It wouldn’t make sense to have two themes with very similar markup/layout. It’d be better to have them each serving different use cases.
    - Sonja Leix 5:16 am on January 14, 2017
      
      That makes sense. Thanks for your input Ian!
Karl Hudson Phillips 2:16 pm on December 30, 2016

This is wonderful. Will follow along and would love to assist in any way possible (now or later)
- Sonja Leix 5:55 pm on January 3, 2017
  
  Thanks Karl!
Jeffrey de Wit 5:21 am on December 31, 2016

Noice. +1. 🙂

And definitely looking forward to seeing where this goes. Additional flexibility on WC themes is very welcome.

If there’s anything on a dev or a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) front I can do, don’t hesitate to let me know (is there a SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel I can stalk?).
- Sonja Leix 10:04 pm on January 9, 2017
  
  Thanks Jeffrey! We’ll start looking at A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) a little closer soon and we’d love to get your help testing and identifying pain points. We’ll also need help testing a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process., when we get to that point.
  
  We’ll be discussing the progress of the theme mostly here on the Community P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/..
Francesca Marano 3:01 pm on July 12, 2019

CampSite is alive and kicking and you can use it in your 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. website