Post Format Views with Categories and Tags

Posted

I think it makes a lot of sense to display certain post format archives differently than standard post archives. For instance, image post formats might look a lot better in a grid view with large images rather than a traditional blog format.

It’s easy enough to alter the post format archive template, but the taxonomy views (categories and tags) will still display in the standard layout- even if all the posts are the same format.

I thought it would be great to detect what type of posts were being displayed in the taxonomy before they rendered, and use a different layout if they were all in the same post format. This way I could continuity between the post format archives and taxonomy archives- assuming they all contained the same post format. Read more

IE Browser Testing on OSX

Posted

Browser testing in Internet Explorer can be a bit tricky since I do all my WordPress development work on a Mac- but I finally got a setup that works well.

virtualmachines

I’m using Virtual Box because it is free, rather easy to set up, and I could store all the disk images on an external drive (they take up too much space on my MacBook Air, 10GB a piece).

The disk images with Windows and Internet Explorer can be downloaded from Modern IE. I had to download some of the rar files multiple times because the zips were corrupted in the download (they’re large files)- but I eventually got a clean version. Disk images are available for IE6, IE7, IE8, IE9, IE10 and IE11. Read more

Template Hijacking and Useful Styling Tricks

Posted

Portfolio Press has always used custom post types to display portfolio content. When the theme was released in 2010 this was a novel way to do it (custom post types had just been released in WordPress 3.0).

Post types allowed the portfolio to be styled differently, use different templates, and keep portfolio content separate from standard content. In the dark ages before WordPress 3.0, developers had only achieved this by requiring users to post in a pre-defined category or tag.

screenshot

But since WordPress 3.4 we’ve had post formats like “gallery” and “image” which are now supported by most new themes. With the latest version of Portfolio Press, I wanted users to be able to choose which to use. Post formats are the new default, but users can install the Portfolio Post Type plugin and use post types instead if they choose.

To save a lot of duplication in template code and styling, I used a bit of template hijacking and a few other useful styling tricks. I doubt anyone is working on this exact same issue, but I think some of the ideas might be useful for other applications. Read more

Full Screen Background Images

Posted

Full screen background images are a nice feature for a number of WordPress themes. It’s also one of the few theme modifications that can be handled well through a plugin.

Full Screen Background

The implementations I’ve seen generally use the jQuery script backstretch.js- which handles responsive layouts and large images elegantly.

If you’re not a theme developer and just want to add a full screen background to your site, I’d suggest trying out one of these plugins:

If you are a developer and want learn how to add this feature to a theme, read on.
Read more

Instagram

Instagram Photos in WordPress

Posted

It’s quite easy to backup and display all your Instagram photos in WordPress thanks to the excellent DsgnWrks Instagram Importer plugin by Justin Sternberg.

I set it up with my theme Visual (free on WordPress.org) in just a few minutes. You can view it here.

The plugin can import all the photos you currently have and can also import new photos as they are published. There’s several options for how the images can be saved (post, page, post type), how tags/categories are applied, and whether they are published immediately or saved as drafts.

Straightforward Set Up

Instagram Plugin Screen

  • Install the DsgnWrks Instagram Importer plugin.
  • Go to the plugin page under “Tools” > “Instagram Importer”.
  • You’ll need to authenticate with Instagram before you can import photos. If you’re already logged in to Instragram, this will take just a second.
  • Most of the defaults work fine, but if you’re using the Visual theme, I would suggest a few changes:

    Images will show up twice if they are set as the featured image and also get inserted into the post content. So, you should disable one or the other if you’re using Visual. I updated the “Post Content” field to just show my image caption.

    I’d also update the “Imported posts status” field if you want to automatically publish each image. Just make sure you don’t have any other plugins activated that might send out an e-mail or tweet for each new published post when you do this.

  • If you have a lot of images, it will take a while to import them all. I’d recommend importing just a few at first to make sure everything is set up how like.

That’s it. Feels good to own your data, doesn’t it?

pixelated

Lazy Loading Images

Posted

Images are generally the heaviest assets on a webpage- so if you’re interested in fast load times for users, this is one of the best places to optimize.

Lazy Load Your Images

One popular technique for speeding up the initial load time is called “lazy loading”. It works by replacing the source of images (src=”/example.gif”) with a transparent placeholder image (src=”/pixel.gif”). This allows everything else on the page (text,fonts,scripts,etc) to render first. Read more

Getting Started With CodeKit + CSS Preprocessors

Posted

I experimented with CSS preprocessing today (both LESS and SASS). I have to admit, it was much easier to set up than I thought and really intuitive to use.

To get started, I just downloaded a copy of CodeKit (OSX) and dropped a couple theme directories into it. When that happened, CodeKit started to watch all the LESS and SASS files in those directories- and automatically compiled them into actual CSS files whenever I saved.

To become more familiar with the syntax, I forked a copy of Jared Erickson’s LESS theme on GitHub and made some edits. Then I converted it to SASS syntax. If you’re completely new both SASS and LESS- I think that’s a fun small project to do. Read more

Icon Fonts

Posted

Overview

This tutorial explains how to output post meta (comments, tags, categories, edit link) and display a small icon before each one using an icon font. Icon fonts are great for this purpose because they can scale to any size, look great on retina devices, have a smaller file size than images, and use a single HTTP request.

Examples

An icon font I particularly like (and use in this demo) is Entypo by Daniel Bruce. There’s over 250 icon glyphs available in the font and the download size is only 19k. But there are a lot of great choices out there to use. (Update: the tags icon is now from FontAwesome) Read more

portfolio-screenshot

Display the Most Recent Post in Each Category

Posted

In Portfolio+ I use a custom post type for portfolio items and a custom taxonomy for portfolio categories. When someone views a portfolio archive page all of the portfolio featured images are displayed, and when someone goes to a portfolio category all the featured images of posts in that category are displayed.

But a common request I’ve had is for a template that displays all the portfolio categories with thumbnail images for each of the categories. This would allow someone to easily link to different sections of their overall portfolio (for instance, “Photography”, “Water Color”, “Sculpture”) rather than having them all show up in one jumble of the main portfolio archive template.

This gets a bit tricky because there is no easy way to associate an image with a taxonomy term (though Michael Field’s Taxonomy Images Plugin has made it work).

I decided the best route would be to just display all of the categories, and use the featured image from the most recent post in each category. This obviously won’t be the perfect solution for everyone (some may want to use a completely different image for the category thumbnail), but for most users I think it works well and is a dynamic way to show off new work. Read more