Let me preface this, this is only if you are creating a widget and not if you just want to add a class to an existing widget, there are plugins that do that.

It’s really actually simple, I just could not find the answer right away because it isn’t one of those things mentioned in the Widgets API section of the WordPress Codex.

The above link has this in the Example when creating a widget:

If there were one more line (like the below), then this post wouldn’t exist. The array that holds the description can also have a key of classname, which can have a string value, which is turned into your widget’s css classes.

Happy coding.

The project I am working on has several templates, some which do not use the main WordPress editor. For those templates, I typically hide the editor via jQuery’s .hide() or .slideUp methods.

The problem I ran into was that when editing a page using a template that did not use the editor, then switching the template to one that used the editor, the editor would be broken until the user scrolled, resized the window, etc. This is due to how WordPress 4.0 now resizes the editor window automatically to fit the content in it.

Screen Shot 2014-10-15 at 11.32.06 AM

The trick to fix this is to turn the auto resizing off and on again, which fires off all of the auto resize functions. The methods are:


The longer explanation is below the gist.

First I get the elements I am watching or modifying, I then create the function that is going to flip the switch off and on again.

In the function I first see if auto resizing is even on, because if it isn’t, then you don’t need to do this. Next you can see that I have it set to wait 401ms, the reason for this is due to I am using .slideDown(), which has a default time of 400ms, and I want it to fire after that.

I then listen for the change of the page template select box, and show/hide my editor as needed. I also flip the switch every time there is a change, which may be too much, but it shouldn’t affect any usability.

And that’s it. If you have a better way of doing some of the things, let me know.

When I create a WordPress theme, I like to make things dynamic, clean and easy for the user(s) of the theme. Today I came across an issue where I needed to be able to link back from a single custom post type to the page that is using the template that displays the listing of the custom post type. The page with the template is currently named ‘Portfolio’ and it displays all of the ‘Galleries’, the link will take the visitor back to the ‘Portfolio’ from a ‘Gallery’…exciting!

I could use get_permalink( ID ) to get the permalink by the ID, or get_page_by_path( 'Portfolio' ) to get the page (and then its ID) by its name; but what if the user decides to use a different page or change the page name? Then everything goes caca.

Here’s the gist of what I did. Jump to post “Getting a WordPress page by its template”

Coffee is made and knuckles are cracked, I believe it is time for a update to this design. I probably won’t change much visually, but a lot of the back end needs to change. This theme was one of my first ventures into responsive design and Bootstrap, and now I know a few more tricks up my sleeve…and some down time.

I have been working with custom post types in WordPress for several years now, but never really found a suitable solution for ordering any of the default or custom columns properly. By default WP will order all custom post types by date, which sucks if you want them to sort by menu order, their title, or some other custom column you’ve created.

Every tutorial I came across (not to say every single one out there is wrong) either didn’t work for me, was outdated, etc. So, here’s how I just started doing it.

Jump to post “Order columns for custom post types in WordPress”