THE WORDPRESS NEWS CORE
FEATURING WORDPRESS COMMUNITY EXPERTS AND THE WP DAILY ARCHIVES

Building a Useful WordPress Code Library

Something I have noticed when I am developing WordPress sites is that I very often find myself coding up the same Loop patterns again and again.

How many times have you developed a magazine style layout with a grid of posts, each with a post thumbnail, title, author, date and small excerpt? I know I have – countless times. It’s like I’ve got my own personal “loop” going on myself.

It might look something like this:

Your typical grid layout

Your typical grid layout

And the code behind it might look like this:

I’ll get back to that in a minute.

Not too long ago, Dan Ciederholm released his Pears WordPress theme. Pears is a pattern library for HTML and CSS. It allows you to build customizable patterns and HTML modules, such as forms or navigation, and browse through them.

On each page, the pattern is displayed at the top, and the HTML and CSS are displayed underneath. It is a clever way to create reusable markup patterns that you may use of on virtually every project you do.

Pears: The Pattern Library built with WordPress

Pears: The Pattern Library built with WordPress

Since then, there have been numerous examples of similar CSS pattern libraries such as KSS, but Pears has really stuck in mind. As it’s hosted on a WordPress install, I thought it might be an interesting thing to fork and extend and incorporate into the WordPress loop.

The Big Idea

So here’s my idea: Build a pattern library that allows users to create their own resuable patterns within a WordPress loop (for instance, a grid of posts with thumbnails, title, date and excerpt).

It is essentially a fork of Pears, and laid out in a similar way, but has a few more options. I have built a very simple prototype, using the example pattern at the top.

Looplet: The Pattern Library built for WordPress

Looplet: The Pattern Library built for WordPress

Here’s how it works: A custom post type is created, and filled with dummy content. Each post page, and pattern, pulls in content from this post type in order to build the Loop, which is called using WP_Query.

The different parameters of this loop are customizable through custom fields on the post (see below). Then, custom PHP and HTML can be entered into one metabox on each post, and CSS can be entered into another.

The Loop can be customized using meta boxes in each post.

The Loop can be customized using meta boxes in each post.

My big question at this point is, is this something that you, the WordPress community, would find useful? If it is, there is much work to be done.

The Problems

My PHP skills are not exactly stellar, and already I have run into quite a few setbacks.

Because the WordPress loop is so complex, the proposed project presents a slew of problems. For one, a custom WP_Query offers many different parameters, and it may be foolish to consider including all of them in a separate meta box on each post page. Another problem is that often code has to go before and after the Loop.

My current solution has been to add more custom fields, but this gets unwieldy very quick.

To make this fully customizable requires many custom fields, and it can get a bit confusing and maybe too robust.

To make this fully customizable requires many custom fields, and it can get a bit confusing and maybe too robust.

Also, because the Loop is pulled in from a Custom Post Type, as to avoid pulling in the pattern posts that are created in the main query, there are severe limitations on what parameters can be used.

For instance, Custom Post Types don’t support custom taxonomies. That’s kind of a big deal, when a lot of custom patterns would most likely want to include categories and other tags.

There is also a slight security concern. PHP data is entered into a custom field on the backend, opening a gateway for malicious attack. This may not be the biggest problem, since this is mostly for developers working locally or own on their own development environment, but it is still a concern.

Error handling is also a problem. Because the code is not contained, if there is an error in the custom code, the page itself sometimes won’t show, and it can be hard to diagnose what the problem is, and if its coming from your code of the pattern, or conflicting code in the theme.

Questions

So, I’ve come to you, the community, with several questions.

  • Do you find this useful? Is this something you would use?
  • Can you envision a better way to accomplish a pattern library?
  • Are there any problems with this project I have not listed?
  • Have you had experience with any of the problems above, and if so, how have you handled them?
  • And perhaps, most importantly, is this a worthwhile pursuit?

You can view the prototype at: http://jayhoffmann.com/looplet

I put the code up on GitHub, but right now it is a bit in disarray, but you are welcome to take a look: https://github.com/JasonHoffmann/looplet

Feel free to email me at me [at] jayhoffmann.com, or find me on Twitter, or leave your thoughts in the comments. It’d be great to hear feedback, suggestions and of course, I would love some help if there any developers out there that think this is a project that is worth a go.

My feeling is that in order for this to be useful, it has to be far more robust, and in turn, may not be all that useful if it is complex. It may be one of those projects that started with a good idea, but isn’t scalable. But, that’s why I’m asking, so please let me know.

  • http://brettshumaker.com Brett Shumaker

    I think this is a really great idea. I think it would also be a good way for beginning WordPress devs to see what other devs are doing with WordPress.

    I’m pretty sure that Custom Post Types support custom taxonomies, though. Maybe I’m wrong. And here’s a good Stack Exchange answer about the sanitization of data

    I do agree that validating all of that input could be a gigantic pain.

    • Jay Hoffmann

      Thanks Brett,

      I suppose your right about the custom taxonomies. I’d just have to set them up in a customizable way and ideally have them autopopulate, I’ll look into that.

      Thanks for the link too. Validating the input seems worthwhile, but the WordPress API is just not set up to handle PHP validation. Mostly because in almost every case, it is a terrible idea. That post should help a lot though.

      Appreciate the words of encouragement!

      • http://brettshumaker.com Brett Shumaker

        Yeah, handling PHP validation seems absolutely awful to try to tackle. Haha. I wonder there’s any site out there that offers an API for such a thing.

  • http://circlecube.com Evan Mullins

    Great idea. I really like the idea of patterns collected in a library like this. I too was impressed when pears came out and built onto it LESS support in a fork. I’d be interested in helping out, but don’t have any real answers to the php issues.

    I’m also curious to building these loop patters using custom post types and taxonomies and fields… to use the library for anything custom it’d have to be added to the site and db, no? That seems like it could turn into quite a bit of work to get extensive ideas into a pattern library.

    Oh and yes indeed CPTs do support custom taxonomies.

    • http://circlecube.com Evan Mullins

      Forgot the link if you wanted to see the LESS additions: http://pears.circlecube.com/ & https://github.com/circlecube/Pears

    • Jay Hoffmann

      That’s definitely part of the problem Evan. That’s why I developed a companion plugin to take care of some of that. What the plugin does is create the custom post type and fills it with content. Right now, it’s just some text and titles, but eventually I’d like it to, when activated, automatically add custom post thumbnails, authors, categories, publishing dates, etc. so all the example content is already laid out and all you have to do is create patterns using that content for inside the loop.

      And to your point, if you wanted to add something custom to the site, all you would have to do is open the Looplet tab in your admin panel and add a little bit of content. It might take some customization, but I am trying to make it as simple as possible. I’d love suggestions on how to change that though!

      LESS/SASS support would be amazing, but I think that’s 2.0 kind of stuff. Thanks for the link though, I hadn’t seen that yet.

      If you want to get involved a bit, you can hop on over to https://github.com/JasonHoffmann/looplet and play around with the code a bit, see if there’s anything glaring and let me know.

  • http://grantpalin.com Grant Palin

    I’ve been thinking of doing something like this – a “snippets” library for useful or interesting bits of code. It seems like a good application of custom content types, fields, and taxonomies. Haven’t really gotten into it yet, but considering integrating it into my in-progress site redesign ideas.

  • wycks

    Having a website or a “form” as a middle man feels somewhat counterproductive for a developer, is the target for this end users? To be honest a custom post type takes about 10 seconds to fill out in most IDE’s that support custom snippets, and also interface directly with revision control like gist. It’s essentially 2 buttons in something like sublime to retrieve a gist snippet and preview in the browser.

    Also there is this: https://github.com/bungeshea/code-snippets ( I started a fork of it to integrate github but have not had the time)

    • Jay Hoffmann

      I can understand how for the experienced developer might find this a little clunky or even redundant. I was kind of thinking that the user for this are beginning developers trying to learn the WordPress API and experienced developers that want to demonstrate code snippets and patterns in an organized way to their teams, or to just anyone on the web.

      I’m wondering, could you explain a little more about the parallels? I see how it would be easy to grab a gist and take a look at it, but being able to customize and easily demonstrate/reuse it seems a bit harder.

      Thanks for bringing that up, you’re kind of echoing thoughts that I had as I was conceiving of this idea, that maybe it is just a little too difficult or clunky for the true developer.

      • wycks

        I like your idea, but leaving the editor is a drawback. Gist has the benefit of revision control/speed but the downside of gist is that you have no visual clues and after a while (years) I end up just forgetting what I have, so it’s mainly used for repetitive tasks. Even so snippets and gist are a real time saver, for example to create a Plugin + CPT: https://www.youtube.com/watch?v=rXnxCHGiJB8

        The gist plugin: https://github.com/condemil/Gist

        The live edit mode looks awesome but it’s not out: http://www.youtube.com/watch?v=UrnB8lZnx4I

        I think that a service or some way to store the full pattern is really useful, especially if it was social.

  • http://mvied.com/ Mvied

    I’m thinking you could use a templating language such as smarty to replace all of the HTML/PHP textareas. Using a templating language would allow you to restrict how much PHP access the end-user has. Smarty allows the end-user to do most everything they would need to do, I’m thinking.

    Recently I used RoyalSlider’s WordPress plugin, and they used a templating language for the contents of each slide. It allowed me to do exactly what I wanted with the slideshow. They had predefined variables to use and multiple predefined slide templates to choose from. You could do something similar with custom post types post content.

    • Jay Hoffmann

      Now there’s a super interesting idea. I’ve never used a templating language, but I’ll have to look into it.

TOP