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 How to Find Free WordPress Themes

banner-772x250

Convert Custom Post Types

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

Instagram Photos in WordPress

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?

jetpack-banner

JetPack Infinite Scroll + Masonry

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 JetPack Infinite Scroll + Masonry

pixelated

Lazy Loading Images

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 Lazy Loading Images

indicator

Drop Down Menu Indicator

I think it’s important to give users a visual cue when menu items have a drop down menu.

One way I’ve handled this in the past is to use the Superfish jQuery plugin, which adds a class to any list items with children. This allows them to be styled differently- with a background image of a down arrow (for instance).

menu-example

However, I just saw a new theme released by Paul de Wouters called Spine. Instead of using javascript to apply the class- he uses a custom Walker_Nav_Menu so that the class is added to the markup directly.

I think this is a much better way to do it, and solves an issue I’ve seen in some themes where the menu items shift a bit when the new classes and styling are applied with javascript.
Continue reading Drop Down Menu Indicator

typekit-logo

TypeKit Code Snippet

Assuming you don’t want to use the TypeKit plugin, here’s how to enqueue the scripts directly from your theme:

/**
 * TypeKit Fonts
 *
 * @since Theme 1.0
 */
function theme_typekit() {
    wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxxx.js');
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );

function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
  	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
}
add_action( 'wp_head', 'theme_typekit_inline' );
meta-display

Featured Image Meta

I’ve built a couple themes where I’ve needed to give users more control over how the featured image is displayed for individual posts. The obvious place to put these options are in the thumbnail metabox itself.

Display Thumbnail Landscape

meta-banner

In this theme the default display of the thumbnails is a cropped to a square next to the title. But if the user had a large landscape image, they could choose to display it full width instead.

Continue reading Featured Image Meta