Enqueue Script Relative to PHP File

The Customizer Library is package of helper classes and functions that developers can use in their themes. Since I don’t necessarily know what the folder will be named or where it will be located in the theme- any javascript needs to be loaded relative to the file that enqueues it.

To do that, I use this trick to determine the URL for the script relative to the file:

$path = str_replace( WP_CONTENT_DIR, WP_CONTENT_URL, dirname( __FILE__ ) );
wp_enqueue_script( 'example-script', $path . '/js/example.js' );

You can see the actual code here:
https://github.com/devinsays/customizer-library/blob/master/extensions/preview.php

Of course, if you do know the path to the JS file, it’s recommended you use:

wp_enqueue_script( 'example-script', get_template_directory_uri() . '/path/example.js' );

And this is just for themes. If you’re doing this in a plugin, you can use:

wp_enqueue_script( 'example-script', plugins_url( 'path/example.js' , dirname(__FILE__) ) );

Hope this helps!

Responsive Video and FitVids

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

Optimizing Google Fonts in Themes

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

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

Theming the Image Post Format

imagepostformat

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

Custom Design on WordPress.com

fallrunning

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

How to Make a Child Theme for Canvas

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

WordPress and SEO

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