If you optimize your themes and plugins correctly, you can improve your site’s performance while enhancing user experience. The wp_enqueue function is a great place to start. This simple integration can prevent issues with your theme when used with other WordPress plugins.

In this article, you’ll learn exactly what wp_enqueue is all about, and how it can be used to improve your WordPress projects. Let’s get started!

Introducing WordPress’ Template Structure

Part of WordPress’ power is its ecosystem of hierarchies and hooks. Hierarchies are driven by a set of special file names, while hooks can be referenced anywhere within a theme or plugin’s structure. Both work together to ultimately create a cohesive front end that is flexible and compatible with an unpredictable combination of themes and plugins.

Let’s start with the WordPress template hierarchy. This has an impact on the way themes are loaded. Whether you are writing a theme or a plugin, it is important to understand how any front-end loading scripts will be incorporated into the hierarchy.

A primary aspect to understand is that each individual page template gets wrapped around the header.php and footer.php files. With few customized exceptions, both of these files will be loaded no matter what individual page templates get sandwiched between. For example, the home page is loaded like this:

• header.php
• home.php
• footer.php

While an individual post will load these files:

• header.php
• single.php
• footer.php

This way, the top containers with the logo and menu (as well as the bottom containers with any additional footer information) get repeated consistently for every page. This ensures your WordPress page will be correctly, and fully loaded.

Bringing all of this together are WordPress hooks. There are two important functions that get loaded, one into header.php and the other into footer.php. The wp_head() function must be present in header.php:

<?php wp_head(); ?>

While the wp_footer() function must be present in footer.php:

<?php wp_footer(); ?>

They both look for any registered hooks within your plugins and themes. If something needs to be loaded in the header of a page, it gets pulled (or hooked) in by wp_head(), and likewise for the footer by wp_footer().

In other words, you can hook into either of these functions to enable specific unique code to show up on the correct pages of a WordPress website. This is important to understand because WordPress is designed for every single CSS and JavaScript file to be loaded into the theme using these hooks.

While hooks are important for understanding wp_enqueue, they are also the secret ingredient for becoming a power WordPress developer. It’s well worth learning more about how they work and where you can use them.

How wp_enqueue Works

The wp_enqueue() function is a hook in and of itself, which then hooks into wp_head() and wp_footer() as needed. Here’s how it all comes together:

1. You write a function which registers your scripts using the correct wp_enqueue script.
2. You hook your function into the wp_enqueue_scripts hook.
3. These hooks all communicate together so that when wp_head() loads on the front end, your script is found and loaded with the others in the exact correct place.

Neglecting this process means that any theme or plugin that consolidates or reviews scripts will break because yours isn’t loaded using the expected WordPress method. We’ll talk a bit more about that in the next section.

Why Every Single Style and Script Must Be Enqueued

Once you understand how WordPress templates are loaded, you see get why it’s so important you load every single style and script this way. If you don’t, WordPress has no idea your file exists. This is WordPress’ way of keeping track of everything that’s going on within a website.

Consequently, it’s impossible to properly optimize the performance of a WordPress site if even one script is missing. Enqueuing loads your script into the system. This way, WordPress can always replicate it at the correct spot in wp_head or wp_footer regardless of any theme customizations.

Many plugins use the same scripts, but enqueuing enables them to share files rather than attempting to load them multiple times or creating version conflicts. Any optimization plugin or plugins that rely on similar or competing script libraries need to be able to detect these types of issues so they can be debugged and resolved without needing to hack your code. Ultimately, enqueueing scripts ensures greater compatibility across multiple plugins and themes.

How to Use wp_enqueue In Your WordPress Project

Before getting started, it’s important to understand that JavaScript and CSS files load differently. This is because they require different HTML tags. You’ll also want to make backups of your code before making any changes to your site.

If you are working on a live site, you’ll need to access your files using File Transfer Protocol (FTP). FileZilla is a great free cross-platform tool for doing this. Without further ado, let’s jump into coding your scripts into WordPress with wp_enqueue!

Load Scripts Using wp_enqueue_script

Loading JavaScript files is possible with the wp_enqueue_script() function. This function can take five arguments, in this order:

1. $handle: This is a unique string to name your script, such as my-custom-script, and is required.
2. $src: This is an optional string pointing to the full path of your desired file.
3. $deps: An optional array of dependencies. If your script requires jQuery or another registered script, you can list all the handles for those required scripts in an array.
4. $ver: You can optionally keep track of script versions here using a string for caching purposes.
5. $in_footer: This is an optional boolean value that forces the script to load in the footer rather than the header.

To register your scripts, you’ll set up a custom function and use wp_enqueue_script to load each one individually. Here’s an example code snippet you can reference in your own theme or plugin.

function torque_enqueue_javascript() { 
    wp_enqueue_script( 'custom-name', get_template_directory_uri() . '/path/to/script.js' ); 
}

Once you’ve created this function, you need to use the wp_enqueue_scripts action hook to actually register it into the system. Below your function, you can use the add_action() function to connect with wp_enqueue_scripts.

add_action( 'wp_enqueue_scripts', 'torque_enqueue_javascript' );

Here, the first parameter is the hook name, and the second is that of your custom function. You’ll want to leave the hook name intact and customize the function name to match yours.

Load Stylesheets Using wp_enqueue_style

Loading in CSS files is incredibly similar, but you’ll use a slightly different function within your script’s loading function. You can choose to keep things separate with an entirely new function to load into wp_enqueue_scripts, or add onto your existing scripts function. For the sake of clarity, we’ll show you how it works in a new function.

The wp_enqueue_style() function also accepts five parameters. Here’s the breakdown:

1. $handle: This is a unique string to name your CSS file, such as my-custom-styles, and is required.
2. $src: This is an optional string pointing to the full path of your desired stylesheet.
3. $deps: An optional array of dependencies. If your script requires another CSS file to work, you can list all the handles for those required stylesheets in an array.
4. $ver: You can optionally keep track of stylesheet versions here using a string for caching purposes.
5. $media: This is an optional string to specify media types. You can use media types like all, print and screen. Media queries such as (orientation: portrait) and (max-width: 640px) will also work.

To register your stylesheets, you can either add to the existing custom function or create a new one. We’ll show you in a new function how to use wp_enqueue_style to load each script individually. Here’s the example code snippet for reference:

function torque_enqueue_stylesheets() { 
    // Load main stylesheet 
    wp_enqueue_style( 'my-theme', get_stylesheet_uri() ); 
    // Load other stylesheets 
    wp_enqueue_style( 'custom-name', get_template_directory_uri() . '/path/to/stylesheet.css' ); 
}

With this function ready to go, you can use the same process as before to hook it into wp_enqueue_scripts.

add_action( 'wp_enqueue_scripts', 'torque_enqueue_stylesheets' );

Once again, take note that the hook name stays the same. Only modify the secondary parameter to match your custom function name.

Conclusion

WordPress comes packed with a huge number of developer-friendly features. However, if you don’t learn how to use them effectively, you will wind up with an unwieldy and unreliable WordPress project.

In this article, you’ve learned about how WordPress templates work together and load in scripts from themes and plugins. Because of this ecosystem, it is super important that your scripts and styles are enqueued properly. This can be done using:

1. wp_enqueue_script: For loading in any JavaScript file necessary for your plugin or theme.
2. wp_enqueue_style: For registering any CSS files necessary to the front-end design.

What questions do you have about enqueueing files in WordPress? Let us know in the comments section below!

Image Credit: LinkedIn Sales Navigator.

The post The Beginner WordPress Developer’s Guide to wp_enqueue appeared first on Torque.

What Is A “Wapuu”?

Wapuu is the official WordPress Japan mascot—though I am convinced that WordPressers everywhere would adopt it as their own if they only knew about it. Wapuu’s fandom runs deep in certain circles. There are literally hundreds of different variations of the Wappuu—including, but not limited to, the lumberjack Wapuu, the mecha Wapuu, the french Wapuu, the punk Wapuu, and even the WP Tavern Wapuu.

Design A Torque Wapuu

We’d love to have a Wapuu of our own to hang up in our San Francisco office, which is why we thought it would be fun to put together a contest. For the next two weeks, we’d like to encourage our readers to try their hand at designing a Torque-themed Wapuu. You can find plenty of existing Wapuu assets to start off with on the Unofficial Wapuu Fan Club or grab the original Wapuu vector file here.

To help inspire your design here’s a little background info on Torque:

Torque is an online magazine devoted to all things WordPress. We are based in San Francisco, with writers distributed all over the world. We like donuts, video games, and traveling to as many WordCamps as we can. It’s your call on what exactly the Torque Wapuu would look like, but if you’d like to use our logo in your design, you can find it here.

From now until July 27th, we invite you to share your Torque Wapuu with @thetorquemag on Twitter or email it to us directly at doc[at]torquemag[dot]io.

We’ll select our favorite and print it up as a small batch of stickers! As thanks, the winner will receive a $50 Amazon Gift Card, and two runners-up will receive some Torque swag from us.

UPDATE: Congrats to Michelle Schulp whose Wapuu was picked as our favorite! We’ll be working with the folks at Sticker Giant to print these up soon.

The post The Torque Wapuu Contest appeared first on Torque.

Show notes:

Host

Sam Hotchkiss has been working with WordPress for the last ten years. Over that time he worked as a freelancer, and built both a successful agency and a product business, BruteProtect, which was acquired by Automattic in 2014.

Sam now works on the Jetpack team at Automattic, and lives in Albuquerque, New Mexico with his wonderful wife and their three dogs.

You can find Sam on Twitter @HotchkissWeb or on his blog at swh.me!

Sippin’ on

Brad – Soothing tea

Dre – Diet cherry coke

Sam – Whiskey from High West Distillery in Utah

Pressing topics 

WordPress 4.2 “Powell“ – WordPress 4.2, nicknamed “Powell” after jazz pianist Bud Powell, was released.

XSS Vulnerability in WordPress 4.2 – A new comment XSS exploit vulnerability was discovered in WordPress 4.2, 4.1.2, 4.1.1, and 3.9.3. This vulnerability allows unauthenticated attackers to inject JavaScript into comments.

JetPack 3.5 – Jetpack 3.5 was released, which includes the ability to manage your site’s menus directly from WordPress.com, as well as several bug fixes and enhancements.

ManageWP launches events hub – ManageWP launched an events hub that features WordPress-related events all over the world.

Facebook abandoned official WordPress plugin – The official Facebook plugin for WordPress launched in 2012, but has received no updates since March 2014.

Bar tricks

Dre – Roadtrippers is a web based software application that helps travelers plan road trips.

Brad – Theme Generator allows you to create your own WordPress theme that’s built using Grunt, Sass, Bourbon, and Neat.

Sam – Cloak detects if you’re on an unsecured wifi network and then automatically routes you through their VPN.

Upcoming events

WordCamp Maine – May 15-16

WordCamp Miami – May 29-31

WordCamp OC – June 6-7

WordCamp Philly – June 13-14

WordCamp Europe – June 26-28

The post DradCast episode 079: Nerd with a pager appeared first on Torque.

Shownotes

Host

Ryan Sullivan is a WordPress enthusiast, the founder of WP Site Care. When he’s not behind a computer, you can find him playing superheroes with his three boys, or trying to spend quality time the his better half, Jackie. Ryan is from Utah, and he loves to spend time in the mountains. He loves bacon, headbands, and the Utah Jazz.

You can contact Ryan on Twitter @ryandonsullivan or on his company’s website, wpsitecare.com.

Sippin’ on

Ryan – Diet pepsi

Brad – Smokehouse Scotch

Dre – Water

Pressing topics

WordPress 4.1.2 security update – This is a critical security release for all previous versions of WordPress.

Coordinated plugin update – A coordinated plugin update took place between many WordPress plugins that were addressing a common security vulnerability that allows for cross-site scripting attacks.

All theme options to be included in the Customizer – All theme options must now be included in the Customizer for themes submitted to the WordPress theme repository.

Facebook abandoned official WordPress plugin– The official Facebook plugin for WordPress launched in 2012, but has received no updates since March 2014.

Bar tricks

Dre – ApproveMe is an eSignature plugin for WordPress.

Brad – cmb2.io is the latest version of the custom metabox class 

Ryan – WP Featherlight is an ultra lightweight jQuery lightbox for WordPress images and galleries.

Upcoming events

LoopConf – May 6-8

WordCamp Miami – May 29-31

WordCamp OC – June 6-7

WordCamp Philly – June 13-14

WordCamp Europe – June 26-28

The post DradCast Episode 078: Lifestyle Business appeared first on Torque.

Show notes:

Mendel Kurland started his web career as a consultant for local businesses, and quickly found his way to corporate America as a developer, marketer, and inventor. Mendel is a GoDaddy Evangelist which allows him to spend his time hanging out with developers, designers, entrepreneurs, and web pros around the world and making sure their opinions and suggestions are heard. He is an outdoor enthusiast, who loves backpacking, camping, gourmet coffee, and prototyping new web apps.

You can find Mendel on Twitter @ifyouwillit, or you can shoot him an email at mendel@godaddy.com!

Sippin’ on

Brad – Grub Soda

Dre – Water

Mendel – Power Light Pale Ale

Pressing topics

Blind SQL Injection Update

Vulnerability exposed in Yoast SEO plugin

GigaOm Shuts Down

GigaOm, a tech media site, and prominent WordPress site, shuts down.

WordPress Book

The story of WordPress is now available on GitHub.

Bar tricks

Brad – iThemes, Premium WordPress themes, plugins, and training

Dre – 2015 Pan IBJJF Jiu Jitsu Championship

Mendel – Mendel’s Blog

Upcoming events

WordCamp London – March 20-22

WordCamp Seattle – March 28-29

WordCamp San Diego – March 28-29

NMX/NAB – April 13-16

WordCamp OC – June 6-7

WordCamp Europe – June 26-28

Featured image via GoDaddy

The post DradCast Episode 076: WordPress Preacher appeared first on Torque.

Show notes:

Jeffrey Zinn co-founded Pixel Jar, a custom web development firm specializing in WordPress, with Brandon Dove in 2004. He also co-hosts the monthly WordPress meetup in Orange County, and speaks at neighboring WordCamps.

You can find Jeffrey online at PixelJar, and on Twitter @jeffreyzinn!

Sippin’ on

Brad – Captain Morgan Private Stock

Dre – Canada Dry

Jeffrey – Whiskey Mule

Pressing topics

ThemeConf

ThemeConf, a new conference for theme designers and developers, will be held on June 18-19th in the UK.

Press Publish Price Drop

Press Publish Price Drop, a conference for bloggers and developers, has significantly discounted the price of its tickets.

Bar tricks

Brad – WPTavern, a WordPress news site

Dre – Proposify, tool to create beautiful online proposals

Jeffrey – Use a meetup to give back to community, and answer support questions, etc..

Upcoming events

WordCamp Seattle – March 28-29

WordCamp San Diego – March 28-29

Featured image via Pixel Jar

The post DradCast Episode 075: It’s a slow burn appeared first on Torque.

Show notes:

Justin Sainton is the founder of Zao, a web firm based in Portland, Oregon. He is a core contributor to WordPress and a core developer for the WP eCommerce project. Justin is passionate about open source, and the community behind it.

You can find Justin online on Twitter @js_zao!

Sippin’ on

Brad – Captain and Sprite

Dre – New Castle

Justin – Deschutes Fresh Squeezed IPA

Pressing topics

Twitter Official Plugin for WordPress

Twitter has announced an official WordPress plugin.

HeroPress Update

HeroPress has failed to get backers and are canceling their Kickstarter.

Bar tricks

Brad – WP eCommerce Core Contributor Meetup

Dre – John Hawkins Podcast and Innevation Center Las Vegas

Justin – Generate WP, save time with taxonomies.

Upcoming events

PrestigeConf – February 27-28

WordCamp Seattle – March 28-29

WordCamp San Diego – March 28-29

Featured image via flickr

The post DradCast Episode 074: Canada, it’s basically America appeared first on Torque.

GifDrop is a WordPress plugin that allows you to drag and drop your favorite GIFs onto your own custom page. It’s still in beta, but the current version is pretty slick. In fact, I’ve been running a GifDrop page on my own site to display my 3D animated gifs, and we just added our new page here on TorqueMag.io/gifs.

“The inspiration for GifDrop was Norcross’ prolific animated GIF collection,” said Mark Jaquith, one of the creators of the plugin, “which I’ve seen him link to numerous times over the past couple years. It seemed to me that storing, searching, and presenting a collections of GIFs is something WordPress could do well. It also seemed like a way of building something with WordPress that didn’t really seem like WordPress, and a way of showing off its power as something on which you can build other web apps.

GifDrop is just a page. You upload images by dropping them in. There is no WordPress logo or WordPress branding. It’s a full page front-of-site presentation. And once it’s in the plugin repository, people will be able to easily install and manage their GIF collection, whereas a standalone app would have a complicated install process, and a third party service could just disappear at any moment. WordPress has a huge install base. Building an app on top of that just makes a ton of sense.”

Though the plugin is still in beta, you can grab the current version here, or help contribute to it’s development here. If you add a GifDrop page to your site, please share it in the comments below.

The post Torque Spotlight: GifDrop appeared first on Torque.

Show notes:

Joshua Strebel is the founder and CEO of Pagely, a managed WordPress hosting solution. He is also one of the great minds behind PressNomics—a 3-day event where passionate and successful entrepreneurs gather together to create the products and services that drive the WordPress economy.

You can find Josh online at Pagely and on Twitter @strebel.

Sippin’ on

Brad – Old Leg Humper Porter

Dre – Diet Coke

Josh – Stella Artois

Pressing topics

First WordPress Video Ad

Matt Mullenweg interview comparing WordPress competitor spending, and how it may manifest itself in advertisements.

First Dedicated WordPress.com Conference

One day conference in Phoenix featuring WordPress bloggers, focused on .com publishing.

Bar tricks

Brad – Professional WordPress

Dre – Weekly Blog Challenge, a group for people who have committed to writing a post a week.

Josh – PressNomics Facebook Group 

Upcoming events

PrestigeConf – February 27-28

Featured image via twitter

The post DradCast Episode 073: Drunken Rubber Duck appeared first on Torque.

At the 2014 State of the Word, Matt Mullenweg, founder of the WordPress project, pointed out that 7,539, or 25%, of 33k survey respondents indicated that they make their living off of WordPress.

There’s an obvious need for educational resources within the WordPress ecosystem — there are currently blogs, books, videos, and entire business models focused solely on WordPress education.  This week we decided to spotlight the book Professional WordPress, along with an interview with one of the authors, Brad Williams.

In 2010, Hal Stern, David Damstra, and Brad Williams came together to write a book on the internals of the WordPress system, appropriately entitled Professional WordPress: Design and Development. The book subsequently became the highest rated advanced WordPress book on Amazon.

Now, five years later, the third edition of Professional WordPress has been released — which has been updated to align with WordPress 4.1, and provides an in-depth look into the most current features of the software.

Torque: Who would you describe as the target audience of this book? Is it for people who have just built one WordPress site, full time web developers, or someone else?

Brad Williams: The primary audience is the developer or designer that wants to increase their skills in WordPress development. Whether you can hack at a WordPress site, or truly understand proper WordPress development practices, this book has something for you. The book is written by programmers for programmers, so it really digs into the meat of how WordPress works and how you can extend it to build any type of website imaginable.

Professional WordPress is the highest rated advanced WordPress book on Amazon since the original release back in 2010.

Torque: What’s new in edition 3? Anything exciting you got to add? Anything that previously annoyed you that developers don’t have to worry about anymore?

Brad Williams: The Third Edition of Professional WordPress features two brand chapters: WordPress as an Application Framework and Migrating to WordPress. These chapters cover some hot topics around WordPress today. Every single chapter in this edition has been updated and is current to WordPress 4.1.

Torque: Now that you have several books under your belt, what’s your favorite part about publishing a work like this?

Brad Williams: My favorite part is easily the people I meet who have read and learned from my books. I met a gentlemen at WordCamp Europe who thanked me for getting him a job, thanks to the Multisite chapter in the book. He read the chapter in preparation for a job interview and was offered the position! That was an amazing story to hear and one I’m super proud of.

WordPress Professional is available on Amazon. It is a great way and affordable way to increase your skills in WordPress development.

For a chance to win a copy of Professional WordPress, you can enter here!

a Rafflecopter giveaway

The post Torque Spotlight: Professional WordPress appeared first on Torque.