Progress update: New WordCamp theme “CampSite 2017”

As announced in a previous post, this year’s 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 team is working on a new WordCamp base theme for the community. We’re calling it “CampSite 2017”. Since the announcement was made, we were able to gather initial feedback (which was primarily positive), solidify and further develop our ideas. I’d like to share our progress with you today to hear your feedback and thoughts.

Wireframes

After we heard your feedback from our introduction post, we made a list with all common pages, components, shortcodes used, etc. each WordCamp site would need. We then created and started refining wireframes of the main page templates (you can click through the different pages by opening the sitemap button on the top left of the online tool).

Homepage:
For the homepage we put the emphasis on flexibility and being able to tease to different content rather than having a very long blogroll (as often seen on WordCamp sites). This allows us to surface important content, feature relevant calls-to-action (like Call for Speakers, Buy your ticket, Call for Sponsors, etc.). We did want to include latest blog posts, but limited the number on the homepage. The layout is created mainly with widgeted areas where we allow for some additional flexibility (see “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 Top 1” + “2”, where you can use one or both depending on your needs).

Attendees page:
We’re working on extending the attendees page 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. to include pagination and a search functionality. Bernhard published a meta post about it.

Speakers page:
On the speakers page we were playing with different grids and types of information to output. Since the event organizers can include different fields / types of information for speakers, they can also decide what to output here. We’ll achieve this by extending the speakers shortcode and will publish a 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. post with all the details soon.

Speakers bio page:
We’d like to include a little more information around speakers on this page. We would find it very useful to have prominent links to a speaker’s website and social profile. We furthermore feel that it would be very helpful to see the talk a speaker is giving would be shared on their speaker bio page, instead of having to click one more time to see their full talk info, as well as a link to the slides and talk video (once available). To achieve this will will create a new page template.

Footer:
Here we’d like to provide a simple footer with just the social links or an extended footer with additional widget areas for menus and other links.

General layout templates:
Furthermore we’ll create the following general layout templates that can be used for any regular content page on the WordCamp site:

The Theme Repo – work in progress

We’re using the latest version of Underscores as a base for the theme and setup a repo on Github for the theme. As pointed out in the previous post, most features implemented in the default theme were widgets areas. As shown in the wireframes, we will add some widget areas in the new theme, but with more specific positions. The new page templates will help with some special pages, like the speakers list and bio page or the homepage. A first version with the new templates will be published next week.

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)

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) will be an important aspect of the new CampSite 2017 theme. We’re planning on implementing A11y standards and once the theme is ready for testing would love the community’s help to do a separate A11y testing phase. We’ve received some feedback from the A11y team about the biggest issues of the current theme and the things that Underscores is still lacking. We will take some A11y changes from TwentySeventeen and integrate them into the new theme and ask the A11y for additional feedback, once the prototype is available.

PS: Style Guide

As mentioned in the announcement posts, the CampSite 2017 theme will be shipped with only minimal CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. so you can use it as a starter theme and add all your own CSS styles if you like. But we will also ship an accompanying style guide with full CSS styling 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.. The style guide can be used as is, as a base for customization, or cloned and made fully your own. We will publish a full post about the style guide, how it works, and our vision for the future very soon.

Your feedback please!

We’re still working on quite a few things and would to hear your feedback about the wireframes, our ideas around the page templates and shortcodes, etc. This project is for you, it will benefit the greater WordCamp community and any organizer setting up a WordCamp site in the future. So we want to hear your voice!

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