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.
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 →
The custom header feature allows the user to set the color of the header text. But what if you’d like for the site title to be a different color than the site tagline? This is an issue I just hit in the GovPress theme I’ve been working on. Continue reading →
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. Continue reading →
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.
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. Continue reading →
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.
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. Continue reading →
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.
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?
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. Continue reading →
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. Continue reading →
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.
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) Continue reading →