To do that, I use this trick to determine the URL for the script relative to the file:
$file = dirname( __FILE__ );
// Get the URL and path to wp-content
$content_url = untrailingslashit( dirname( dirname( get_stylesheet_directory_uri() ) ) );
$content_dir = untrailingslashit( WP_CONTENT_DIR );
// Fix path on Windows servers
$file = wp_normalize_path( $file );
$content_dir = wp_normalize_path( $content_dir );
$uri = str_replace( $content_dir, $content_url, $file );
* This snippet was updated 02/11/16 based on code from Duluxe Blog Tips, which fixes issues with relative loading in Windows server environments.
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!
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 */
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. (more…)
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. (more…)
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: (more…)
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.
Matt 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: