Justin Tadlock 12:33 pm on June 7, 2019

Proposal: Theme Feature Repositories

If you’ve been following the Theme Review SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel, you’ve probably noticed a lot going on. We’ve been trying to figure out ways to deal with common theme issues. There are many conflicting ideas about how to make the directory a better place. However, as a programmer (like most of us here), I thought it best to approach some of these issues from code where possible.

Therefore, a few of us have been tossing around an idea of creating some standardized packages on the official Theme Review GitHub account for theme authors to utilize in their themes. The idea is that if we can get enough people together solving these common issues, then there’d be far fewer points of contention between theme reviewers and theme authors.

What issues need to be solved?

That’s the real question. We need to identify and make a list of problems that could be solved with standardized libraries.

The idea would be to create several repositories on our 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/ that theme authors could drop into their theme and utilize. It’d mostly be plug-n-play. This would help cut back on in-house code from 100s of different authors that share little in common and make it far easier for reviewers to review themes. It’d also be beneficial to users if things like admin-related interfaces are consistent between themes.

A couple of quick things that often come up are:

Admin notices.
Link to “pro” version in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. (I have an existing library I can transfer ownership).

My question for theme authors is: What packages do you need or what problems do you think we could solve together?

This can literally be any common feature in WordPress themes, not just admin or customizer-related things. Nothing is “out of bounds”. Every idea is on the table right now.

This is an ambitious project. It’d require cooperation between authors and reviewers for the betterment of the theme directory as a whole. It’ll only work if we have buy-in from everyone.

Project lead or co-lead

I’d love to head up this project. It’s something I’ve given some thought to a lot over the last few years. It’s just that today I think more people are open to it. Strike while the iron is hot.

Unfortunately, it looks like my schedule is going to be tight from mid-summer through mid-autumn due to previously-agreed engagements. I don’t want to stick a new project on the team and just walk away when it’s first getting off the ground.

If anyone’s interested in leading or at least sharing some of the lead responsibilities on this, just let us know. GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/., Composer, and general OOP knowledge is probably going to be necessary.

If the team goes ahead with this, I’ll do my best to help get this off the ground in the next few weeks.

Drivingralle 12:41 pm on June 7, 2019

I like the idea to collect things theme authors want to have to make/provide better themes.
Am not sure if the way of providing this as libs to ship inside a theme is the best way to solve that. If so many theme developer want/require a specific feature it would be in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and not in many themes that are hard to patch and maintain.
- Justin Tadlock 1:18 pm on June 7, 2019
  
  Generally speaking, most on the team support the idea of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. handling common features. Unfortunately, the reality is that it could take years (if ever) for a feature to make its way into core. This is even with patches submitted. In the meantime, we’re left with the problem we had to start with–100s of different solutions to the same problems.
  
  So, the question becomes: What can we do to solve those problems today? Not next year. Not five years from now. Today.
  
  The easiest way to do that is to build something. If/When the core leads want to bless a particular feature, they’ll already have an existing project to pull from. Plus, with a standard, we have the benefit of updating our code to provide both forward and backward compatibility if something does happen to get rolled into core.
  
  We could also build automated checks into the submission process to make sure theme authors are using the latest version of a given library, which would help (but not completely solve) the maintenance/patch issue.
  - Drivingralle 1:57 pm on June 7, 2019
    
    Like the idea of getting started and prove the need to make it easier to get things into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
kevinhaig 1:14 pm on June 7, 2019

I think it would be awesome 🙂
Just off the top of my head you may want to consider a couple more:
1) Simple CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. framework
2) Theme Page framework
3) Breadcrumb script
poena 1:29 pm on June 7, 2019

Slider and “sections” that uses existing content.
I wish we didn’t have to, with the new editor and all, but these kind of themes are still being submitted.
Joy 1:50 pm on June 7, 2019

Put some of these into _s. Or use their way of building, since it’s already there.
I’d like to see more use of CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Custom Properties, improvements on the menu walker (which could go into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. perhaps), and a better color picker(which could go into core).
- Drivingralle 1:56 pm on June 7, 2019
  
  +1
- Justin Tadlock 2:11 pm on June 7, 2019
  
  Can you expand on what you have in mind with menu walkers? And, also what sort of project for custom properties? Like a PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php.-based CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. builder that outputs theme mods as custom properties in the head?
  
  I’d love to see Underscores adopt any of the potential repos we create.
  - Joy 1:53 pm on June 12, 2019
    
    I see a lot of themes include the bootstrap menu walker. And a lot of themes have no styling for the default fallback Page menu, because it is different than the default menu walker. I’m proposing that a good solution for getting the two menus working the same be made, and a solution that minimizes the use of JS.
    
    For custom properties, colors are a great example, but also they are great for padding and margins using a range control. The code is so simple if it’s treated as a property of `:root` (since that’s what you need for polyfills to work). But I think it’s time that more themes use them, reducing code and making interactive CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. controls so easy. You can see how I did it in https://wordpress.org/themes/twenty8teen with one tiny JS function for at least 5 different options, and the PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. for the wp_head is not very big either.
- dingo-d 3:08 pm on June 7, 2019
  
  @Joy _s is Automattic product, Automattic !== 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/, it’s better to have the scripts inside WPTRT specific repo imo
  - Joy 1:40 pm on June 12, 2019
    
    I know, but it is used a lot, so the distribution would be better.
Aristeides Stathopoulos 2:33 pm on June 7, 2019
I love this initiative and would love to contribute.
Some notes from me:
- It would be really great if these were built as standalone components, installable via composer
- IMO we should not, under any circumstances build a “framework” for the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., page-options, theme-options etc. Instead we should educate developers on how to accomplish things that frameworks do, without using a framework (yes, I get the irony of me advocating against frameworks). Unfortunately frameworks are mostly used by the wrong people for the wrong reasons.
- +1 for breadcrumbs
- I’d be against pushing things to _s instead of the WPTRT repos. The fact that it’s by Automattic doesn’t mean it’s good. Yes, a lot of people use it so we may want to push things there, but not only there. There should be a single source of truth and that should not be the _s starter theme. It’s an Automattic project, not a community project.
- +1 for CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. custom-properties.. But it would be nice if there was an implementation for backwards-compatibility. IE11 is still used by a lot of people with screen-readers so I feel it’s important to have some kind of fallback implementation. That would probably entail both a JS solution for customizer postMessage and a perhaps a PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. solution that would search-and-replace css-vars in stylesheets? Or even just a JS polyfill if we detect they’re on a browser that doesn’t support custom-properties. Or perhaps none of the above since I’m overcomplicating things and we should ignore IE.
- Off-canvas navigation would be a great idea too.
- A native-like accessible/inclusive mobile navigation (just open any app on a smartphone and look at the bottom nav).
- Blocks stuff. I don’t mean adding blocks, I mean a PHP class for example that shows how to do everything a theme may need to do for a specific 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. (enqueue frontend styles for a block, add variations, add editor styles etc). Right now these are all over the place in docs, having a single class per-block containing all code related to this block would be great. Perhaps it could even be an abstract class and then when necessary theme-devs could create child classes that extend it and override the methods they need to use.
- More inclusive-design coding patterns (buttons/links/css-snippets etc)
- If there is JS in these repositories for the frontend, it should not have any dependencies on things like jQuery etc. Vanilla JS is pretty powerful on its own, there’s no need to load extra libraries.
- Show that it’s not necessary to include font-awesome or any other iconfont just to use a couple of icons. Most themes just include a couple icons from huge icon libraries… Inlining a couple of SVGs would cumulatively save gigabytes for visitors.
- WooCommerce implementations (for example add cart to main nav)
- Justin Tadlock 3:55 pm on June 7, 2019
  I do want to touch on the idea of this being standalone repos. That’s the plan. I don’t want us to replace large frameworks with our own. 🙂
  
  Here’s what I have in mind:
  - Provide an autoloader for those who don’t use Composer.
  - Ideally, packages should be installed via Composer. However, allowing those not comfortable with it yet a way to download a ZIP file and just drop it in would help with the transition.
  - Packages should be small and handle specific use cases.
  - Aristeides Stathopoulos 7:11 pm on June 7, 2019
    
    Makes sense to me 🙂
- dingo-d 4:50 pm on June 9, 2019
  
  Maybe it would be good to have one big repo and for every feature there would be a subpackage (something like babel has)?
- Joy 2:03 pm on June 12, 2019
  
  +1 for CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. custom-properties.. But it would be nice if there was an implementation for backwards-compatibility. IE11 is still used by a lot of people with screen-readers
  
  There are two parts to this: front end and back end. I code mine with a polyfill for the front end, and it works great. That same polyfill sort of works in the back end, but really I’m not too concerned about the theme options being accessible by screen readers because someone who can’t see should not be setting theme options, which are about design (how it looks).
  That brings up the point about which browsers to target. WP has made its choice, and each theme can make a different choice. If the code has comments about which browsers are accommodated, that helps future users.
Vova Feldman 5:40 am on June 8, 2019

I’d like to learn more about the lead position – what are the requirements, responsibilities, and the typical time that needs to be allocated to do the job successfully.
- dingo-d 4:53 pm on June 9, 2019
  
  Hi, have you read this post by Josepha Haden? https://make.wordpress.org/updates/2019/06/03/team-lead-interest-post/
  it’s a good start 🙂
- Justin Tadlock 8:42 pm on June 10, 2019
  
  It’s hard to say how much time because this is something we’ve never done before. The more involvement from theme authors we get, the less work/time required by whoever’s leading it.
  
  But, generally speaking, it’s deciding what repos to create based on theme author and reviewer feedback, which the team could also help decide on. Then, seeing that any given repository gets coded.
  
  Someone to put together and oversee the entire project or even individual repositories within the project is what we need.
Brad Markle 1:12 pm on June 10, 2019

Somewhat of a side discussion…

What about having a form that reviewers could fill out after finishing a theme review. One section of a form could be a list of reasons the theme failed to pass review.

Over time, the results could be tallied and we can see trends and begin to take action. IE, if we see a trend of themes failing because of the screenshot they’ve uploaded, what should we do?

I know there’s a lot of really smart people in the community with great ideas, and if we can find to identify the issues, I’m sure we can get them sorted out.

—-

Justin’s post here seems to be trying to solve one of those problems by “creating some standardized packages”… I think it’s a good idea. There’s lots of themes already in the repo with these features implemented, and that existing code has probably gone through a few rounds of bug fixes and updates…

What if we created an information page showing existing libraries that are already included in various themes and that pass the theme review guidelines?
- Justin Tadlock 8:50 pm on June 10, 2019
  
  There was a trend post we done once that tallied up all of the common reasons for closing a theme. It’s somewhere back in the archives. IIRC, it’s the same issues we have today–number 1 being escaping data on output. I doubt much has changed. It wouldn’t hurt to use that existing data to make some informed decisions.
binarymoon 7:43 am on June 11, 2019

Have you considered making a Jetpack style pluginPlugin 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? I like the idea of having all the functionality in one place so it can be easily updated, and then it would work across multiple themes without requiring constant updating.
- Justin Tadlock 12:29 pm on June 11, 2019
  
  The problem with the pluginPlugin 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 approach, which has some advantages, is:
  
  1) WordPress has no dependency system.
  
  2) The TRT doesn’t allow you to require plugins for a theme to run.
  
  Making the plugin required would be necessary with some packages. There could be foundational theme features that the theme couldn’t run without.
  
  I also think it’d be a lot harder to get a bigger plugin launched than starting with a single, small package or two. For example, let’s start with a simple admin notice system and start getting theme authors to utilize that. Accomplishing a small goal can help move us onto the next stage.
  - binarymoon 9:28 pm on June 11, 2019
    
    Themes can recommend plugins though right?
    
    As long as the pluginPlugin 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 and theme are coded well then there’s no reason it would be required. All of my themes support Jetpack currently, but it’s not required for them to work.
    
    Using a plugin would also make it easier for users to update the code. If a security flaw was found in one of the systems then updating a single plugin would be a lot easier than getting all the developers who included the code to update their themes.
    - Justin Tadlock 9:48 pm on June 11, 2019
      
      That would work for components that are optional. However, it won’t work with components that are foundational.
      
      For example, an autoloader package for theme authors not ready to make the jump to Composer. The theme wouldn’t work at all if it depended on that autoloader for loading classes.
      
      On mobile now, but I’d be happy to chat about it more in depth.
      - binarymoon 8:29 am on June 12, 2019
        
        Interesting. I don’t use an autoloader so that’s not something I had considered.
        
        There could be a features pluginPlugin 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, AND reusable code libraries.
        
        I’ve been considering making a Jetpack style plugin that doesn’t rely on wordpress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/. Not something I want to profit from, pretty much for the reasons you have outlined in your post. To standardize development and reduce code duplication and effort. If it was a community project it would be ever better 🙂
vlad.olaru 1:47 pm on June 11, 2019

Hey Justin,

Great initiative and would like to help. Over the past year or so, me (as part of Pixelgrade) have been trying to build our themes in a more modular way both in terms of functionality but also in terms of the markup various components use and style.

This is what we’ve come up with: https://github.com/pixelgrade/components The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. of it all is in the base component

And here is a boilerplate theme with the components in use: https://github.com/pixelgrade/boilerplate

On some things, we may have taken things too far, or too specific for our own thing, but maybe there are ways of doing things that would appeal to others as well.

We are still working on the pretty documentation, but I tried to document it as much as possible. Also, bear in mind we began coding this to work with PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. 5.2+ so no Composer and other modern stuff, but we plan on getting there especially since WordPress upped the minimal version to 5.6
Dave Warfel 1:38 am on June 15, 2019

Some ideas (and upvotes to ideas already mentioned):

1. Simple CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. framework
2. Adding alpha slider to color picker (might need to be a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. update, though)
3. Main Navigation: Desktop dropdowns & mobile navigation
— There are so many ways to do this, I’d love to have a super-simple framework with mostly CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., and maybe just a tiny bit of JS. A method that adds a CSS class and/or data-* attributes on click would be (I think) really nice to work with from a design/styling standpoint.
4. Handling excerpts: length, ‘read more’ text, etc.
5. More intelligent & thorough body classes (that more closely mimic the template hierarchy)
6. Properly enqueuing CSS & JS
David Wolfpaw 12:56 pm on June 20, 2019

Late to the conversation, but I would be interested in contributing as well. I think that it’d be a great idea to create some standard scripts and libraries that others can use for their themes.
WebMan Design | Oliver Juhas 3:36 pm on July 12, 2019

Please consider creating a repo for Skip Links feature so we can contribute.
Thanks 🙂

Welcome to the Themes team!

Handbooks and review requirements

Coding standards and plugins

Code Packages

Communication

Proposal: Theme Feature Repositories

What issues need to be solved?

Project lead or co-lead

Welcome to the Themes team!

Handbooks and review requirements

Coding standards and plugins

Code Packages

Communication

What issues need to be solved?

Project lead or co-lead

Share this: