Beatriz Fialho 3:12 pm on January 16, 2023

A refresh of WordPress.org/themes

As part of a broader project to reimagine the visual appearance, functionality, and other elements of the WordPress.orgWordPress.org The 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, one of the next focus areas is the WordPress Theme Directory. It will soon receive a refresh similar to other pages of the WordPress.org website, such as Showcase or News.

The images above provide a general overview of the site’s main landing page, theme details page, and the theme preview flow.

The refresh brings the Theme Directory in alignment with the vision for WordPress.org, updates the theme taxonomies, and includes improved usability. Additional updates and enhancements are planned in the future, and this iteration of the site focuses primarily on design work while leveraging existing functionality.

Contributors are welcome to provide feedback on this project within the Figma file or the GitHub repository.

#redesign

Tom J Nowell 5:41 pm on January 16, 2023

I see the number of themes shown has dropped from 10 to 8, there’s a strong trend in WP proposals and new UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.’s to show less information both in quantity and detail, but to instead focus on aesthetics. Will it be possible to increase the number of themes per page from 8 to a higher number?

I also see from the designs that if implemented, no themes or UI will be visible when the themes page is loaded until the user scrolls down. Is this an intentional design choice?
- Joen A. 9:57 am on January 17, 2023
  
  10 per page seems fine, I don’t think it’s intentionally limited to 8 for the mockups. Similarly, I think the gray blobs are meant as pattern placeholders, not meant to indicate deferred loading.
- Beatriz Fialho 10:37 am on January 17, 2023
  
  Will it be possible to increase the number of themes per page from 8 to a higher number?
  
  Absolutely, the mockup only shows 8, for space reasons on that collage, but it should in fact show 16.
  
  I also see from the designs that if implemented, no themes or UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. will be visible when the themes page is loaded until the user scrolls down. Is this an intentional design choice?
  
  I don’t think I understand your question, are you referring to the cover below 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. with the big “Themes” word?
  - Tom J Nowell 1:41 pm on January 17, 2023
    
    Absolutely, the mockup only shows 8, for space reasons on that collage, but it should in fact show 16.
    
    That’s good news 🙂
    
    I don’t think I understand your question, are you referring to the cover below 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. with the big “Themes” word?
    
    Not so much that the words are big, but that they push all the content below the fold unless you’re using a desktop monitor or a tall device.
    
    Don’t mistake this as a criticism, I’m curious. Cover screens/pages/sections are a design pattern but I hadn’t seen any messaging that this was a design practice that was being codified and standardised on .org and elsewhere.
    - Beatriz Fialho 3:21 pm on January 17, 2023
      
      The content doesn’t get completely below the fold, and it is adapted to smaller screens. Much like News and Showcase, there’s a characteristic expressive style to the Themes cover that contributes to the concept of recreating different “languages” of jazz throughout the site. So, to answer your question, yes it was an intentional design choice.
Ben Sibley 1:12 pm on January 17, 2023

The rating on the theme page should still show the total number of reviews. There’s a big difference between a theme with a 4.5 rating from 2 reviews VS a theme with a 4.5 rating from 200 reviews.
- Joen A. 3:52 pm on January 17, 2023
  
  Eagle-eye. Would you mind opening an issue in the repo?
KafleG 1:27 pm on January 17, 2023

+make.wordpress.org/themes/
- Carolina Nymark 3:23 pm on January 17, 2023
  I generally like the single theme view.
  - I would very much have liked to see some of the features that have been requested on the 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. tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/.:
  I do not know if a space for the themes readme file -even a link to it, was considered?
  
  But I am struggling a lot with how the main heading on the theme selection page is stretched out across the entire width and how the letters are cut off, because it makes it difficult to read. I find that it is distracting me from the rest of the content.
  
  In the filterFilter Filters 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. on the theme selection page, I am wondering why the apply button is above the check boxes? Unless there is a shortcut somewhere (hidden), keyboard and screen reader users will need to move through all the checkboxes, check them, and move backwards through all the check boxes again to apply the filter?
- Carolina Nymark 3:27 pm on January 17, 2023
  
  Are the style variations no longer going to be visible/previewable on the single themes page?
  - Beatriz Fialho 12:07 pm on January 18, 2023
    
    I would very much have liked to see some of the features that have been requested on the 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. tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/.:
    
    Could you link to the specific trac ticket?
    
    In the filterFilter Filters 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. on the theme selection page, I am wondering why the apply button is above the check boxes? Unless there is a shortcut somewhere (hidden), keyboard and screen reader users will need to move through all the checkboxes, check them, and move backwards through all the check boxes again to apply the filter?
    
    That’s a good point. I’m sure we can discuss a replacement of that button during development.
    
    Are the style variations no longer going to be visible/previewable on the single themes page?
    
    Yes, the style variations will still be visible by clicking “Preview All Styles”: https://cloudup.com/cCgNW6o3sB6
    - Carolina Nymark 4:04 am on January 23, 2023
      
      The most requested features since the last redesign are:
      Multiple screenshots
      https://meta.trac.wordpress.org/ticket/969
      
      Readme
      https://meta.trac.wordpress.org/ticket/215
      Example from the plugins page: https://wordpress.org/plugins/easy-pdf-restaurant-menu-upload/#description
      
      And then we have the available translations and the locale banner
      https://meta.trac.wordpress.org/ticket/1383
      https://meta.trac.wordpress.org/ticket/1864
      
      https://meta.trac.wordpress.org/query?status=!closed&component=Theme+Directory
      - Ben Greeley 6:31 pm on February 8, 2023
        
        @poena Thank you for listing those features. Yes, the 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. team is going to try to address some of those longstanding feature requests as part of implementing the redesign. I’m not sure which ones they’ll address, but I’m sure it’ll be communicated on Make or during a Meta biweekly call.
ElmaStudio 6:52 pm on January 19, 2023

I love the fresh look, sooo long overdue 😍 Thank you so so much for your work Beatriz, really amazing!!!

While we are at it, wouldn’t it be great to make some further improvements. I feel it would be fair for themes to have the same means of promotion on the single theme page as plugins have. Like being able to add an introduction video to the site and image screenshots maybe. That would help to be able to promote our work so much.
- Anariel Design 5:20 pm on January 28, 2023
  
  Thank you Beatriz for your great work :). Soo happy Themes page will be finally updated :).
  
  I agree with Ellen and Carolina, having a better preview of the themes is something we really need. If this can’t be a live preview than screenshots and possibility to add introduction video like plugins have would be great. This is something themers are waiting for sooo long. Plus if we want to show users what it can be done with the theme, we need a better preview of the features.
ElmaStudio 6:57 pm on January 19, 2023

I would also love to see a Featured BlockBlock 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. Theme section about the main theme loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.. So that the new way of building with WordPress can be highlighted in a more prominent way, and we really promote that and say ‘Hey, we have been working on something new for you, go have a look’.

Additionally, I also feel the filterFilter Filters 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. could have an improved design. Other platforms add the filter in a 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., so it’s more prominent to see directly when visiting the site. I feel the filter option is the most important feature to find the right theme for your website, and right now unfortunately the filter option is not very highlighted.
- ElmaStudio 7:00 pm on January 19, 2023
  
  Especially the filterFilter Filters 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. by subject like ‘Blog, E-Commerce, Portfolio, News…’ should be visible by default. Most other theme directories do that, and it helps users to find what they are looking for faster.
  
  We are also missing a agency/business theme subject imo.
  - ElmaStudio 7:03 pm on January 19, 2023
    
    My feeling would be to explore a design with a left-aligned 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. (that switched on top for smaller screens) with a search bar on top and the Subject categories below would be ideal.
    
    I also feel like we could switch to a three column layout instead of two, at least for bigger screens, just to give the users even more themes to preview.
ElmaStudio 7:05 pm on January 19, 2023

1+ for having the title ‘Themes’ smaller. Let’s show the visitors the designs as fast as possible, as that is all they want to see, right.

I don’t see the need to overshadow that with an oversized title, as it does not add any benefit to the page for users imo.
ElmaStudio 7:23 pm on January 19, 2023

I feel like I have a million ideas for that, I will provide a bit more feedback later on and also comment in Figma. Love that we finally get a new design.

I also feel it would be so helpful for theme authors to have a way to provide a documentation or link to a documentation. It’s so common for themes to have that and I for instance always like to do video tutorials for each theme, but there is no way to show them or provide a link to a documentation file on WordPress.orgWordPress.org The 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/.
- Beatriz Fialho 4:52 pm on January 20, 2023
  
  I appreciate the detailed feedback!
  
  The theme directory redesign is following the existing styles outlined and even previewed in past explorations, so the expressive jazz cover is part of a higher level concept thinking for all the pages of the site. I opened up an issue where we can expand on the title and cover size: https://github.com/WordPress/wporg-theme-directory/issues/8
  
  Regarding your other suggestions, would you mind opening up issues for them in the same repo? I feel like it’ll be more helpful especially to get some technical feedback regarding what’s feasible and what’s not.
  - ElmaStudio 9:16 pm on January 20, 2023
    
    Oh yes, of course, I will comment on the issue and open new ones for the points I made. Thanks so much for all the work you put into this, it’s really exciting and I now really want to add some of our latest works to the theme directory 😍
Tammie Lister 11:03 am on January 21, 2023

First, congratulations for all the hard-work and thought that has gone into this by those working on it. This has been a long overdue overhaul and I just know is very welcome.

Overall, I love it and particularly like the strength but simplicity it delivers. The only ponder I might have is around how it switches from dark to light so drastically, but I think that can be considered a stylistic choice and mostly feels unexpected as not used to it right now. Dark for a portfolio/showcase (which this truly is becoming now) makes sense, so perhaps considering how that can be soothed into the other areas could be a later iteration.

I think it’s a great step forward so fully appreciate it and would love to see it shipped as soon as possible – can’t wait!
Gobinda Tarafdar 4:46 am on January 23, 2023

Thanks a lot for starting this project. Kudos to your effort and work. After looking at all the pages, I think we should add the author’s name beside the theme name to make it more user-friendly. And the author’s name must be clickable and the link will redirect to the author’s all-theme page. Is it possible? Here is the ss. https://ibb.co/z690Zgy

It will help to find the author-wise themes.
ElmaStudio 3:44 am on January 24, 2023

I wonder if was an earlier call for feedback we missed, especially theme authors themselves, as this affects us? The Figma design file already looks so finished. It would have been great to provide earlier feedback.

As improving the way visitors find the theme design for their website is our goal for the directory, especially promoting to use blockBlock 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. themes to visitors.

So I feel more visible and easy to understand filters e.g. in a 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. (as of the design explorations already shows) would help to reach our goal tremendously.
- Joen A. 9:38 am on January 24, 2023
  
  Even if the design shared here has gone through multiple iterations, it doesn’t mean your feedback can’t or won’t be addressed. Especially wayfinding and sorting feedback is useful. And the way I see it, in this state of design, it provides us with numerous puzzle pieces to shuffle around to address points.
  
  In that light, this is a call for feedback. Nothing has been built yet outside of Figma, and hopefully what’s there can help us explore a variety of solutions for any concerns you have. I’m especially interested in hearing your thoughts around how to better surface blockBlock 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. themes and their features; is it valid to tag a block theme “no-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.”, when a sidebar can be two clicks away using the site editor? Outside of feedback in GitHubGitHub GitHub 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/ and Figma, you can also duplicate the Figma file and make your own edits and suggestions.
  
  Finally, I would hope we don’t leave the directory as-is at launch. I would expect the GitHub to remain open to address things as we learn them, even post-launch.
  
  A slightly earlier mockup was shared in the bi-weekly design-share posts.
  - ElmaStudio 10:50 pm on January 24, 2023
    
    Oh, great, that is promising to hear, as I feel lots of work can still be done in regard to highlighting blockBlock 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. based WordPress.
    
    From my understanding, that should be our biggest focus, especially in this 23, right? As the site editor finally looses the 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. label, we should advocate for block themes to be adapted by a broader audience. Especially as they form the key to all the great new site editing features the GutenbergGutenberg 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/ team has been working on so hard.
    
    I will comment and create further issues and yes, I love to work on alternative design proposals in Figma as well. Thank you for providing these options.
ElmaStudio 3:47 am on January 24, 2023

In the design files it also looks like a visible ‘blockBlock 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. theme’ filterFilter Filters 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., that we worked so hard on to get at all, is missing.

Is this intended? How does the design tackle the goal to promote block themes and block based building in general?

I feel it has to be a main goal in 23 to invite visitors to use block based WordPress products.
- Beatriz Fialho 9:42 am on January 24, 2023
  
  I echo Joen’s words.
  
  In the design files it also looks like a visible ‘blockBlock 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. theme’ filterFilter Filters 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., that we worked so hard on to get at all, is missing.
  
  The Block Themes filter is not missing, it has been repositioned and reorganized: https://cloudup.com/clB3uWOMSSh
  - ElmaStudio 10:27 pm on January 24, 2023
    
    The reason for the blockBlock 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. theme filterFilter Filters 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. was to make block themes be more prominent. In this design proposal, we are going backwards and hiding the possibility to filter for block themes first behind the filter button.
    
    Next, this to me overwhelming number of filters and block themes being on the same level as classic themes does not speak: ‘Hey, try our new block themes and use the latest and greatest WordPress has to offer’ to me, or am I wrong here?
    - ElmaStudio 10:34 pm on January 24, 2023
      
      So yes, you are right, it’s not missing, but it has lost it’s more prominent place that everyone who is interested in promoting blockBlock 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. based WordPress has been advocating for. And from my point of you, everyone should promote block based WordPress, otherwise I wonder what we have been building on the last 3+ years.
      
      I’m also very sorry for being so direct. I’m a designer myself, and I really understand that this is not the designer’s fault. From my feeling, there has been communication missing in order to get everyone on the same page before putting any work into the design.
      
      I’m just a bit tired to have to advocate for block based WordPress myself, as I don’t understand why we are not all together working towards promoting the tools we have been building and working so hard for.
  - ElmaStudio 5:35 pm on January 25, 2023
    
    Now I feel like I might just misread the filterFilter Filters 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. settings from the design screenshot? It’s hard to tell, but if blockBlock 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. themes are the default filter, I will take back everything I said. I would love that to happen, this would be so beyond amazing!!!
Channing Ritter 4:08 pm on January 25, 2023

Gorgeous work!! The all dark landing page is striking and feels very fitting for this section of the site, can’t wait to see this live 🤗
Anariel Design 5:33 pm on January 28, 2023

Thank you Beatriz for your great work :). Soo happy Themes page will be finally updated :).

I agree with Ellen and Carolina, having a better preview of the themes is something we really need. If this can’t be a live preview than screenshots and possibility to add introduction video like plugins have would be great. This is something themers are waiting for sooo long. Plus if we want to show users what it can be done with the theme, we need a better preview of the features.

Theme Homepage link is not going to be available anymore? This was the only place where we could offer a better theme preview, description and more info about the theme :(.
- Anariel Design 6:03 pm on January 29, 2023
  
  One more thing, Commercial Themes link we have now at the top right is moving to the filterFilter Filters 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. or I’m missing something?
  - Ben Greeley 6:36 pm on February 8, 2023
    
    @anariel-design The commercial themes link is still in the top right of the homepage (see screenshot #1). One of the considerations for the new design is the recently-announced categorization for themes that will allow theme authors to designate themselves as Community or Commercial themes. Filters have been added to be able to search for specific types of themes, but the commercial themes page will remain intact for now (though I’m curious of its continued usefulness since commercial themes can be searched now from the directory).
    - Ritik 6:30 am on March 30, 2023
      
      Overall, i really like it. Thanks for sharing this informative post.
Ritik 6:28 am on March 30, 2023

Overall, i really like it. Thanks for sharing this informative post.