Displaying a Custom Post Type Archive on the Front Page

Most developers use a custom page template if they need to display a custom post types on the front/home page. This is fairly easy to do using a new WP_QUERY:

$args = array(
	'post_type' => 'download',
);
$downloads = new WP_Query( $args );

However, WordPress still treats this as a page rather than archive, which can be problematic if you have specific styles or scripts that only load on archives or rely on certain body classes. So I started to experiment with a pre_get_posts function. I found this actually works quite well, even with pagination and infinite scrolling scripts. Continue reading

Interview: Mike McAlister

I enjoy talking shop with other theme developers. A few months ago I was lucky enough to get a chance to interview Mike McAlister.

For those that don’t know Mike, he runs a little theme shop called Array.is and is an excellent designer and developer.

Designer, developer and decision maker. Enjoys details, whitespace, coffee, notebooks, vinyl records and pizza.
Designer, developer and decision maker. Enjoys details, whitespace, coffee, notebooks, vinyl records and pizza.

When Mike and I did the interview, he had just launched a rebranding of Array. We discussed the importance of good design, the economics of the theme business, and how he first got into building themes. Continue reading

Migrating to Digital Ocean

I’ve had a number of tiny WordPress sites on shared hosting (BlueHost) for over a decade. It’s been pretty great. Shared hosting has a lot of benefits: it’s cheap, it’s relatively easy to manage, e-mail is included, and there’s basic support.

The drawback is that servers aren’t generally optimized for WordPress performance, and once a site begins to scale in traffic you need to move it to a managed host or a VPS.

droplet-screen

I’ve been wanting to try DigitalOcean (one of the many cloud providers) because my hosting bills have been growing. I still have my basic shared hosting with BlueHost, but I also have large sites on WP Engine, and a VPS with WiredTree. They’ve all been great and have their own benefits, but the idea of consolidating into one provider and reducing my hosting bill significantly is a huge draw. Continue reading

Customizer Panels and Field Types

WordPress 4.0 introduced a few new features for the customizer, including panels and input field types. This post on the Core Make blog explains the updates well- but since I was experimenting with it today I thought I’d post a few more examples.

new-controls

I put together a code snippet that registers a custom panel, section, and then displays a few of the new field types: url, e-mail, password, textarea, date, and range. Arguably the only real useful ones are textarea and range as you’ll see in the notes below. Continue reading

How to Install a Purchased Theme

When you purchase a WordPress theme you’ll generally get a download link for the zip file. To upload this theme to your site involves a couple simple steps.

  1. Log into your WordPress site, and go to “Appearances > Themes” menu item
  2. Click the “Add New” button at the top of the screen
  3. Click the “Upload Theme” button at the top of the screen
  4. Now choose the .zip file that you have of the theme click “Install Now”

Add New

add-new

Upload Theme

upload-theme

Overwriting a Theme

If you are uploading a newer version of an existing theme, you will likely get this message:

“Destination folder already exists. Theme install failed.”

In that case, you will need to temporarily switch themes (perhaps to the default). Find the theme you want to replace, click “Theme Details” and then click “Delete”. Now you can upload the newer version.

Additional Notes

  • If you use WordPress.com, you cannot upload your own themes.
  • If your zip file contains multiple themes, you’ll need to unzip it, and then re-zip each theme individually.
  • Purchase themes only from trusted sources- otherwise you run the risk of getting a hacked version (no fun).

Interface Experiments

wordpress-com

If you’ve written a post on WordPress.com recently you may have noticed that Automattic is testing a new interface. It removes a lot of the the clutter of navigation bars and metaboxes, leaving writers to focus on the writing.

Besides the visual changes, it appears the interface is powered completely by javascript. Publishing new posts and updating meta doesn’t require a new page load like the current version of WordPress core does. The updates are done through a JSON API, which is one of the exciting features slated for core in WordPress 4.1. Continue reading

Enqueue Script Relative to PHP File

The Customizer Library is package of helper classes and functions that developers can use in their themes. Since I don’t necessarily know what the folder will be named or where it will be located in the theme- any javascript needs to be loaded relative to the file that enqueues it.

To do that, I use this trick to determine the URL for the script relative to the file:

$path = str_replace( WP_CONTENT_DIR, WP_CONTENT_URL, dirname( __FILE__ ) );
wp_enqueue_script( 'example-script', $path . '/js/example.js' );

You can see the actual code here:
https://github.com/devinsays/customizer-library/blob/master/extensions/preview.php

Of course, if you do know the path to the JS file, it’s recommended you use:

wp_enqueue_script( 'example-script', get_template_directory_uri() . '/path/example.js' );

And this is just for themes. If you’re doing this in a plugin, you can use:

wp_enqueue_script( 'example-script', plugins_url( 'path/example.js' , dirname(__FILE__) ) );

Hope this helps!

Social Menu Links

I (like most everyone) have number of social profiles spread across the web. Facebook, Twitter, Instagram, GitHub, etc. I tend to think of my website as my “home” on the web- it’s the only place I have complete control over the content, design and functionality. But I like to link to these other sites so folks can find me and engage there. For most brands and companies this is an essential requirement for their website.

icon-examples

There’s a number of ways for users to add social links. The simplest is to use the default WordPress menus and have text links. These can be added in a menu area or a widget. There’s also a few plugins that have purpose built widgets or absolute positioned icons that can work with most any theme.

But in most cases icon links in the menu are the best option for linking. Icons don’t take up much space and they’re immediately identifiable.

If a theme doesn’t support social icons by default, there are a couple plugins that allow you to use icon sets by adding classes to menu. Font Awesome 4 Menus is one. But since this is such an essential feature for most sites, I think it’s great when the theme itself handles it. This ensures that the icons used also match the rest of the theme design. Continue reading

Customizer Library

I’ve been working on a new project called the Customizer Library. It’s a collection of classes and functions that make it a bit easier to develop for the WordPress Customizer. It also includes helper functions for Google fonts and inline styles- though I’m considering moving these off into their own repositories as they might not be needed for all projects.

I’ve created a GitHub repository for the Customizer Library that can be included in a theme/plugin as a submodule. I also created a demo theme with example code so developers can get a quick idea of how it works and what it does. I’ve tried to document as much as possible on GitHub- so view the readmes there for implementation details.

screenshot

I think the reason the Options Framework has been so successful is because it reduced a really complex task (developing an options page) to a really simple task (defining an array). It abstracted the complexity of adding an admin page, generating field markup, sanitizing the data, and saving the options.

The WordPress Customizer is simple in comparison. There’s just one spot to load the controls and WordPress handles the generation of field markup for the most part. But it still doesn’t provide a default data sanitization and the syntax is more complex than it needs to be. Continue reading

Theme Shop Directory (2014)

Last year I published a list of independent WordPress theme shops ordered by Alexa rank. Since then a number of new ones have opened up, a few have closed doors, and a couple have rebranded or changed hands.

I thought it would be interesting to look at these numbers again to see how the independent theme market has changed over the year. I updated the ranking table and posted the new information at the bottom of this post.

Directory

Alexa data isn’t necessarily correct as it is based on traffic estimates. It also doesn’t indicate anything about actual revenue numbers. So the “data” here should definitely be looked at with skepticism. It is, however, one of the few independent measures we have to rank websites.

The biggest takeaway for me is that the Alexa ranking for all the top theme shops improved significantly. Every single shop in the top 25 is doing better than last year. I think this shows a continued interest in commercial themes and that well established shops are likely benefiting the most. Continue reading

Altering Comment Markup

Changing the default markup for comments can be difficult in WordPress. The wp_list_comments function has useful parameters for avatar size and reply text label, but if you want to make more structural changes (like moving the timestamp to below the comment body, or altering class names) you basically need to recreate the function inside a custom callback.

To me it makes more sense to have markup inside of a template file (rather than a function), and when looking at the Hybrid Theme by Justin Tadlock I saw it does exactly this. In Hyrbid, devlopers can use a custom comment.php template to alter comment markup. So, how it this done?

First, let’s specify a custom callback for wp_list_comments.

<?php
	wp_list_comments( array(
		'style' => 'ol',
		'short_ping' => true,
		'avatar_size' => 50,
		'callback' => 'prefix_comment_callback'
	) );
?>

Once we’re inside the custom callback function, we’ll want to call the theme template to use:

/**
 * Use a template for individual comment output
 *
 * @param object $comment Comment to display.
 * @param int    $depth   Depth of comment.
 * @param array  $args    An array of arguments.
 */
function prefix_comment_callback( $comment, $args, $depth ) {
	include( locate_template('comment.php') );
}

Note that we’re using “include” rather than “get_template_part” so that we can use all the variables available to the callback function.

We now need to take the markup that the default callback uses and paste that into comment.php. You can find that in the WordPress core file “/wp-includes/comment-template.php” in the function html5_comment. Here’s the version I used from 3.9.1.

Once that is pasted into the comment.php, you can move items around as you choose. Make sure to add text domains for any translated text if your theme will be used by international users!