WordPress Developer Tools

While this didn’t always work out as expected, we’ve tried to push for these goals to the best of our abilities and tried to “Do The Right Thing” as often as possible. Out of our efforts we ended up with two cool projects: BareSkin – a WordPress Starter Theme and Custom Field Creator – a easy to use class to create Meta Boxes for posts, pages and custom post types.

By building these WordPress Developer Tools we hope to save time and energy on our projects and create a solid base for more complex themes and plugins.

Both projects are in a ALPHA stage but stable enough to be of real use to you as well. I’ve been using both of them in client projects and I’m really happy on how they turned out.

BareSkin

Is a HTML5 WordPress theme to jump-start the development of another full-featured theme.

When we started developing custom themes for our clients, Thematic saved us a lot of time. We didn’t have to worry about all the things WordPress needs inside a theme and just used Child Themes to style and hooks to add custom functionality.

It all worked well up to a point. You see, the more custom functionality you need, more code goes inside functions.php. We ended up with thousands of lines of code inside functions.php on some of our more complex projects. Once you start unhooking existing functionality and hooking your own, you stop saving time and becomes a BIG pain in the butt to get anything working well.

Our first step away from this was creating our own internal framework. I didn’t like the direction Thematic has taken so I started looking elsewhere for inspiration and guidance. As it happens, Justin Tadlock felt the same thing about frameworks and released Hybrid Core – a WordPress theme development framework for creating solid parent themes.

We used Hybrid Core and created an internal framework, kept Thematic’s awesome XHTML structure, but ended up creating our own framework with the same problems as Thematic or any framework out there: we still used hooks and filters to add functionality inside templates.

Somehow that felt wrong to me so after a few projects with it we ditched it and I started looking again, this time by creating a document with the requirements of the theme that fit well with our web-development process.

BareSkin requirements:

• NOT a theme framework. Think of it as a parent theme with limited support for hooks and filters. Modifications should be made by forking it and creating a new theme, not through Child Themes.
• Functionality should be added through a modular system ( like add_theme_support )
• The loops should be included through get_template_part so template files are as easy to understand as possible.
• Limited Admin Panel – only functionality that might belong to a theme, everything else delegate to plugins.
• When possible use conventions over configurations
• The theme will support 3 layout structures through css includes: 2 columns right-aside, 2 columns left-aside, 3 columns content-in-the-middle similar to Thematic as well as a responsive.css file

We’ve used ToolBox’s HTML structure, took part of the functionality from Hybrid Core and then mashed it all together to create something really cool.

This is not a finished theme. That’s why for now it’s only available via GitHub and will not be submitted to the theme repository for now. Work still needs to be done to the existing CSS structure and you might find inconsistencies in the code.

Custom Fields Creator

Custom fields have been in WordPress since a long time. They are an absolute must when it comes to custom post types or even storing extra information regarding a certain page.

However, the UI to manage those fields is somewhat lacking in functionality. You can only add key => value pairs. No labels, no descriptions. The cool thing is that we can create Custom Meta Boxes and save that information in custom fields.

Default Custom Field Interface.

While creating Meta Boxes is really cool, it’s also something we can take a bit further and abstracted a metabox class so you could create them with a few lines of code.

Taking the idea a bit further, what we really needed was repeater fields with our meta boxes.

There are a few cool plugins that allows you to do just that (ACF and Magic Fields 2 come to mind) but we needed something that was easy to embed in custom client plugins where the client didn’t need access to the structure of the fields, particularly since we’re using standard WordPress functions to output the information in a page template for the front-end.

Custom Fields Creator UI to create the testimonials on wpMail.me

Here’s what Custom Fields Creator dose:

• Easy to configure. You just need to setup two arrays (more info on the GitHub readme file)
• Support for Repeater Fields Metabox. This is the main reason we built it. Let me give you an example. For a particular client we needed to create a “The Team” page. Each team member has a name, title, email address and phone number. Initially all information was added in the Visual Editor by us, but when the client updated that information he easily broke the HTML and the formatting was gone together with the sidebars since he didn’t close a tag . Having the information nicely separated in input fields and listing it on the front-end using get_post_meta made it easy for the client to update his information and we didn’t have to it for them.
• Drag and Drop to sort the Repeater Fields.
• Easy to create custom Meta Boxes with multiple fields each (let’s say you need a project extra information like: budget, timeframe  and team members)
• Support for all input fields (WYSIWYG is coming soon)
• Image / File upload supported via the WordPress Media Uploader (at this point the files aren’t attached to the post and are available just in the media library but we’re thinking have to possibility  to chose if needed)
• Possibility to target only certain page-templates (there is no point in having “the team” metabox shown on the “Our Clients” page now is it? ), target certain custom post types and even unique ID’s.

There are other things on the list for it, proper documentation is one (you’ll find a readme file on github for now), WYSIWYG, validation and tweaks to the UI. At this point is just important to let people know about it and hopefully someone will find it useful.

Future Plans

I think at this point creating proper documentation is a priority for both projects. For BareSkin we need to finalize the CSS so it’s easy to build upon it, as for Custom Fields Creator tweaking it’s UI is something I want to do most. I think the UI and ease of use will be THE big feature for both projects and not adding to much extra functionality. They don’t have to do everything, just need to give you a head-start and let you focus on the fun stuff.

I haven’t coded any of them, my colleague and good friend Madalin Ungureanu did, but I’ve created the initial requirements for both, did a fair amount of testing and currently working on improving them.

I believe it’s very important to have solid WordPress Developer Tools that allows you to build other cool stuff easily without having to do a lot of copy-pasting between projects. Hopefully they will be of help to other developers as well.

If you do end-up working with any of them I would love to hear about it in the comments.

Related posts:

1. Street WordPress Theme
2. The new Smarter and WordPress 3.0
3. WordPress Automatic Updates Based on Folder Name. Is That a Problem?

If I’m not mistaken, WordPress automatic updates for themes and plugins are based on the folder name first and then on the name of the plugin and theme.

Things aren’t perfect in the land of WordPress Updates.

You see, two years ago I released a child theme for Thematic called Commune. It has over 10.000 downloads and a lot of people are using it for their blogs.

A month ago, another theme called Commune was approved on the WordPress.org Theme Repository. Since it had the same name as mine, it issued an automatic update.  One of the users of the Commune Child Theme saw the update and clicked it. After all, it had the same name, it came from WordPress, what could there go wrong?

As you probably suspected the update overwritten the Commune Child Theme and activated the WordPress.org theme. You could say the user was quite surprised and unhappy:

Hi Cris – just updated Commune @ http://t.co/Cj6dycV & the format is ruined ): no menus, columns & widgets gone… HELP! (twitter status)

So where’s the fire?

Well, there isn’t one. These things happen and life goes on. I’ve help my child theme user to reinstall my theme, she had to recreate her widget settings and that was all. So if you have my Commune theme installed please don’t update it. It’s the WRONG theme.

Also @nacin already created a bug report on the track to address this issue.

What I’m hopping to achieve with this post is to raise awareness.

With WordPress powering 50 Million websites and the large number of developers and theme designers something like this is bound to happen sooner or later.

And the same things is valid for Plugin Updates as well. Let’s say you create a custom plugin for a client, name it appropriately (no one uses this plugin name on WordPress.org either). Since this is a custom plugin you don’t bother to upload it to the repository.

Months later, someone comes along and creates another plugin with the same name and uploads it to WordPress.org.  You’ve guessed it! Your original plugin get’s an automatic update. Client updates the plugin and brakes it’s site.

What can you do as a developer?

Mark Jaquith wrote about this in the past. You can setup your plugin and theme so they are excluded from the plugin updates. It’s a simple piece of code and you can learn more about it by clicking here. I’m also including that in all my child themes and custom plugins just to be on the safe side.

The thing is that I never really thought this could ever be an issue until it happened to me. Also it’s a very obscure thing that not many people know about it. Hopefully if you’re a developer and create custom themes and plugins take this into account.

No-one is to blame here really but can this be done differently?

I think so. Issuing an unique identifier on which to base the automatic update shouldn’t be that hard (or is it?)

I’m writing about this hoping to raise awareness to this issue, not to mention the 3.3 milestone features a refresh to the update system and might even go so far as updating WordPress in the background, without your intervention (these are rumors mind you).

So let me know what you think in the comments. Should Automatic Updates be issued based on an unique identifier and not just the Theme/Plugin name?

Related posts:

1. Commune Child Theme – Update
2. Profile Builder Pro is WordPress Registration Done Right
3. QandaPress, a Q&A platform based on WordPress

It’s a warm design that makes you feel comfortable.

Cozy Child Theme for Thematic Framework

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Cozy and Thematic) to your server in the themes folder AND THEN ACTIVATE the Cozy Theme.

The end of a good run

This will probably be the last free child theme I’ll release for Thematic. The last couple of years have been filed with experiences I never thought possible and I’ve learned so much. However it’s time to move forward, leave Thematic behind and try a more sensible approach to theme development. I’m talking about creating Parent Themes and on top of them Child Themes and not try to solve every problem using Thematic (this is better explained by Justin Tadlock)

This doesn’t mean I’ll stop releasing themes. On the contrary I look forward adding a couple new free designs that can be used by the community.

Related posts:

1. Early Morning Child Theme
2. Byty the Free Child Theme – Built on Thematic
3. Installing WordPress Child Themes and Customizing the Byty Theme

A Smart WordPress 3.0 Theme

As mentioned before Smarter theme was designed as a powerful CMS for company websites. It’s a business wordpress theme, with a SEO friendly structure.

This being said, here are some of the new things that Smarter 2.0 has to offer.

The News Items was implemented using the custom post type feature from WP 3.0. Now, adding and editing news is simple and straight forward, leaving no room for confusion.

The custom navigation menu has been set as the theme default menu, so now you will be able to insert and organize things like pages, categories, news or custom links in your theme menu.

Smarter also comes with a big package of different color child themes, giving you the option to choose the right color range for your business.

In case you’re aiming for a multilingual website, Smarter 2.0 has been tested and works great with WPML plugin.

Smarter Theme Options, which let you customize your site looks, comes with a lighter interface which includes all the options from the previous version. So you have options like: selecting between multiple theme layouts, uploading a header image, editing the featured slider page etc.

To find out more about Smarter 2.0 and it’s new features check out the screencast below:

Pricing

For 25$ you can purchase Smarter 2.0, which includes all the functionality of the old version, plus the new features mentioned before. The zip also includes the psd files and the color child themes. Being released under a GPL license, Smarter can be used on an unlimited number of websites.

Support

If you have any suggestions or questions regarding the new version of this theme, please visit our forums (http://cozmoslabs.com/forums/).

Related posts:

1. Smarter WordPress Theme
2. Smarter Theme Teaser
3. wpMail.me – a concise, once weekly free roundup of WordPress news and articles

When I started designing Charisma I had in mind an elegant, simple, well structured theme which highlights the content and gives the user a pleasurable reading experience.

Charisma, Free Genesis Child Theme

The home page has a beautiful slider, and below it lists the most recent post titles. I created a new widget area that appears only on the homepage and you can add the default featured articles widget or featured page widget from Genesis Theme Framework.

So why Genesis you might ask? To be honest I wanted to experiment with frameworks other then Thematic to see how they work. I’ve used bits from Hybrid in the past and this is how I’ve tested Genesis, by building a child theme for it.

To be honest I was pleasantly surprised. The code is really easy to understand, there are plenty of tutorials on the support forums, the css is straight forward and the html really let’s you create any layout without any problems. I’ve also liked the widgets Genesis comes with by default. They speed up things quite a lot.

Charisma was built on top of the Genesis framework, so it inherits all it’s functionality. In order to install it you have to buy the Genesis Theme (this is an affiliate link), upload both themes (Charisma and Genesis) to your server in the themes folder AND THEN ACTIVATE the Charisma theme.

Support

If you have any question regarding this theme you can always visit the Cozmoslabs forums for help (www.cozmoslabs.com/forums/forum/charisma).

However, for questions regarding the Genesis Theme Framework please make use of the excellent support StudioPress provides.

Related posts:

1. Byty the Free Child Theme – Built on Thematic
2. Cozy Child Theme
3. Early Morning Child Theme

Themes in the Work

The last two months have been really productive. So I thought I’d share with you two of the works in progress. While still far from ready to be released, they are ready to be shown.

Both will be child themes, but with a twist. This is as much as I can tell you at this point, but I’ll post more details by the end of the month.

Charisma Teaser

TypeLog Teaser

Related posts:

1. Early Morning Child Theme
2. Street WordPress Theme
3. Cozy Child Theme

A Smart WordPress Theme

It gives your blog a personal look, with easy customization, without getting lost into too much options.
Its friendly interface and design work together giving your readers a pleasant experience every time they visit your site. Besides, you can get the most out of it’s SEO friendly structure by using the all in one seo pack plugin.

Pricing

For 25$ you can purchase Smarter, which includes the psd files.
Smarter is released under GPL license and that means you can use it on an unlimited number of websites.

Smarter theme options include:

• multiple theme layout
• optional use of breadcrumbs
• logo or header image upload
• customizable text areas (home page description, footer site info)
• featured slider pages
• different page templates (blog, news, login, register)
• menu management

They are all meant to allow you to improve and customize your website without having to touch a single line of code.

If you want to learn more about Smarter’s functionality check out the short video below, and experience the smarter way to start your online presence.

FAQ

Does the Smarter theme include a contact form?
No. I recommend you use Gravity Forms or Contact Form 7

Do you offer any trial version?
No. But you can preview the theme demo.

How does the order get processed?
Payment is done via PayPal. You will receive a standard Paypal invoice, along side with a download link.

What browsers was Smarter tested on?
Smarter has been tested and works on IE7, IE8, Firefox 3+, Safari 3+, Chrome and Opera 9+.

Support

If you have any other question or concerns, visit the Cozmoslabs forums for help (http://cozmoslabs.com/forums/).

Related posts:

1. The new Smarter and WordPress 3.0
2. Smarter Theme Teaser
3. Charisma, Free Genesis Child Theme

The idea behind Smarter Theme is to quickly build a presentation website for small and medium size companies without the need to touch a single line of code.

We’ve put together a screencast with a quick walk-through of the theme and its features. I hope you find it interesting and let me know what you think so far!

Related posts:

1. The new Smarter and WordPress 3.0
2. Smarter WordPress Theme
3. Byty the Free Child Theme – Built on Thematic

This theme doesn’t scream at you, instead it takes a step back and lets the user read. Please don’t spoil it by putting ads on it!

Early Morning - A refreshing child theme for Thematic

You also have some nifty options:

• You can upload your own logo
• It comes with it’s own custom designed Twitter widget, so your visitors can see what you’re doing from your blog
• If green isn’t your style, it comes with 5 background options that you can select from the Early Morning Theme Options (Green, Turquoise, Brick Red, Gray and Black)
• Has a one column page template and archive template
• It’s been tested and works on Firefox 3.5, Safari 4, Opera 9, Chrome, IE7, IE8

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Early Morning and Thematic) to your server in the themes folder AND THEN ACTIVATE the Early Morning Theme.

Related posts:

1. All Child Themes got updated
2. Cozy Child Theme
3. Byty the Free Child Theme – Built on Thematic

It uses the beautiful Vegur Free Font for the headings and main menu, implemented by Cufon (text replacement technique). I’ve spent a great deal of time searching for the perfect free font for this theme, but I think I found the right combination.

While this child theme is just a skin for Thematic, because this exact reason is also functional. You have access to all 13 Widget Areas Thematic uses, the semantically correct HTML that is great for SEO, can use a page template that spans the entire width of the page without the sidebars and even you can upload your own logo or header image from the “Street Theme Options”.

An elegant Child Theme for Thematic

I hope you’ll enjoy using this theme as much I enjoyed creating it!

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Street and Thematic) to your server in the themes folder AND THEN ACTIVATE the Street theme.

Related posts:

1. Cozy Child Theme
2. Early Morning Child Theme
3. Byty the Free Child Theme – Built on Thematic