Make better theme test data for display in the theme directory.

[whyisjake]

Often, themes are bundled with functions that allow for custom display; featured posts, carousels, and more. These themes often look broken on the theme repo, because they haven't been setup correctly. Would be nice to bundle some xml or something to show what a setup theme looks like.

[Otto42]

How about a more standardized set of preview data instead?

A theme should have sane defaults, and it always is annoying to me when I see a theme demo that looks good, but then you install it and it looks terrible without that pre-made setup.

If the theme-reviewers want to get together and make a big set of previewer-data, then we can load it in there and get it going. But having this on a per-theme basis seems rather unlikely to be useful to users, in the long run, because they won't get that when they install the theme.

What we show in the previewer should be a reasonably accurate reflection of what the user actually sees after installing the theme. If you make the theme look good as a fresh install, then it will look good in the previewer too, since it essentially is a fresh install.

[DrewAPicture]

+1 for a standardized data set.

[whyisjake]

Agree with data, basically, in addition to the content, we see featured images, and some dynamic image sizing to match the varied sizes that different themes could have.

[Otto42]

Dynamic image sizing won't be much of a problem, I can use Photon for it or something like that.

[mordauk]

Better data would help a lot. I always have a really hard time getting a good sense of what a theme looks like with the current data.

[Otto42]

Marking this as needs-patch, because honestly, we can't make this data set alone. Make a test site, create some data. Give us an import file. :)

[shelob9]

@otto42 Is the setup for the theme repo preview documented somewhere? I would like to take a stab at something for this, but don't want to have to spend too much time reverse engineering the theme repo for my test site.

[Otto42]

There's no "setup" to document. It's a normal WordPress single-site install with some custom plugins by us for doing the theme trickery. If you create a normal WP base install, and put a bunch of content on it, then we can use the data from a normal WP data export from that.

[whyisjake]

Could you provide an export of the content to get started on?

[Otto42]

The content we have in there now is kinda crap. I think it started out as an old version of the theme unit test data, and has had a few minor things added to it.

You could start with the latest theme unit test data, but that's geared towards trying to break things, not make them look good or normal.

Think outside the box. What content should a preview site have? Obviously what we have there now is bad, so starting with that is kind of a bad idea, seems to me. I'd start by making a fresh site, and sticking a bunch of various lorem ipsum posts on it, then seeing where you can go with it.

Oh, and I'll be putting a picture of a boat in the first post. Maybe a different boat, but there has to be a boat. Tradition. :)

[SergeyBiryukov]

Previously: ​#WP22343

[jcastaneda]

Clearly we should at least be using some post formats. A recent check showed me that there are about 290 themes that have post format support.

We could use different boats as featured images on some posts.

[Otto42]

MOAR BOATS. :D

[Otto42]

Also, this a really, really easy one to do. Somebody make a test site. Invite the theme review community in. Make a bunch of posts. Lorem Ipsum test posts. Stick some content in there. Argue about it. Make changes. Fiddle with it and stick tons of themes on it for playing with.

I'm actively paying attention to this ticket. When I see good demo data, rest assured, I will steal the heck out of it and redo the preview site with it from scratch. I am waiting on the community for this, and it sounds awesome to me. Anybody can do it. It takes almost no effort. :D

[Anderton]

Otto. Working on it! (based on the things below)

Here is my thoughts in. Personally, I would like to see the themes were classified by default ”categories”. It should not be confused with the theme tags, but rather be a marker for what kind test data to be used (read on).
(Screenshots at the end of the post).

Example:

• 1. New recommendation for theme developers: Add theme data classification when submitting a theme. This is used for what type of data test the theme defaults to.

• 1.1 Themes submitted before this, is classified ”Standard” in the backend (using the ”Standard” test data).

• 2. Theme Classifications is a fixed set of theme data categories.

• Standard v1

Description: The standard classification (!)

Theme data: The theme units test and all post formats (also sliders as this will be a standard feature in Twenty Fourteen). *In addition to this, a ”Data Test chooser” should be accessible for the user with all the other data tests selectable.

---

• Standard v2

Description: The standard classification (!) part 2 (what!?)

Theme data: Same as v1, but with data more like real world use.

---

• Accessibility (Note. Themes choosing this classification should be presented to a secondary theme classification as fallback. This because it only should be themes allowed to use the ”accessibility-ready” tag to be classified with this. When the accessibility-ready review is done and passes, the secondary (used when the theme passed the regular theme review) classification is disabled.

Description: ”Special” Classification (special as in don’t yet know how, or if you can set a classification for this subject).
Theme data: Don't yet know what type of test data that should be included, or if this is even valid).

This is a question that could raised over at Make WordPress Accessible. But the main purpose here is to the test the theme accessibility. This EVEN if the theme is not labeled as ”accessibility-ready”. This could utilize tests (such as WCAG 2.0, things like: ​http://www.accesskeys.org/tools/color-contrast.html etc) or simply show a Accessibility score based on WCAG 2.0 criterias). Also, the user should have the option to turn all CSS and JavaScript off.

---

• ”Visual/gallery/media” (Don’t know what to call it yet).

Description: Themes using ”alternate” post display, such as some photo themes and Masonry-style themes.
Examples (all in the themes directory): Snaps, Visual, Snapshot

Theme data: Even if most of this type of themes uses the post-thumbnail we use a set of more ”real world use” like data (skipping stuff like very long titles, 40 menu items and so on) as the user could check everything else with the ”Standard” Theme Data. Also higher resolution on original post image data (covering some themes with full screen views and wide content width)

---

• RTL

Description: A Right to Left classification

Theme Data: Uses the ”Standard” data with RTL enabled. Could be a option in the ”top menu” also (more about this a bit below)

---

• ”P2/front end posting” (Don’t know what to call it yet).

Description: Themes with P2 functionality.

Theme Data: As this is a type of theme using ”live” content, we use test data showcasing the special functionality of this type of theme. It could have the front end posting forms displayed, but without posting functionality (this should also be stated).

---

• Minimal

Description: Minimal content

Theme Data: No post formats, post-thumb functionality, galleries, photos or any other feature. Just text content (ipsum no. Project Guteberg, yes.).

---

• Others: BuddyPress, WooCommerce, WP E-commerce etc.

As these type of themes uses plugins, or the plugin just adds functionality to themes we do not add special theme data for this. However, when a user is testing a theme tagged with i.e. BuddyPress or stating in the theme description it’s a WooCommerce (or other) theme, the user will in some way ”warned” about this when pressing ”preview theme”.

---

3. Add a button/link below ”Preview” or in the description (styled) with ”Preview on Theme Author Site” (or something like that, but shorter). When clicking that button, the user will be taken to a static page stating that the user is leaving WordPress org and *input legal stuff about 3rd party links* nor can WordPress org not protect against scary mutant kittens that may or may not be on other sites. Sites like Deviantart does this what i can recall. Also (not on topic) a more ”plugin”-like theme page. I know that some personal branding ala premium theme sites gonna increase the popularity amongst theme developers and users alike.

4. *Instead of show the theme preview in a modal (that one does not always work optimal), we just link to the preview and using a top menu bar like most ”premium” theme sites do, but better. This top bar could be include the menu for the data tests, download link, link to the theme author homepage and a ”back to the theme info” link (and a disable button). It should’t be in the way or conflict with the theme functionality.

5. Theme Classifications should not increase the workload for reviewers or theme authors.

I believe this could really set the standard. Also, it should also ”lure” more people looking for free WordPress themes. I know people (not fact, just observation) that don’t use WordPress org for themes because ”the themes sucks!” solely based on the theme preview. The test XML-files could also be posted just like the Theme Unit Theme Test Data.

Note that the ”classifications” (or whatever it should be called) listed is just examples. It could be less, or it could be more (Video, audio etc).

I haven’t thought about the actual technical implementation, just the ideas.

Cheers! And keep up with all the good work everyone!

Screenshot 1 is here (​https://dl.dropboxusercontent.com/u/17959832/screenshot-2.jpg).
Screenshot 2 here (​https://dl.dropboxusercontent.com/u/17959832/screenshot-1.jpg).
And at last Screenshot 3 (nevermind the styling, it’s just concept) (​https://dl.dropboxusercontent.com/u/17959832/screenshot-3.jpg)

[Frank Klein]

Thanks @Anderton for putting this great reply together. I think that ultimately going in a similar direction would be the ideal case.

However in the mean time, everybody is still stuck with the old data, so here's an XML with some new one. That can make things a little better right now.

[Otto42]

This is on hold for a little while until we can deal with some security issues surrounding it, handling https issues, etc. But it is being worked on.

[melchoyce]

Any way we can start using @Frank Klein's new demo data with the new theme repo?

[Otto42]

Yes, I'll look into what it will take once the conversion is done.

[melchoyce]

Great, thanks Otto!

[Otto42]

I have a test site set up with the new data, and I'm working on it now. Need to figure out some additional database configuration though. Also looking at the plugin that powers the change to see if we can solve some other issues with it too.

[ZaneMatthew]

How about taking the lead WordPress(com) does?

For example: ​https://espieddemo.wordpress.com

[Otto42]

I have created a test site using the data provided by Frank in this ticket. You can find it here:
​http://ottodestruct.com/democontent/

If anybody wants to help flesh it out before we make a switchover, PM me on Slack and I'll give you a username and password.

[melchoyce]

I've made some updates:

• More featured images
• An audio playlist post
• A post with a tweet embedded (do we want more embeds previewed?)
• Updated a post to show headers and paragraphs together

Some suggestions for further improvement:

• Display a primary menu (right now the menu in the sidebar is part of the monster widget, not a menu)
• Create a "social" menu with facebook/twitter/g+/whatever links and show it if a theme has a social menu area

[atomicjack]

I find lots of themes that look great, but as soon as you install one and activate it, it looks awful. Changes are needed.

[melchoyce]

Hey @Otto42, how's this coming along?

[Otto42]

​http://ottodestruct.com/democontent is still available for anybody who wants to help contribute content. I have not had many people ask for access to help out with it (only two, to date).

If we're happy with the current content, then we could push it into the previewer as is.

[moonomo]

May be it could be pushed as is- it looks much better than current live data-set.

In the future if there's more people interact and give feedback based on the push, may be there could be another live update.

[melchoyce]

@karmatosed Look good to you?

[karmatosed]

Looks good to me. To go with all the boat comments.. ship it :)

[Otto42]

Okay. This will need to wait until I return from WCUS, but it's on my shortlist for next week.

[ocean90]

It looks like the site has only one comment at the moment. I think it should include some nested comments and pingbacks too.

[melchoyce]

Replying to ocean90:

It looks like the site has only one comment at the moment. I think it should include some nested comments and pingbacks too.

Good idea.

[dd32]

We should make sure that TwentySeventeen looks somewhat good, that probably means adding a Video Header to the data too.

@Otto42 Can you try trialing TwentySeventeen on ​http://ottodestruct.com/democontent/ ?
Would it be possible for you to create a wxr export of the content too?

[poena]

Is this still the direction we are going in or are we going to allow theme authors to include their own demo data, as briefly discussed during WCEU?

[obenland]

Replying to Otto42:

​http://ottodestruct.com/democontent is still available for anybody who wants to help contribute content. I have not had many people ask for access to help out with it (only two, to date).

If we're happy with the current content, then we could push it into the previewer as is.

@Otto42 when you get a chance, would you mind doing that?

[Otto42]

export of ottodestruct.com/democontent/

[Otto42]

Attached the XML from the export. Will look into updating that content.

[poena]

Any chance this can be refreshed and added in time for the new editor and the new default theme?

[whyisjake]

Looking back at this for contributor day at WCUS 2018.

[kjellr]

In case it's useful, I've attached the XML for the Twenty Nineteen theme demo. 👍

Demo: ​https://2019.wordpress.net/
XML: twentynineteen-demo-data.xml​

[poena]

xml + images

[poena]

​https://themepreview.home.blog/
The demo site is missing the comments, and wordpress.com strips all the form elements for some reason.

[dingo_d]

We have two repositories (which @poena maintains atm)

​https://github.com/WPTRT/preview-content
​https://github.com/WPTRT/theme-unit-test

The end goal is maybe to have the ability to switch between multiple layouts based on the tags in the style.css and/or readme.txt (if the theme says it supports shop there could be a dropdown for choosing this layout).

We would also like some input from the design team about the layouts (some examples of layouts built with core editor would be great).

I've also created a user stories that show what are the problems faced and the acceptance criteria needed to resolve this

---

User story no. 1

As a web site owner, that is running on WordPress CMS, I would like to easily get the same demo data on my site as is on the previewer on wordpress.org, so that I could get inspirations on how to structure data on my site.

Acceptance criteria

Create a demo data with good generic layout (.xml file)
Set up that demo on wordpress.org previewer
Offer that demo on theme review team's github repository
Link to that repository in theme review team's pages (blog, handbook and theme development handbook) so that user can find it

User story no. 2

As a user looking for a WordPress theme, I would like to see different layouts applied on themes I'm browsing, so that I can choose the theme that best suits my needs.

Acceptance criteria

Create multiple different layouts with different images (business, travel, construction, health etc.)
Set up the previewer so that a drop down appears from which a user can select different layout
Offer those demos on theme review team's github repository
Link to that repository in theme review team's pages (blog, handbook and theme development handbook) so that user can find it

User story no. 3

As a WordPress theme developer, I would like to have the ability to upload different demo data, so that I can see how my theme will look like on the wordpress.org previewer.

Acceptance criteria

Offer those demos on theme review team's github repository
Link to that repository in theme review team's pages (blog, handbook and theme development handbook) so that the theme developer can find it and use it while developing

User story no. 4

As a WordPress theme reviewer, I would like to have the ability to upload different demo data, so that I can confirm that the theme will work properly while set up locally and on the wordpress.org previewer.

Acceptance criteria

Offer those demos on theme review team's github repository
Link to that repository in theme review team's pages (blog, handbook and theme development handbook) so that the theme reviwer can find it and use it while reviewing the theme.

---

We should plan actions, and open a new ticket to resolve all the issues regarding these stories.

[dingo_d]

At the triage meeting, we learned that the problem of the current previewer is a bit bigger than what we initially thought.

We'll have to put this ticket on hold for a bit until we decide what the next steps are.

One option is to build a new previewer, but we need to consolidate on this and make a concrete proposal.

[SergeyBiryukov]

Replying to dingo_d:

At the triage meeting, we learned that the problem of the current previewer is a bit bigger than what we initially thought.

Has this been resolved in comment:18:ticket:395? What are the remaining obstacles here?

[dingo_d]

The remaining obstacle is that the reviewer is located on a different server, and from what we know it's not on svn and we have no access to it. Also, the way it's set up is totally custom so we'd first have to know what and how it does what it does and only then could we try to work with a new setup.

Since TRT has no access to systems whatsoever we really have no way to influence this 🤷🏼‍♂️