Optimizing Responsive Layouts

Styling for a range of different screen sizes is rather easy in CSS thanks to media queries. But what if you want to deliver slightly different content or markup based on screen size?

WordPress has a wp_is_mobile tag that can be used- but this covers a wide array of devices and doesn’t allow for specific screen size targeting.

Here’s a couple techniques I’ve been using that are a pure front end solution: Continue reading

WordPress Design Changes

There are some bold new changes in the works for the WordPress dashboard: a responsive design, a font icon set, and a new darker + flatter look. There’s also workflow changes on a number of admin screens, including the themes page and dashboard home.

New Dashboard

For folks interested in following along with the progress, check out the make.wordpress.org/ui blog. MP6 and Dashboard can also be installed on a development site to preview all the updates. Continue reading

Full Screen Background Images

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.
Continue reading

Add UTM parameters with jQuery

On a recent project we needed to add UTM query parameters (for Google Analytics tracking) to all outbound links to a specific domain.

I didn’t feel like updated all the links on the site directly in the code since these campaign query strings might change, so I created a basic jQuery plugin to do this:

jQuery.fn.utm_tracking = function() {
	$(this).find('a[href^="http://www.example.com"]').each(function() {
		var url = $(this).attr('href');
		$(this).attr( 'href', url + '?utm_source=example&utm_medium=link&utm_campaign=campaign' );
	});
}

Continue reading

How to Find Free WordPress Themes

There are a lot of great WordPress themes available for free, but you’ll need to be careful about where you get them from. Bad themes with malicious code can bring down your server, alter links on your website, and cause other unsavory problems.

Free themes from reputable sources can be terrific though. Here’s some of the places I’d check first, with a few example themes from each.

WordPress.org

The theme repository on WordPress.org is the largest source of free WordPress themes. All themes go through a detailed code review and safe to use on your site. You can browse the featured themes, popular themes, and newest themes.

Expound

Some excellent free themes to try in the repository are Expound, Spun, and Bold Headlines.
Continue reading

Convert Custom Post Types

banner-772x250

Some themes and plugins use custom post types to store data for items like portfolio pieces or testimonials . This can be an issue if you want to switch to a new theme that doesn’t have support for that post type, or your plugin is no longer maintained.

Luckily, there’s a couple ways to convert custom post types to standard post types. I recommend using Post Type Switcher if you just have a couple items to switch. For converting posts in bulk, Convert Post Types is what you’ll want.

Convert Post Types Overview

Plugins Mentioned

Themes Mentioned

Instagram Photos in WordPress

Instagram

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?

Simple Ajax Example

This is a basic example of how to use AJAX in WordPress. It shows how to take a variable from javascript, pass it to a PHP function (altering it slightly), and then pass it back to the javascript.

This assumes you already know how to enqueue javascript, etc. Continue reading

JetPack Infinite Scroll + Masonry

jetpack-banner

I added support for Jetpack Infinite Scroll on a theme of mine that uses Masonry recently.

Since I couldn’t find any good code snippets or recommendations for how the callback should work I wanted to share a couple methods I tried. If anyone has improvements or recommendations, please let me know.

All of these examples use the “post-load” javascript event that Jetpack triggers. You can read about that on the Jetpack Infinite Scroll documentation page. Continue reading

Lazy Loading Images

pixelated

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