Create Tours for Make P2s

For GlotPress and thus translate.wordpress.org , Polyglots contributors @ spiraltee and @ amieiro , with the help of @ piermario and @ lidialab (thank you!), created a tour that is a bit different than tours that you’d usually encounter . Often, tours pop in your face when you visit a website for the first time. This tour indicates its starting point using a glowing dot. You can just ignore it (for now) if you are not interested.

During the tour, that element of the web page will be highlighted like this:

Since the Polyglot contributors got good feedback about this tour and its potential applicability to other areas of Make WordPress, they then collaborated with Meta Meta 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. contributors @ psrpinto and me ( @ akirk ) to convert this tour into a dedicated plugin, simply called Tour , and added an easy way to create such tours (similar like you might know the Inspector of browser developer tools).

In order to restart a tour that you already completed (or dismissed), and for better accessibility Accessibility 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 ) , there is also a Masterbar menu to start the tours that are visible on the current page:

There is also a shortcode Shortcode 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. and an “Available Tours” Gutenberg Gutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ block Block 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. that allows you to embed the list of tours in a place of your choosing on the website so that there is also an additional path of starting a tour for people who are not logged in (and thus don’t see a Masterbar).

Demos

To demo this, we created two videos, one to show what it’s like to go through a tour, and one to show how to create a tour. Finally, a screenshot to show what updating a tour looks like.

Taking a Tour (Video)

Creating a Tour (Video)

Updating a Tour (Screenshot)

Also note that tours are a custom post type Custom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. with revisions Revisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. , so you can undo any changes. While creating, testing, and editing a tour, you can keep it as a draft so that it won’t be visible to users who cannot see drafts.

The Tour plugin is not yet in the plugin Plugin 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 directory but you can download the ZIP file from Github and install it on any WordPress site.

On Make WordPress , we have activated the plugin on the Meta and the Polyglots P2 P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/ . and we’d be happy to activate it on other Make teams if they want to use it on their own P2 for whatever they feel it could be useful.

Accessibility

I’d like to give a special invitation to the +make.wordpress.org/accessibility/ team to try the tour and let us know which improvements we’d need to make to make it more accessible. We think that an important aspect to start with is that it doesn’t open up automatically and gets in the way of people who were trying to do something different in the first place. The underlying driver.js library had in the past made some strides to make it accessible and per suggestion from @ joedolson , we have added alternative ways (such as the Masterbar or Gutenberg block) to start tours.

Try It On this P2

We have created a first tour here on the Meta P2 (see the logo in the blue bar at the top of the page, or start it using the Masterbar). It is just a very quick demo, we’ll probably expand it in future. You can take it to get an idea of how such a tour could work and if you’d like to discuss with your own Make team whether you’d like to try it out as well. Please reach out in the comments!