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:

And the code behind it might look like this:

<div class="cf">



    <ul class="row">



     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <li class="grid-2">

                <?php the_post_thumbnail('thumbnail'); ?>

                <h3 class="title">

                    <a href="<?php the_permalink(); ?>">

                        <?php the_title() ?>

                    </a>

                </h3>

                <p class="date"><?php the_date(); ?></p>

                <?php echo wp_trim_words( get_the_content(), 10 ); ?>

        </li>



    <?php endwhile; endif; ?>



    </ul>



</div>

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.

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.

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.

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.

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.