Responsive Video and FitVids

Posted

video

If you develop responsive WordPress themes, you’re likely making sure embeds and iframes resize within the container. Something like this does the trick:

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

But the problem with video embeds is that the aspect ratio isn’t maintained at smaller screensizes. A quick for this is the tiny jQuery plugin FitVids. Read more

Optimizing Google Fonts in Themes

Posted

There are a number of methods to load Google fonts in a WordPress theme, but some are more efficient than others. Google has a post about optimizing the use of the Font API. I thought I’d summarize this as it applies to WordPress themes.

Enqueue or @import?

One of the simplest ways to load Google fonts is to do a an @import from the stylesheet, but Google recommends to link directly from the head of the document instead.

Properly enqueing the font and loading it from the head will also make it easier for people using child themes to change the font without copying the entire parent stylesheet over. Read more

Optimizing Responsive Layouts

Posted

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: Read more

imagepostformat

Theming the Image Post Format

Posted

Working with post formats in WordPress can be challenging because of the lack of structured data. For instance, just because a user selects an “image” post format, there’s no guarantee that an image was actually attached to the post.

Alex King has created a plugin and submitted a couple patches, but until the WordPress UI catches up we as theme developers need to be a little creative.

In the most recent version of Portfolio Press, I ended up styling the image format to look like this:
Read more

fallrunning

Custom Design on WordPress.com

Posted

If you want a highly customized theme for your WordPress site the only option is to self-host, right? Not so fast…

I just finished a small project for Bluefin Software redeveloping their blog. They wanted to stay with WordPress.com hosting because of its ability to scale and low maintenance. And incredibly, by using just the custom design upgrade and widget areas in the Coraline Theme, it was possible to build exactly what their designer had envisioned.
Read more

How to Make a Child Theme for Canvas

Posted

I’ve been working a lot with Canvas, a new framework by Woo Themes that gives users a plethora of design options. This video by Magnus shows a little how it works.

When setting up a new site with Canvas, I’ll make new default style settings using a child theme. This is the safe way to set up the theme, because if the design is done purely through the admin panel there’s the chance we’ll lose it if it’s ever reset. It also gives us the full css toolkit rather than just the options that Woo has provided.

Additionally, by using a child theme, we can make changes to the markup (adding extra divs or wrapper for styling)- and not be worried about losing those customizations when a new updates of Canvas roll out.
Read more

WordPress and SEO

Posted

matt-cuttsMatt Cutts, a software engineer for Google, gave a talk at WordCamp San Francisco 2009.

According to Matt, “WordPress takes care of 80-90% of (the mechanics of ) Search Engine Optimization (SEO)”. So by using WordPress, you are already better positioned for search than the majority of websites. But what else contributes to page rank and search optimization?

I would highly recommend watching Matt’s presentation in full, but if you don’t have 45 minutes to spare, I took some notes:
Read more