Welcome to the MetaMetaMeta 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. Team!
The Meta team is responsible for maintaining and managing WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ websites. Our work is mostly done on the meta trac. If you see a bug, file a ticket!
On Wednesday, October 18th, we will update the WordPress Showcase as part of the ongoing visual refresh of WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.
We began this project last year and have continually iterated on the initial design throughout 2023. In the past few months, a team of contributors has worked hard across Figma, GitHub, and the new #website-redesignSlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel to get Showcase v2 ready for launch.
The Showcase should be a natural starting point when a visitor arrives on WordPress.org and wants to explore what WordPress can do. It should inspire and demonstrate what’s possible, from personal blogs and portfolios to online businesses and enterprise-level sites. The Showcase should be instrumental in answering the question, “Why WordPress?”
Achieving this goal begins with an update to the design and structure of the site as well as the return of Showcase as a top-level navigation link (handled separately).
These are just the first steps. Feedback and ideas for future iterations are encouraged. Please comment below or raise an issue on GitHub.
Design
The new Showcase design follows the general mold of the current Showcase while overhauling the aesthetics and improving the user experience. It emphasizes bold visuals and a more dynamic browsing experience through tags and categories. Individual site pages now include desktop and mobile screenshots, while the site introduces an improved layout on mobile devices.
A diversity of websites is presented in this initial redesign, from Fortune 500 companies and celebrity fan sites to small boutique businesses and artist portfolios.
This design also paves the way for future iterations. Some ideas include spotlighting popular use cases and introducing more engaging content like “site of the month.” The possibilities are endless. What would you like to see?
Development
While the new design is the most apparent change, Showcase is now powered by blocks. Specifically, it’s a custom child theme that sits atop the WordPress.org parent block theme. This structure allows the site to take advantage of CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. functionality like Group and Query blocks as well as custom blocks explicitly built for WordPress.org.
The Showcase also introduces new blockBlockBlock 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.-based functionality and several components that will be used elsewhere on the WordPress.org network. Improvements, such as the standardization of layout and spacing variables (#105) and the new Query FilterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. block (#441), will make it easier to update other areas of WordPress.org to blocks.
Content
This iteration of Showcase has primarily focused on design and development. That said, some content work was done to ensure all sites in the Showcase are up to date.
For launch, 101 sites have been added to the site, many of which were brought over from the current Showcase, or had been submitted but were never actually added. This number will grow with new submissions.
Earlier this year, two Make posts were published regarding the content moderation and submission guidelines for Showcase. You can review both here:
Moderating submissions and maintaining the Showcase takes a significant amount of contribution hours. As a result, there have been times in the past when the Showcase was left somewhat neglected.
Looking ahead, we need to streamline the submission process as much as possible. Submissions will likely always require manual review, but the rest of the process should be automated where possible. As an example, automated email notifications are currently being explored (#223). This work will take time, but should not impede the launch of Showcase v2.
Thank you to everyone who contributed to this revitalization of the WordPress Showcase, whether in Figma, GitHub, or in the #website-redesign channel in Slack. As with all changes to WordPress.org, this is just a single iteration with many more to come in the future.
If you would like to propose a change or report an issue, please do so in the wporg-showcase-2022GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository. Also, make sure to join the #website-redesign Slack channel if you are interested in additional updates coming to WordPress.org and want to contribute.
As part of the ongoing visual refresh of wordpress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, design and layout changes introduced in A refresh of WordPress.org/Showcase have been published to the showcase today 🎉. These changes align with the new design direction already implemented on sections of wordpress.org. The design will continue to be applied to sites over the coming months.
Here’s a brief look at some of the visual changes:
Additional changes include supplementary metadata, simplified submission criteria, improvements to legacy content, and a much-improved mobile page layout.
What’s next?
This redesign is an important starting point to modernize the Showcase site design and theme code that will continue to be iterated. Additional improvements and optimizations to Showcase will be made in the future, including an improved moderation process. If you have any feedback or find a bug, please open a new GitHub issue.
This post is a community update on the progress and next steps of the WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ website redesign project. Conversations earlier this year led to the current design direction, which has been applied to the homepage and several other sections of the website. In the coming months, additional websites will be refreshed, with a majority of the wordpress.org websites likely updated by the end of Q1 2023.
The main goal of this redesign project is to apply the updated design direction to all websites across wordpress.org as quickly as possible, making the sites visually consistent. Site content will remain largely untouched. As usual, any future enhancements to website functionality can be requested through Meta Trac. Feedback during the redesign is available in individual website GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues (see Development Approach).
The Showcase website will receive a more-significant overhaul of site content and layout, which hasn’t had a significant update in years. Some well-planned past attempts to update the site will help inform changes for this project. Planning and feedback for the Showcase site will be available in a forthcoming Make WordPress P2P2P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. post.
Where We Are
Several sites on wordpress.org have already had the new design applied:
The WordPress Mobile website received a visual update with minor copy edits made to reflect recent changes to the WordPress mobile app.
The Download main page and subpages for release versions and counters were updated to use the new design.
Homepage implemented the new design and copy in August 2022.
The News website implemented the new design in June 2022.
What’s Next
The following sites will be worked on in the coming months. This list is ordered by complexity, not necessarily the order of execution. Many of these sites will be worked on in parallel or redesigned within the GutenbergGutenbergThe 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/ editor, so the frequency of sites launched with the new design should soon increase.
PluginPluginA 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
Photo Directory
Pattern Directory
Most Complex Sites:
Theme Directory
Forums
Showcase
Development Approach
Redesigned sites will follow the approach of the wporg-main-2022 theme, which uses a new parent theme, wporg-parent-2021. The parent theme provides a design and layout library as a starting point for all sites. All work will be done in repositories in the public WordPress GitHub repository.
Once this redesign project is completed, additional website enhancements and future redesigns will be straightforward in that all sites will share a common parent theme. Currently, many wordpress.org themes have legacy functionality built into each theme. This project will allow us to better-separate legacy functionality from the theme.
Communication
Since most sites are not intended to have a complete overhaul of functionality and will be functionally similar to the current sites, batched progress on the redesign project will be announced by the MetaMetaMeta 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. team regularly to keep the community informed. Feedback and team involvement are welcome in the redesign project GitHub repositories, with iterations able to be made based on community feedback. Sites requiring a larger overhaul (such as the Showcase website) will have their own Make posts to discuss the project and solicit community feedback, which is welcome and encouraged!
The Handbooks are slowly being updated to the o2 theme (Breathe). With this upgrade, I’ve been thinking about how we present our documentation, reference materials, etc. While Breathe was definitely refreshing, there’s still some experience issues I need to work through.
CURRENT ITERATION
Right now, the amount of floating menus on the page is too many. When navigating to a Handbook page there’s a floating menu on the left side, and possibly another floating menu on the right side for in-page navigation. This compresses the initial intro of the document a user might be reading causing some confusion with its odd flow of characters.
Current Handbook
PROPOSED ITERATION
I believe we could alleviate some of this by anchoring the left side menu a bit better and structuring these pages to appear more like a true documentation portal. I made a few changes in Inspector within the browser and came up with something like this (b/c of this there’s no mobile version yet):
Handbook
Some PROS and CONS are mentioned in a conversation here: https://meta.trac.wordpress.org/ticket/2389
FEEDBACK
Please leave some feedback here in the comments or on the actual ticket. Everything is helpful. I’m personally struggling with the floating right-side menu. There’s been some good ideas for solutions, what’s yours? If you have a few minutes to take a brief survey regarding the Handbook usage, please do! Handbook Usage Survey
There’s been a lot of positive feedback regarding the new homepage development, and I’m excited to say it’s live! While this is only the first iteration, the plan is to continue design and development to create something truly amazing. This is the first step toward that goal. This project moved quickly in hopes to provide something beautiful for the holidays, and I’m proud of this beginning.
Wow, this is happening fast! During the Contributor DayContributor DayContributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. at WordCampWordCampWordCamps 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. US, the Marketing Team sat down with a project in mind—the homepage of wordpress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. Being that the new design style is making an appearance in various places across the site, there was a desire to reboot the homepage as well. @rosso99, @sonjaleix, @hugobaeta, @brad2dabone, and @matt got together to begin creation.
Sketches were presented and thoughts shared.
Collaboration of sketches
Soon the idea took form and Matt expressed the need to get this project live. While much was resolved during Contributor Day, there was still more to go. The design was kicked of by @hugobaeta, and followed up by me (@mapk) and shared via Codepen Prototype.
Quick View of Homepage
Quick view of homepage
Homepage Mobile View
Some things to note:
This is version 1 – we plan to iterate.
The homepage screenshot section is a fixed background so the user sees many examples while scrolling.
The map will show location pins of all WordCamps and Meetups worldwide.
The quick view does not include the headerHeaderThe 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. and footer which will be present in the final implementation.
What are your thoughts?
Keeping in mind that this is only version 1 and we’re planning on launching and iterating quickly, please share your thoughts and feedback with us. We’re excited to see what you have to say.
With the advent of the new Plugin Directory, I wanted to get some basic user testing in place to help guide UXUXUX 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. decisions. Props to @designsimply for helping me with the tasks, and to @tellyworth for making sure functionality was up-to-par for testing.
In this test, I wanted to observe the user’s ability to easily find a pluginPluginA 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, and verify which metaMetaMeta 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. information helped the user select the best plugin for their use.
Tasks
Find an SEO plugin you think would be the best solution for your website, and talk through the reasons why you’d pick that one
What would be the next step you would take to install the plugin on your site? [Verbal Response]
How was your experience finding this plugin? [Verbal Response]
Locate the Plugin Search Field and search for a plugin that will add an image slider to your website.
Are you able to make an informed decision from the search results page? Why, or why not? [Verbal Response]
If you haven’t already, click on the plugin that you like best to view the details.
Looking at this Plugin Detail page, how do you feel about the content layout and organization? Is there anything you might improve? Is there anything that is unclear? [Verbal Response]
What are the top 3-4 things on this page that influence your decisions when selecting a plugin? [Verbal Response]
Please share your overall experience with this process. Was there anything you’d like to see improved? Was there anything you thought particularly helpful? [Verbal Response]
[1:48] After browsing, user decides to search for ‘SEO’
[2:07] User looks at ratings as a good indicator for which plugin is best b/c other people tried it out and were satisfied.
[3:17] User still doesn’t seem to have enough information to choose a plugin directly from search results page.
[4:21] User clicked to check negative reviews and ended up at older layout for plugins reviews.
[6:11] User is highly influenced by ratings above all else.
[7:14] User checks “last updated” as well at this point.
[8:33] User would download plugin and figure out how to install it. He didn’t see any instructions in the ‘description’.
[9:09] User uses ‘search’ as an option when he’s “stuck”. He prefers browsing first, and then later searches.
[10:23] User found the Plugin Search quite easily but then gets confused seeing another search field above it in the headerHeaderThe 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.. He expected it to be in top right corner.
[12:21] Not enough info on search results page to make an informed decision.
[15:09] User says layout is pretty typical on the Detail page.
[16:10] Bringing negative reviews closer to the top would be helpful for this user.
[16:30] Top 3-4 things this user relies on for selecting a plugin are: 1. Ratings, 2. Last updated, 3. Description/Feature list, 4. Maybe FAQs?
[18:31] Overall experience was “fine”. Easy to find plugins. Providing more meaningful descriptions would be helpful b/c they all kinda looked the same in the short descriptions.
The next revision of the support forumSupport ForumWordPress Support Forums is a place to go for help and conversations around using WordPress. Also the place to go to report issues that are caused by errors with the WordPress code and implementations. design is ready, as we get closer to coding, hopefully by next week! In order to move to the next stage, I want to get these mockups in front everyone to gather comments and feedback. These are definitely preliminary mockups; things can and will change, especially during the implementation phase.
Search is prominent in the blue title bar, which follows the design pattern from the new PluginPluginA 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 and Get page.
3 columned jump points to various popular documentation destinations.
Forums have a grid layout, as seen in the wireframes, but the most recent topic links have been removed. Instead, longer descriptions have been added. The support team can customize these to make it easier to locate the relevant forum and dive into it, without be overwhelmed with text.
Forums page
Forums page
Mobile view
Forum View Notes
Two columns in the table now use icons instead of text descriptions to minimize their width. This should reduce wrapping of the topic title.
Topic/Discussion page
Discussion page
Mobile view
Discussion page Notes
The initial post is given a grey highlight, to separate it from replies.
If the post has been resolved, it’s marked as such and the specific answer is noted with a green checkmark.
Search results
Search results page
Mobile view
Search Results Notes
As of right now, search will be use the built-in bbPressbbPressFree, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org. 2 search, so it will only return forum posts in the results.
If the user doesn’t see an answer or post about their question, there’s a button to quickly move this into a form for creating a new discussion.
Feedback
I’d love some some feedback on these mockups! Feedback on anything is great, but in particular I have a couple of questions:
Should comments from moderators, authors, and plugin authors have a different style than regular comments?
Where should the “All Topics” and “No Replies” links go? Perhaps on the homepage?
Leave your feedback below and let us know what you like and don’t like. 🙂
After looking through the feedback from the initial forum design research, I began to create wireframes to help organize some of these ideas. Forum design is pretty standard across the web, and features don’t vary much either, so building out wireframes proved to be a straightforward task.
I wanted to stick with something basic and build from there. The forums and the topic/discussion pages are simple and straightforward. I worked through some layouts for the Support homepage and played around with the display of content in different ways.
The Homepage
Homepage
Mobile view
I made the search more prominent on the homepage. Rather than diving down into the forum topics, people are more likely to search for their issue instead.
I provided three very prominent sections at the top for the ‘Welcome’ intro, a link to the Codex (documentation), and a third link, possibly to the Support Handbook.
Below those jump points, the forums are separated out and grouped with their 3 most recent topics. This was done to help with discovery and ensure users find the right forum. I determined that, if the topic was popular enough to continue getting activity, then others coming to the Support page might also relate to that topic.
The post tags are moved to the bottom along with other useful links.
The Forum Page
Forums page
Mobile view
The layout comes with the new subnav that’s being implemented on other parts of the site. This includes a search field, and the three main subnav links.
The title of the forum is on the left top with a description under it.
The list of topics in the table below display the topic title, author, author avatarAvatarAn avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name., number of participants, number of replies, latest person who replied with their avatar, and the date.
Below the list, if logged in, you’ll see the form to add a new topic. Otherwise, you’ll see a call to action to login and add a new topic.
The sidebarSidebarA 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. has been moved to the right. Primary content in LTR languages should be on the left, while metaMetaMeta 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. content should be on the right. The sidebar includes: number of topics/discussions, number of replies, Last reply, and last activity.
The Topic/Discussion Page
Discussion page
Mobile view
This page would include a breadcrumb nav to help orient the user to their location given that it’s deeper than two levels.
The title of the forum is below that.
The initial question is a highlighted box which includes the user’s question/title, the user info, and the detail of the question/topic.
The comments are displayed below in a simple layout.
If logged in, there will be a reply form below.
Sidebar includes: number of replies, number of participants, last reply (user), last activity (date), and ‘favorite’ option.
The Search Results Page
Search results
Mobile view
The question is predominantly displayed at the top.
Search results are displayed below with pertinent information like title, desc., author, date, etc.
Pagination
Sidebar includes ability to convert the search query into a proper question (‘Ask Question’ button). Most likely transfer the user to a form page where the user can select which forum this question should be posted in.
Sidebar also includes recent forum posts and additional meta data.
A Call for Feedback
I’d love to hear what you think about the wireframes. Please leave some feedback below! 🙂
As some may have noticed there are efforts to improve the support forums on WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. In addition to the backend changes, this seems like a good time to make some design upgrades as well. To kick things off, I’ve done a bit of research into various forum designs in use online (similar to the web store explorations for the plugin directory).
If you’re interested in the forums, please take some time to review the research here and leave your feedback. What stands out from these examples as something you’d like to see implemented on WordPress.org? Which design feature is your favorite and why?
Feature comparison
Below are some screenshots from each of the forums reviewed.
Non-bbPressbbPressFree, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org. Support Forums
Thank you for your feedback! If there are other forums designs you’ve seen on the internet that should be reviewed, leave a comment here, along with any other feedback you have.
