Banner Template for WordPress Plugins

I recently launched a simple charting plugin for WordPress called RJ Quickcharts. During the process I needed to figure out how to add a banner image. The process is really simple but I thought it would have been nice to have a template that was the right dimensions and had the title of the plugin in the right area.

The zip contains 2 files: a 772x250px PSD and a 1544x500px PSD for hi-dpi screens. To use them, simply create your image and save the files as “banner-772×250.png” or “banner-1544×500.png”. The PSD’s already use this nomenclature so you should be able to simply “Save as…” -> PNG. Once saved, move them to your /assets folder in your SVN repo.

Download the Banner Templates Here.

Some links I found helpful while getting these images set up.

History of the banner images and where to save screenshot images as well.

Getting started submitting your plugin

The form you need to fill out to actually submit your WordPress plugin

How do I make one of those cool banners for my plugin?

Handcrafted WP Starter Theme

wordpressLogoSoloHandcrafted WP is a starter theme built for WordPress developers who are doing more than building blogs. The theme is based on Ian Stewart’s Toolbox Starter theme and Paul Irish & Divya Manian’s HTML5 Boilerplate plus some other awesome features based off our years of experience. This is not a framework, but an almost-naked starter theme that gives you a rock solid starting point for crafting a serious website on the WordPress platform.

Features

  • HTML5
    Full HTML5 markup with HTML5Doctor’s reset
  • Target IE
    Conditional tags on <head> so no hacks needed
  • Managed Menus
    Header, Footer & Utility menus ready to go
  • Cleaner <head>
    Clean up the default code in the head
  • lowercase_p_dangit
    capital_p_dangit is dead on arrival (you’re welcome)
  • Dashboard Widgets
    Easily disable dashboard widgets for clients
  • Asynchronous Google Analytics
    Optimized GA script thanks to @mathias
  • Custom Post Type
    Default custom post type ready to go
  • Hide Meta Boxes
    Hide meta boxes on Post & Page screens
  • jQuery
    jQuery from Google CDN with local fallback
  • HTML5Shiv
    Enable HTML5 support in IE
  • Post Formats
    Ready to go for 3.1

Download

Download Handcrafted WP Starter Theme

Digging Deeper

Since this video was made, some things have changed. Namely, Modernizr is no longer bundled and Remy Sharp’s HTML5shiv has taken its place. Not enough people seemed to use it so the overhead wasn’t worth it. Post formats has also been added in the functions.php for when 3.1 goes gold. The changelog will always be available here.

Developed By

Randy HoytRandy Hoyt

Randy JensenRandy Jensen

WordPress Custom Post Type Icons

wordpressLogoSoloThe best new feature in WordPress 3.0 has to be the ability to easily create custom post types. After you’ve created your post type you’ll see it show up in the admin menu with the same “pin” icon as the Posts menu has. This isn’t a huge deal, but it also isn’t difficult to change the icon as long as you have icons to use.

So, thanks to Yusuke Kamiyamane’s great Fugue icon set, I’ve created a sprited icon set made to match the WordPress admin icons. Just add the icon you want into your parent theme’s images folder and add a piece of code to the functions.php file and you’re done.

Update: Please make sure to read Jeff Rose’s comment below. Basically, in the video, I tell you that if you use underscores in your custom post type that WordPress strips these out. Well in 3.2, it no longer does. This means that the CSS will break, so you’ll just need to add the underscores back in from now on.

Download

Download the WordPress Custom Post Type Icons

Functions.php code (WordPress 2.8 and above)

Functions.php code (Less than WordPress 2.8)

How to Use

Asides
If you want to check for a specific WordPress number, you can use “if (get_bloginfo(‘version’) >= 2.8)”

Follow Me On Twitter

HTML5-ified Twenty Ten

wordpressLogoSoloSo we all know WordPress 3.0 ships with a shiny new theme called Twenty Ten. You probably also know that this theme is “HTML5″ ready. What does that mean? Not much. Basically that the code validates and the doctype is the new HTML5 doctype. No <header>, <footer>, <asides>, etc to be found (understandably). So I decided to take the theme and make it as HTML5-ified as possible.

My goal was not to rewrite the theme or take out the bloat or create something you should use in production in lieu of the stock theme, but just to try and get a better handle on how we as developers are going to be writing markup in the near future. I really see this as a way for the community to give input as to how, say, the <asides> tag should be used. Or maybe whether the author section should be wrapped in its own <section>.

Even though this will obviously be WordPress-theme-centric, its purpose is to get a better handle on writing HTML5 markup for any site.

I’ll be updating the theme based on the feedback I get – Leave a comment below or hit me up on Twitter @randyjensen. Again, I’m really curious to see how each person interprets each tag and its purpose. This is a place to openly discuss HTML5’s new tags and how they should or should not be used.

Download

Download HTML5-ified Twenty Ten

Asides

Thanks to Mark Pilgrim for his Dive into HTML5 book
Also thanks to Randy Hoyt for double checking the code
And if you’re looking for an awesome HTML5 WordPress starter theme, Ian Stewart has you covered.

Follow Me On Twitter