Category Archives: Wordpress Development

Tutorials, articles, code, and examples for WordPress theme and plugin developers.

I’ve exported all my WordPress PHP snippets from Dreamweaver using Massimo’s Snippet Import/Export extension.

I have about 50 of the most common theme related functions and pasted a lot of information from the WordPress codex in the descriptions. You can download mine here (tar.gz) (zip).

If anyone would like to contribute similar WordPress snippets, I’ll be glad to add them to the library.

The Walker_Comment class seems to be the weirdest and most hacked together of all the Walker classes in WordPress. Despite a few hours searching, I could not find a single example of a working Walker_Comment class anywhere on the entire internet. So I made this one from scratch by copying the default Walker_Comment function that comes with WordPress. It’s doing what I need it to, but I’m not 100% sure I’m using it properly.


Ignoring $output

Although the functions are set up to pass a global &$output variable forward, they don’t do it (at least in the default Walker class), they just echo each portion as it comes. It appears the Walker totally ignores the variable which just strikes me as odd.

start_lvl() Isn’t the Start

The start_lvl() function, with a $depth of 0 begins at each child comment, so essentially at the start of every reply which is the first to reach a new level under a particular comment. This took me awhile to figure out and is also rather odd. That’s why you have to wrap the comment list div/ol/ul yourself, because it has no way to reach the top of it’s own comments list.
I was able to wrap the comment list dynamically by just using the constructor and destructor functions, but I’m sure none of the other Walkers require that.


In the $args for wp_list_comments(), there are 2 optional callback functions which plug into start_el() and end_el() (I believe), so if you don’t need to play with any of the other functions, this is probably a less annoying way to accomplish this. I removed that plugged-in code from this example since there is no reason to ever do a custom Walker that refers to outside functions, just pick one or the other.

Anyway, here’s the code I finally came up with:Read More …

This is the most detailed tutorial in the world (to my knowledge) on the topic of creating a WordPress theme from scratch. If you read it all, you will know everything you need to create a complete and powerful WordPress theme. The verbosity of this tutorial means it can be tailored to people of any skill level, from ace theme jockey to complete and utter beginner.

I even go so far as to break down the basics of HTML and CSS, so I do mean beginner. However, I realize not everyone needs this much detail, so I have also included links to skip past beginner sections for those are so inclined.

A Quick Foreword

WordPress is fantastic, and it’s constantly improving. I think it’s amazing that the most powerful and popular CMS is open source and free. The massive community effort that continues to make WordPress’s so fantastic is actually quite astounding if you’ve ever taken a minute to consider it’s scope. It’s a shining example of the way software and the web writ large could be.

However, like all large projects, there is a lot on the agenda; and coordinating a decentralized army of volunteers is always going to get messy. With limited time and resources, you have to tackle the high priority issues first, and that list never really gets any shorter. That’s just the reality of the situation. Automattic doesn’t have an army of bright eyed recent CS grads they can lock in a basement with Mountain Dew and Skittles until every last issue has been dealt with. This means ideas and solutions, even the really good ones, can take a long time to make their way into the core.

The 3 Much-Needed Features

There are 3 problems that WordPress offers no clean way (at least that I’m aware of) to solve. I’ll explain them in more detail below, but in a nutshell they are:

  1. Lack of filters for widgets (design issue)
  2. No way to return the search_form if theme has a searchform.php file present(bug)
  3. No standardized way to get an attached image’s meta information, like: title, alt, description, or caption(laziness)

If you’ve ever coded the CSS and/or JavaScript needed to make a WordPress nav menu work smoothly across all browsers, you know how daunting that can be. Superfish is a jQuery plugin that is really ideal for WordPress’s multilevel navigation menus. Many themes make use of it, but (I’m assuming due to the lack of quality tutorials) few of them do it correctly. I will outline the correct procedure for adding Superfish, oh any other jQuery plugin to your theme.

Enqueue Scripts and Styles

Create a function that enqueues the necessary files. It’s generally a bad idea to replace WordPress’s native jQuery file, so don’t do it unless you absolutely must to make it work. I’ve included the (disabled) code to do it just in case you’re forced to.Read More …

I’ve seen a lot of themes enqueuing style sheets and scripts incorrectly, either by calling them using the wp_print_styles or wp_head hooks, or just placing wp_enqueue_style() right in the header. The queue system works best when everything is queued at once, not periodically throughout the document. And calling with the wp_print_styles hook in version 3.3 can end up putting your styles on the admin page. So, do it correctly using the proper hook: Read More …

WordPress 3.4 introduced a new method of dealing with custom headers and backgrounds. The old functions add_custom_image_header( $args ) and add_custom_background( $args ) were depreciated in favor of add_theme_support( 'custom-header', $args ) and add_theme_support( 'custom-background', $args ). While these new functions are pretty similar to their predecessors, there is still a good bit of information about working with them that is not on the codex (or anywhere else I looked). So here are some helpful tips when working with custom headers and backgrounds.Read More …

The WP-Admin bar was added in version 3.1 of WordPress and it’s made the lives of many WordPress publishers a lot easier. The bar appears to logged in users with sufficient privileges on the front-end and dashboard of a WordPress blog. It offers easy navigation to different administrative tasks based on the type of page being viewed.

You can use this wonderful time saving tool to your advantage by adding custom links to the bar. This could be utilized by a theme or plugin to provide better access to a specialized functionality. The code below simply adds a constant link to the bar, but you could customize it further by adding different links when different conditionals to the add_action call.Read More …

Aside from the standard Gravatar, WordPress allows users to choose from a list other default avatars. If you are creating your own theme, you can add an avatar or icon consistent with your theme’s styling to the list of default choices.

WordPress makes this a rather simple endeavor with the avatar_defaults filter. Add the code snippet below to a callback function (replace themeslug_ with your theme’s function slug) add an image of your choice to the list of avatars users can select from.

Although you can use any size, avatars of 60×60 pixels are the generally accepted size.Read More …

I’ve also written a Custom Comment Walker function, after 3 hours of searching, I’m convinced it may be the only one out there lol…

If you’re trying to make a fancy navigation menu with CSS, you might have found the default IDs and classes applied by WordPress to the nav menu elements to be quite lacking. However, you can fix that by adding a custom walker function to add your own conditional classes. The custom nav walker function I made below will add the following CSS classes:

CSS Classes

  • .main-menu to top menu
  • .sub-menu to menus inside the main-menu
  • .menu-item to all <li>’s
  • .main-menu-item to all <li>’s in the main menu
  • .sub-menu-item to all <li>’s in a sub-menu
  • .sub-sub-menu to all menus inside a sub-menu
  • .menu-even/.menu-odd for <ul>’s (alternating)
  • .menu-depth-# to tell you how deep each menu is
  • .menu-item-even or .menu-item-odd (alternating)
  • .menu-item-depth-# to tell you which level menu the <li> is in
  • .menu-link to links

Optional Features

These requested features were can also be added to the code below. Click on each to be taken to the comment on this page describing how to integrate it.

This should make styling your Navigation Menus MUCH simpler.Read More …