Enqueue Script Relative to PHP File

By Devin

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:

$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!

Social Menu Links

By Devin

I (like most everyone) have number of social profiles spread across the web. Facebook, Twitter, Instagram, GitHub, etc. I tend to think of my website as my “home” on the web- it’s the only place I have complete control over the content, design and functionality. But I like to link to these other sites so folks can find me and engage there. For most brands and companies this is an essential requirement for their website.

icon-examples

There’s a number of ways for users to add social links. The simplest is to use the default WordPress menus and have text links. These can be added in a menu area or a widget. There’s also a few plugins that have purpose built widgets or absolute positioned icons that can work with most any theme.

But in most cases icon links in the menu are the best option for linking. Icons don’t take up much space and they’re immediately identifiable.

If a theme doesn’t support social icons by default, there are a couple plugins that allow you to use icon sets by adding classes to menu. Font Awesome 4 Menus is one. But since this is such an essential feature for most sites, I think it’s great when the theme itself handles it. This ensures that the icons used also match the rest of the theme design. Continue reading →

A New Base Theme

By Devin

The first WordPress theme I ever built was a modified version of Kubrick. I think that’s how most front end developers get started with WordPress- tweaking a core theme or a commercial theme to make it fit. Building one entirely from scratch has never made a lot of sense to me and over the years I’ve used a number of different theme platforms to build on.

History

toolbox-screenshot

I had a love affair with Thematic for a couple years. It was one of the early “frameworks” and a precursor to newer projects like Genesis. It was great if the design fit into the general structure of the theme, but I often found myself writing ten lines of code in order to unhook and rehook different sections of the theme for really minor changes. It was difficult to trace functions across multiple files. Although it made me a much better developer and was excellent for some projects, overall it seemed unnecessarily complex.

Next for me was “Toolbox“. This was a base theme developed by Ian Stewart, the same developer who had started Thematic. It was the complete opposite of a framework: a real simple theme, well structured, and easy to modify. It also followed the HTML5 spec (remember when that was new?!). I built my first publicly released theme (Portfolio Press) off of it as well as several projects for clients.

After Ian took a job with Automattic, Toolbox was forked and became Underscores. More on that over here. It’s an excellent base and many of the themes on WordPress.com are built off of it. There’s a great team of developers maintaining and contributing to Underscores. The code is clean, well commented, and the model of excellent WordPress practices.

Time to Fork

Fork

However, over the last few months I’ve found myself having to do more and more work to get Underscores to where I need it before embarking on a new project. I’ve decided it’s time to fork.

This is not a bad thing of course. Underscores is intended to be base in which to build off of, even if you’re forking it to build your own new base. And a solid base theme is important for any WordPress theme developer- it allows you to move quicker because you don’t need to solve the same problems for every project.

The main reason I’ve decided to fork Underscores is because of build tools. (Though re-using patterns for menus and comments will also be helpful.)

Continue reading →

Features for Theme Developers (WordPress 3.9)

By Devin

WordPress 3.9 will be released this month with some great new features. I think the enhancements for media (drop-in image uploading, audio/video playlists, and better editing options) will get a lot of attention in this release- but there’s also a ton of hidden gems.

I went through 582 tickets and picked some of my favorite enhancements, focusing on the ones I think will be most interesting for theme developers.

Media Features

WordPress now has support for audio and video playlists (and audio/video thumbnail images) thanks to work spearheaded by Scott Taylor:

playlists

Audio, video, and gallery previews are available in the editor and themes can add styling to better display them. Continue reading →

Options Framework Roadmap

By Devin

The latest WordPress release (3.8) is scheduled for December 12th. For those following along with core you’re probably aware that this release will bring significant UI changes to the WordPress dashboard.

options-framework-1.7

The Options Framework handles this new dashboard design fairly well. Core styling classes were used as much as possible and styling is fairly minimal- so most of design changes are inherited. The biggest issue I saw with the current version is that checkboxes and radio buttons are a bit warped. Continue reading →

Full Screen Background Images

By Devin

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 →

Portfolio+

Portfolio Press has been downloaded from WordPress.org over 500,000 times. For the majority of people this basic version works great, but I always a get a few requests from people want more design and customization options. That’s why I built Portfolio+.

More Options

If your site is already running Portfolio Press, switching to Portfolio+ will be easy. And once you’ve activated Portfolio+, you’ll have options to change the text and link colors, hide the site tagline, change the number of portfolio items that appear per page, swap out backgrounds and more. I’ve also added some neat new features, like infinite scroll.

Screenshots of the Customizer:

customizer-screenshot

I made a video walkthrough highlighting some of the features.

Feature List

  • Color Options for Text
  • Background Styling Options
  • Infinite Scroll
  • Option to use alternate URL for portfolio link
  • Full width option for individual posts
  • Automatic upgrades when new versions come out

Customize Further

You’re also welcome to customize the theme even further by editing the stylesheet. I built a child theme to put those customizations in. Please note, I do not offer support for customizing the actual theme code (PHP/CSS/Javascript).

Downloading Portfolio+

Portfolio+ is not longer being actively developed aside from minor compatibility updates. If you purchased a license which is still valid, updates will still be pushed out via the theme updater and support is available by email. For others, if you wish to download a copy of the theme you can find it on GitHub.