Toolbox of the Smart WordPress Developer: The WordPress Plugin Boilerplate

Did you know that you can actually cause death by writing a WordPress plugin? It’s true: If you make a plugin that’s poorly-coded enough to cause a security problem, and say, somebody hacks the website of a small country with a dictatorial rule, some heads might roll.

While it’s a slim chance and not reported to be true (yet), it’s actually a valid reason for you to write better plugins. And in this part of the "Toolbox of the Smart WordPress Developer" series, we’re going to save some lives by going through the WordPress Plugin Boilerplate.

Writing Plugins in WordPress

What is the most important superpower of WordPress? I’ve asked and answered this question more than a few times in my tutorials, but you probably already know the answer: extensibility.

One way of harnessing this power is by making WordPress plugins and putting them into use for the community. You can release a plugin on GitHub, in the WordPress Plugin Repository, on CodeCanyon, or on your own website. You can give it away free, or ask for money or donations.

In any case, you will be extending the functionality of WordPress in some way and on your own terms. You’re a part of the WordPress community and you’re letting the community grow by extending WordPress. How cool is that? This is indeed the prime superpower of WordPress, and you’re allowed to use it.

But you also need to remind yourself that with great power comes great responsibility. You must use this power for good, and use it well. By making poorly-written WordPress plugins, you might cause some really bad things—especially in terms of security. That’s why you need to act cautiously and make well-coded plugins with a solid foundation.

While it doesn’t solve all your coding problems, the WordPress Plugin Boilerplate will help you start off on the right foot by providing that "solid foundation" and guiding you to code better.

The WordPress Plugin Boilerplate to the Rescue!

WordPress Plugin Boilerplate

Back in December 2011, Tom McFarlin, our editor of Tuts+ Code, released the first version of the WordPress Plugin Boilerplate. Over three years, the project has been watched by over 250 people, forked almost 700 times, and got over 2,700 stars on GitHub.

On March 2015, Tom announced that Devin Vinson had taken over ownership of the WordPress Plugin Boilerplate project. As of today, the project’s GitHub repository is hosted in Devin’s account.

What Is the WordPress Plugin Boilerplate and Why Should We Use This Tool?

On the WordPress Plugin Boilerplate homepage, the project is defined as "a standardized, organized, object-oriented foundation for building high-quality WordPress plugins."

Basically, the WordPress Plugin Boilerplate is one of the best tools around to start a new WordPress plugin with a solid foundation. It provides the essential file and folder structure to stay organized, and using the starter codes inside the files, you can optimize your workflow and write the plugin the right way.

Using the WordPress Plugin Boilerplate

Granted, this tool is not for WordPress beginners. But you don’t have to be a WordPress guru either: Even if you have a basic understanding of WordPress plugin development, the WordPress Plugin Boilerplate will be an easy-to-understand tool for you to make better WordPress plugins.

Starting a WordPress plugin project with the WordPress Plugin Boilerplate is pretty straightforward, actually. In the beginning, all you need to do is change the plugin-name folder to your plugin’s name and edit all files (PHP, JS, CSS files and images) to change the "boilerplate values" to your own plugin’s values.

You’ll notice that there are quite a few files to work with, and lots of parts to edit even before writing your own code. Don’t let this put you off—it’s just a one-time thing, after all.

Let’s quickly go over some of the files and folders:

  • plugin-name/admin/: Includes CSS files, JS files, partials and the PHP file for an admin-specific class (class-plugin-name-admin.php).
  • plugin-name/includes/: This folder is kind of the "backbone" of your plugin. It consists of:
    • plugin-name/includes/class-plugin-name.php: The main PHP class of your plugin.
    • plugin-name/includes/class-plugin-name-activator.php: Includes the plugin activation functions.
    • plugin-name/includes/class-plugin-name-deactivator.php: Includes the plugin deactivation functions.
    • plugin-name/includes/class-plugin-name-i18n.php: Includes the internationalization functionality.
    • plugin-name/includes/class-plugin-name-loader.php: Includes the actions and filters for your plugin.
  • plugin-name/languages/: This folder includes your plugin’s language files. Includes a default plugin-name.pot file.
  • plugin-name/public/: Includes CSS files, JS files, partials and the PHP file for a public-facing functionality (class-plugin-name-admin.php).
  • plugin-name/LICENSE.txt: A copy of the GPL-2 license.
  • plugin-name/plugin-name.php: The main plugin file.
  • plugin-name/README.txt: A default README file for your plugin. Don’t forget to change this one!
  • plugin-name/uninstall.php: File to run when the user deletes your plugin.

Please note that the folder structure is based on the system of the WordPress.org Plugin Repository.

Quick Tip: Using the WordPress Plugin Boilerplate Generator tool, you can generate a customized copy. You provide your plugin’s name, slug, website, and your name, email address and website; then the tool replaces all the corresponding values in the boilerplate files. Neat!

In Conclusion

The WordPress Plugin Boilerplate surely is a great tool (even the best tool, maybe) for creating better WordPress plugins. But as I said at the beginning of this article, it’s not enough. You have to be mindful about WordPress Coding Standards, comply with the plugin writing processes, and be watchful about security issues in general. And if you want to learn more about writing better plugins, be sure to check out the "Introduction to WordPress Plugin Development" video course, also created by Tom McFarlin.

What do you think about the WordPress Plugin Boilerplate, and making plugins with it? Share your thoughts with us by posting in the Comments section below. And if you liked the tutorial, be sure to share it with your friends!

See you in the next part where we’ll talk about the Envato WordPress Toolkit, a toolkit to install and update themes purchased from ThemeForest.

Improve JavaScript Performance Analysis Results With User Marks

When working on advanced
JavaScript code, like a 3D engine, you may ask yourself what you can do to optimize,
and how much time you should spend in some specific pieces of code. In this
tutorial, I will share several tools that provide insight into how your code is
performing, and show you how to make the most of user marks in the memory graph
to analyze your performance.

Can’t wait to see what this
tutorial is about? Watch this video:


Feel
free to ping me on Twitter (
@deltakosh) if you
want to discuss this article!

Need a Profiler?

One profiler that comes to mind is
the integrated profiler you can find using new updates to the Internet Explorer F12
Dev Tools
—enhancements that will also be available for Microsoft Edge. Of course, you can use
any similar tools you prefer too on your dev box. 

If you want to try this out
on Android, iOS, or Mac OS, you can also use remote.IE to get an instance of Windows 10 Technical preview running in minutes. Then
open the Internet Explorer “e” you’ve been avoiding (it is a temporary client
shell that has Project Spartan’s new rendering engine configured), hit F12 and now you can see what I’ll show you:

temporary client shell that has Project Spartans new rendering engine configured

Please note that with the
new F12 tools that we shipped with Windows 10 Technical preview, profiler is now part of
the UI responsiveness window:

profiler is now part of the UI responsiveness window

Let’s see other options
that can give you more insights about how your code is performing.

console.time

You just have to call console.time()
and console.timeEnd() around the piece of code you want to evaluate. The
result is a string in your console displaying the time elapsed between time
and timeEnd.

This is pretty basic and
can be easily emulated, but I found this function really straightforward to use.

Even more interesting,
you can specify a string to get a label for your measurement.

This is, for instance, what
I did for Babylon.js:

console.time("Active meshes evaluation");
this._evaluateActiveMeshes();
console.timeEnd("Active meshes evaluation");

This kind of code can be
found around all major features and then, when performance logging is enabled,
you can get really great information:

performance logging information

Be warned that
rendering text into the console can consume CPU power.

Even if this function is
not per se a standard function, the browser compatibility is pretty great.
Chrome, Firefox, IE, Opera and Safari support it.

Performance Object

If you want something
more visual, you can use the performance object as well. Among other interesting features to help you measure a
web page performance, you can find a function called mark that can emit
an user mark.

A user mark is the association
of a name with a time value. You can measure portions of code with this API in
order to get precise values. You can find a great article about this API by
Aurelio de Rosa on SitePoint too.

The idea today is to use
this API to visualize specific user marks on the UI Responsiveness screen:

UI Responsiveness screen

This tool allows you to
capture a session and analyze how the CPU is used:

capture a session and analyze how CPU is used

We can then zoom in on a
specific frame by selecting an entry called Animation frame callback and right-clicking on it to select filter to event.

The selected frame will
be filtered then:

selected frame filtered view

Thanks to the new F12
tool, you can then switch to JavaScript call stacks to get more details about what
happened during this event:

more details about what happened during this event

The main problem here is
that it is not easy to get how code is dispatched during the event.

And this is where user
marks enter the game
. We can add our own markers and then be able to
decompose a frame and see which feature is the more expensive and so on.

performance.mark("Begin of something…just now!");

Furthermore, when you
create your own framework, it is super handy to be able to instrument your code
with measurements:

performance.mark("Active meshes evaluation-Begin");
this._evaluateActiveMeshes();
performance.mark("Active meshes evaluation-End");
performance.measure("Active meshes evaluation", "Active meshes evaluation-Begin", "Active meshes evaluation-End");

Let’s see what you can
get with Babylon.js, for instance, with the “V8”
scene:

V8 scene in Babylonjs

You can ask Babylon.js
to emit user marks and measures for you by using Debug layer:

Screenshot of Debug layer function

Then, using the UI
responsiveness analyzer, you can get this screen:

UI responsiveness analyzer

You can see that user
marks are displayed on top of the event itself (the orange triangles) as well as
segments for every measure:

user marks displayed on top of the event

It is then super easy
to determine that, for instance, the [Render targets] and [Main render] phases are
the most expensive.

The complete code used by
Babylon.js to allow users to measure the performance of various features is
the following:

Tools._StartUserMark = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition || !Tools._performance.mark) {
        return;
    }
    Tools._performance.mark(counterName + "-Begin");
};

Tools._EndUserMark = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition || !Tools._performance.mark) {
        return;
    }
    Tools._performance.mark(counterName + "-End");
    Tools._performance.measure(counterName, counterName + "-Begin", counterName + "-End");
};

Tools._StartPerformanceConsole = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition) {
        return;
    }

    Tools._StartUserMark(counterName, condition);

    if (console.time) {
        console.time(counterName);
    }
};

Tools._EndPerformanceConsole = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition) {
        return;
    }

    Tools._EndUserMark(counterName, condition);

    if (console.time) {
        console.timeEnd(counterName);
    }
}; 

Thanks to F12 tools and user marks, you can
now get a great dashboard about how different pieces of your code are working
together.

More Hands-On With
JavaScript

It might surprise you a bit, but Microsoft
has a bunch of free learning on many open source JavaScript topics, and we’re on
a mission to create a lot more with Microsoft Edge coming. Check out my own:

Or our team’s learning series:

And some free tools: Visual Studio Community, Azure Trial, and cross-browser testing tools for Mac, Linux, or Windows.

This article is part of the web dev tech
series from Microsoft. We’re excited to share
Microsoft Edge and the new EdgeHTML rendering engine with you. Get free
virtual machines or test remotely on your Mac, iOS, Android, or Windows device
@
http://dev.modern.ie/.

Advances in Testing With Xcode 7 and Swift 2

In the early days of iOS, tools to facilitate testing were not a major focus of Apple’s Developer Tools team. This has gradually changed over the years with the introduction of the XCTest framework and, more recently, support for asynchronous and performance testing.

With Xcode 7 and Swift 2, Apple is taking another big leap to improve testing in Xcode. In this tutorial, I’m going to walk you through three significant additions that will make testing easier and more enjoyable.

1. Access Control

In Swift 1, developers have to jump through a number of hoops to test their code. For example, a unit test target only has access to public entities of another module. This is not surprising if you’re familiar with Swift’s access control. Testing internal routines, however, becomes a pain.

Apple’s Swift team was aware of this problem and, as a result, Swift 2 introduces the @testable attribute to make testing less painful. With the @testable attribute, the unit test target has access to every internal entity of another module. The following code snippet shows how to use the @testable attribute.

@testable import AnotherModule

Let’s create a simple project to see how it works. Open Xcode 7, create a project based on the Single View Application template, and tick the checkbox labeled Include Unit Tests.

Setting up a project with unit tests included

To show how the @testable attribute works, I’ve implemented a structure named User. It has two stored properties, firstName and lastName, and a private computed property, fullName.

import Foundation

struct User {
    var lastName: String = ""
    var firstName: String = ""
    
    var fullName: String {
        get {
            return firstName + " " + lastName
        }
    }
}

Because we didn’t specify an access level for the fullName computed property, it’s access level is internal. If we want to unit test fullName, we could mark it as public. This isn’t great and it defeats the purpose of Swift’s access control.

Fortunately, Swift 2 solves this issue with the @testable attribute. The following code snippet shows how the @testable attribute is used. By prefixing the import statement with the @testable attribute, we can access the fullName property of the User structure in the testFullName method.

import XCTest
@testable import Testing

class TestingTests: XCTestCase {
    
    override func setUp() {
        super.setUp()
    }
    
    override func tearDown() {
        super.tearDown()
    }
    
    func testFullName() {
        var me = User()
        me.firstName = "Bart"
        me.lastName = "Jacobs"
        
        XCTAssertEqual(me.fullName, "Bart Jacobs", "The full name should be equal to \"Bart Jacobs\".")
    }
    
}

Note that the documentation clearly states that the @testable attribute can only do its job if the product is compiled with testing enabled. In other words, you can’t and shouldn’t use the @testable attribute for purposes other than testing.

2. Code Coverage

If you’re testing the code you write, then you’re on the right track. However, it’s equally important to understand how well the tests you write cover the code you think they cover. While previous versions of Xcode have had support for code coverage to some extent, it has always been a bit finicky to get it to work. That’s no longer the case with Xcode 7.

Instead of showing you a bunch of screenshots, I’d like to walk you through the steps involved to enable code coverage in an Xcode project. Let’s take the project we created a few minutes ago as an example.

To enable code coverage, we only need to edit the active scheme. Click the scheme in the top left and choose Edit Scheme….

Edit the current scheme to enable code coverage

To enable code coverage, select Test from the left and tick the checkbox labeled Gather Code Coverage. That’s it. If you’ve tried to enable code coverage in earlier versions of Xcode, then I’m sure you’re happy to see how easy it is to enable code coverage in Xcode 7.

Tell Xcode to gather coverage dadta

Run the unit tests by pressing Command-U or selecting Test from Xcode’s Product menu. When the tests have finished running, open the Report Navigator on the right and select the Coverage tab at the top. This shows you how well your unit tests cover the code you’ve written.

Code coverage in Xcode 7

It looks like we’ve done a pretty good job unit testing the User structure. It gets better though. Do you see the tiny arrow following the method name? If you click it, Xcode will take you to the source code the unit test tested. Because Xcode has collected coverage data, it can also show that coverage data in the source code editor.

The coverage data is shown on the right of the source code editor. The number in the gutter on the right indicates how often the unit tests have triggered that specific routine.

Code coverage in the source code editor

Code that wasn’t executed during the tests are highlighted. This is very useful for writing better tests and for improving the code coverage of your test suites.

3. UI Testing

One of the most anticipated features of Xcode 7 is the integration of user interface testing. In the past, I’ve worked with KIF and UI Automation, but I’ve never been quite happy with either solution. Xcode’s UI testing looks like the solution many of us have been waiting for.

XCTest Framework

User interface testing in Xcode 7 expands on Apple’s robust XCTest framework through the addition of three classes, XCUIApplication, XCUIElement, and XCUIElementQuery. To make the creation of user interface tests easier, Xcode 7 provides the ability to record tests. This is a very powerful feature that some of you may already be familiar with if you’ve ever worked with Apple’s UI Automation.

As with UI Automation, Xcode’s user interface testing relies heavily on accessibility. It’s therefore more important than ever to spend time making your applications more accessible to users with a disability.

Creating UI tests is a breeze

Note that UI testing is only available on iOS 9 and OS X 10.11. Apple emphasizes that unit tests and user interace tests complement each other. In other words, it’s not a matter of choosing one or the other.

While it’s easy to create user interace tests for an application, you are not expected to write UI tests for every possible scenario or use case. Start by focusing on common and critical use cases, such as user onboarding.

Test Reports

Test reports have also improved substantially. What I like most about the new tests reports is the addition of screenshots for failed UI tests. In addition to an error message, Xcode takes a snapshot of your application’s user interface when a UI test fails. This makes it very easy to find and fix the problem.

Learn More in Our Testing With Swift Course

If you want to learn more about testing with Swift and the XCTest framework, then I encourage you to take a look at Derek Jensen’s course about unit testing with Swift and XCTest.

Conclusion

Apple has put a lot of effort into improving testing and debugging with the release of Xcode 7. While integrated code coverage is fantastic, the addition of user interface testing is going to have an even bigger impact.

I hope this brief overview has wet your appetite for testing in Xcode 7. We will be covering these new features in more detail in future tutorials.

Using Color Theory to Improve Website Accessibility

There are tons of articles and guides about color theory and its importance for every web designer. Colors are really essential in design and may even influence people’s behavior in many cases. Thus, web designers usually check their website colors are suitable for the overall website style and that they create a good impression for users.

But focusing on standard color theory web designers often miss one point. There is a small amount of people who see colors differently. The specifics of their eyesight don’t allow those people to see particular colors the way other people do. Your beautiful website with colorful accents may simply not work for those people. Since color blindness affects about 6% to 8% of males and less than 1% of females you could lose a significant amount of potential customers.

Improve Website Accessibility with Color Theory

Why Be Accessible?

Paying attention to website accessibility in terms of color combinations gives you many benefits. You can still make a great-looking website with an excellent color palette but you can also please lots of people with visual disorders who can now access most of your website’s features. Here are a few more reasons for you to choose accessibility for your website design:

  • It allows you to score an advantage before your business competitors. If your website is color-blind-friendly and your competitor’s is not, you may win the battle and get more repeat traffic from this category of people.
  • Accessible websites may rank higher with search engines.
  • Non-accessible websites may fall foul of legal issues because they don’t provide equal opportunities for people with visual (and other) disabilities.
  • The ethical aspect is also important. People with visual disabilities simply cannot use non-accessible websites in full. It’s frustrating and really hurts UX.

Despite your possible fears, making a website accessible for color blind people is not such a hard task. In fact, sometimes it’s even harder to make a non-accessible website. With proper planning and a clever use of color theory and color contrasts you can create a really cool website with a great UX.

Accessibility Challenges

Of course, making the website 100% user-friendly for ALL kinds of users is an impossible mission. First, it’s hard to determine how exactly color blind people see colors. To tell the truth, even average users with no color blindness perceive colors and hues differently.

There are researches that cast some light upon the idea of how colors are perceived by people with different types of color blindness. But they are not absolutely accurate, so predicting what a color blind user sees is still a challenge.

You can always prioritize website elements and content to improve it and make sure most people will see it properly. There are many ways of making vital elements stand out and user-friendly. And you should definitely make sure that those essential elements are color blind safe. The best way of doing so is using contrasting colors for the background and the element itself. Thus, the traditional use of black text on a white background is determined by the high contrast between those two colors. Navigation elements should also be highlighted so users can easily differentiate between links and the main content.

Using Color Theory for Color Blind-Safe Design

The very first step in creating a color blind-safe website is choosing legible and well-matching colors for your color palette. Your task is setting aside color meaning and psychology and focusing on good color combinations and contrasts for creating legible website pages with strong hierarchy and accents.

You can use the following techniques and approaches to avoid possible pitfalls and have an accessible website design:

1. Avoid “Bad” Color Combinations
The most common types of color blindness are the difficulty of distinguishing between red/green and yellow/blue. So, avoiding those combinations can save you from offering a frustrating experience for color blind users. Other “dangerous” color combinations are:

  • brown/green
  • green/blue
  • purple/blue
  • grey/blue
  • green/grey
  • black/green
  • yellow/light green

Bad Color Combinations

2. Color Contrast is Good
As you may notice, the “bad” color combinations above are inappropriate because they are poor in contrast. Yellow and light blue colors are too close in the amount of light so they will be extremely difficult for color blind users to distinguish between the two.

Remember that color blind users should be able to easily tell the difference between two colors, like ordinary people do. It doesn’t matter what colors exactly they see; it’s about them being able to perceive them as two different colors. Note that color blind people are reportedly better at perceiving bright colors rather than distinguishing the difference between dull ones.

3. Use Complementary Colors
Complementary colors (the ones that are opposite each other in the traditional Color Wheel) are the best for achieving a great color contrast that won’t affect color blind users. Of course, except for pairing red and green colors that are also opposite in the Color Wheel but are a big no-no for most colorblind users.

Paletton

4. Choose Cool/Warm Color Contrasts
The Color Wheel can also be divided into cool and warm tones. Just divide it in half to set cool colors like blues, purples and greens aside from warm tones like yellows, oranges and reds. In most cases, contrasting between cool and warm colors works perfectly well and can be used for creating accessible designs. The idea is to combine a darker shade of a cool color with a lighter shade of a warm one. Don’t forget, that some color blind users have a yellow/blue type of visual disorder, so it’s better to avoid this combination.

5. Opt for Monochrome Palette
To make sure you’re not using some poor color combinations that can be not color blind-safe, go for combining several tints of one color. Monochrome design saves you from making the wrong choice. In addition, a monochrome palette and minimalist style go hand in hand and make your website really trendy and user-friendly.

Slayeroffice Color Palette Tool

6. Use Texture and Thickness for Creating Accents.
Adding texture to one of your colors makes it more prominent and helps to show the difference between two objects. Thick lines and bold text will be helpful as well. Some color blind people note that they can differentiate between two colors if they have some “weight”, while thin lines and text in italic are much harder to differentiate.

Tools and Resources for Designing Color Blind-Safe Website

There aren’t too many tools and services that are focused on creating websites safe for color blind users. You can always check color combinations on various color palette generators and look for complementary colors, as I advised you above. Here are a few more tools and resources that should help you in creating a website that is easy-to-use for color blind people.

Vischeck

A nice simulator that runs tests on images and web pages. With its help you can find out how people with different types of color blindness (forms of red/green or blue/yellow color deficit) perceive them, and build your website according to the results.

Vischeck

Colors for the Color Blind

A great resource that contains tons of info about the nature of color blindness, its types and their peculiarities. It also offers various tests for colorblind users and tools for checking website colors online.

Colors for the Color Blind

MotoCMS 3.0 Color Picker

This website building service offers a nice tool for checking colors. It automatically shows a color palette of a chosen template with 5 main colors and a row of hues for each of them. You can change the main colors and add new ones from the row below. The changes to the color palette will apply across the entire template.

MotoCMS 3.0 Color Picker

Color Blind Web Page Filter

This tool is still in development. But it already offers a cool range of filters that allow you to interpret your website as it is perceived by color blind people. You just enter your website URL in a field and choose one of the color deficiency types to check.

Color Blind Web Page Filter

Color Laboratory

This tool allows you to check how the 216-color webmaster’s palette is perceived by people with different kinds of visual color deficiency.

Color Laboratory

Conclusion

Of course, website accessibility is not only focused on color blind-safe features. There are other aspects that you should consider to make your website friendly for all types of users. Start with tests and check often to make sure your website is comfy for use and your traffic will grow.

Creating a List of Posts With the Same Categories as the Current One

If you’re running a large blog, you’ll need to find a way to help your readers find content that they’re going to want to read, based on what they’re currently reading or have just read.

One way to do this is by using one of the many plugins out there that identify related posts. These use various methods to identify other posts which have similar content to the current one, but sometimes they don’t give you quite the results you want.

One logical way to identify posts like the one currently on display is by using categories, tags or taxonomy terms. If you could identify the posts in the same categories as the current one, you could then display a list of the most recent posts in the same categories, to help readers find related content.

In this tutorial I’ll show you how to create a plugin to do just that. The plugin will give you a function which you then add to your single.php template file to show the list under the content of the current post.

What You’ll Need

To follow this tutorial you’ll need:

  • a development installation of WordPress
  • an existing theme with a single.php template file
  • a code editor

Setting Up the Plugin

Let’s start by setting up the plugin. Create a new file for your plugin—I’m calling mine tutsplus-related-posts.php.

In your new file, add the following:

<?php
/**
 * Plugin Name: Tuts+ Related Posts
 * Plugin URI: http://code.tutsplus.com/tutorials/creating-a-list-of-posts-with-the-same-categories-as-the-current-one--cms-22626
 * Description: This plugin identifies what categories the current post is in and outputs a list of the most recent posts in the same categories.
 * Version: 1.0.0
 * Author: Rachel McCollin
 * Author URI: http://rachelmccollin.com
 * License: GPL-3.0+
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 * Domain Path: /lang
 * Text Domain: tutsplus
 */

You’ll want to change the author details to your own details, but this gives WordPress what it needs to recognise the plugin and enable you to activate it in the dashboard.

Identifying the Current Post’s Categories

In order to identify other posts with the same categories, you need to get the list of categories the current post is in, and add them to an array.

Start by creating the function to hold your code, along with a few initializations:

function tutsplus_related_posts() {

    $post_id = get_the_ID();
    $cat_ids = array();

}

Now inside your function, use the get_the_category() function to fetch an array of data relating to the categories the current post is in:

$categories = get_the_category( $post_id );

The function has just one parameter, the post id, which specifies that it’s the current post whose categories you want to get.

Next, you need to create an array which will hold the IDs of all of the categories:

if ( $categories && ! is_wp_error( $categories ) ) {
        
    foreach ( $categories as $category ) {

        array_push( $cat_ids, $category->term_id );

    }
    
}

Let’s take a look at what this code does:

  • First it checks that $categories hasn’t returned null or an error.
  • Then for each category, it adds the ID to the array.

Your function will now look like this:

function tutsplus_related_posts() {

    $post_id = get_the_ID();
    $cat_ids = array();
    $categories = get_the_category( $post_id );

    if ( $categories && !is_wp_error( $categories ) ) {

        foreach ( $categories as $category ) {

            array_push( $cat_ids, $category->term_id );

        }

    }

}

Writing a Query to Output Posts in the Same Category

Now that you have an array with the category IDs in it, you can use it as an argument for a query to identify posts with those categories.

Still inside your function, set the arguments for the query:

$current_post_type = get_post_type( $post_id );
    
$args = array(
    'category__in' => $cat_ids,
    'post_type' => $current_post_type,
    'posts_per_page' => '5',
    'post__not_in' => array( $post_id )
);

These arguments will find posts of the same post types as the current one, in the same categories, and exclude the current post. I’ve set it to output five posts, but you could always change this, or any of the other arguments such as post type if you’ve applied categories to more than one post type.

Now run the query:

$query = new WP_Query( $args );

if ( $query->have_posts() ) {

    ?>
    <aside class="related-posts">
        <h3>
            <?php _e( 'Related Posts', 'tutsplus' ); ?>
        </h3>
        <ul class="related-posts">
            <?php

                while ( $query->have_posts() ) {

                    $query->the_post();

                    ?>
                    <li>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </li>
                    <?php

                }

            ?>
        </ul>
    </aside>
    <?php

}

wp_reset_postdata();

This outputs the post titles inside links to them, in a list. 

Adding the Function to Your Theme

The final step is to add the function to a template file in your theme. I’ve created a child theme for the Twenty Fourteen theme with a new single.php file, and I’m adding the function there, below the content. It can be added anywhere, as long as it’s within the WordPress post loop.

In your template file, add the following:

tutsplus_related_posts();

You can see the result below:

End of a post with a list of five related posts shown at the bottom

Note: The demo site is a little confusing as tags and categories are listed at the end of each post. Our list doesn’t use tags, just categories, of which each post in this site has one.

Alternatives: Tags and Taxonomy Terms

You can quite easily alter this function to work with tags or taxonomy terms instead.

To identify tags instead of categories, you would replace the get_the_category() function with get_the_tags(), and then replace the 'category__in' argument for the query with 'tag__in'.

To identify taxonomy terms, you’d use get_the_terms() in place of get_the_category(), adding the taxonomy slug as the second parameter. You’d then replace the 'category__in' argument with an argument using 'tax_query'.

You could also search for posts with the same terms in more than one taxonomy (including terms and categories), by creating two arrays and using two arguments in your query.

Summary

In this tutorial you’ve learned how to identify the categories the current post is in, add their IDs to an array, and then use that array to run a query displaying posts in the same category. This gives you more control than you get from most related posts plugins, and means you can define the arguments for your query so that the posts are displayed in exactly the way you want.

You can also adapt this technique to work with tags, taxonomy terms, or a combination of two or more.

Why Is jQuery Undefined?

For the advanced JavaScript developers (and the advanced jQuery developers) among our readership, this article is not going to be of much help. Instead, we’re going to be focused on those who are just getting started with jQuery.

Perhaps you’ve gone through several JavaScript tutorials, built several small sites or projects that incorporate JavaScript into the page (or the site) to some degree, and now you’re ready to get started with a new framework or library.

If you’re reading this tutorial, then I assume you’re interested in getting started with jQuery. Or perhaps you’ve already started with jQuery but you’re encountering a couple of hurdles that are hindering your learning.

As frustrating as it can be to learn something new, hit a roadblock and then have to repeat it a little bit further down the line, the silver lining is that the chances are that your problems have been solved by someone else.

This isn’t necessarily true for more complex applications, but when you’re learning something new, you’re not the first person to bounce along the learning curve. To that end, you’re likely able to learn something from someone who has been there before. 

And that’s exactly what we’re going to be covering in this tutorial. Specifically, we’re going to be talking about the problem when you receive the error message:

Uncaught ReferenceError: jQuery is undefined

Understanding the Problem

Before getting to the solution, let’s review exactly what’s happening. That is, in order to understand how we arrive at our solution, we need to understand the problem. Only then can we know how to solve what’s being displayed in the console.

Uncaught ReferenceError jQuery is not defined

If you’re familiar with JavaScript, then you know how confusing undefined can really be—that is, are we talking about the global object or a primitive value? That’s beyond the scope of this post (no pun intended!), but even if you’re not familiar with either definition, that doesn’t mean you’re not capable of diagnosing the problem.

Set Up a Sandbox

First, let’s go ahead and set up a page that includes the basics of what we need in order to work with the jQuery library to reproduce the error that we see above.

Start by creating the following HTML file and saving it somewhere on your local machine where you will be able to easily load it up in a web browser.

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    </head>
    <body>
        <p>This is a basic HTML sandbox.</p>
    </body>
</html>

Take notice that we’re including some CSS in this file. It’s completely optional, though if you’d like to follow along with this tutorial step-by-step, you can download an archive of all of this from the right-hand side of this post.

Although the CSS is optional, the JavaScript is not. Note that we’re including the jQuery library from a content-delivery network (or a CDN) so that we don’t have to include it within our project’s source files.

Next, let’s create a JavaScript source file that we can use in order to recreate the error above and to write some test code in order to solve the problem. We’ll call it main.js.

$(function() {

});

After that, include the source file in your HTML document such that the final file looks like this:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/main.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    </head>
    <body>
        <p>This is a basic HTML sandbox.</p>
    </body>
</html>

Now you should be able to load up the page in your browser and see something almost exactly like the console image shared above.

Verify Your JavaScript Is Loaded

Before going any further, let’s go ahead and make sure that the JavaScript file is loaded correctly. In order to do this, we’ll set up a simple alert so that a message is displayed whenever the page is loaded in the browser.

JavaScript Loaded

To see this screen, make the following change to your JavaScript source file:

$(function() {
    alert( 'JavaScript Loaded!' );
});

Next, make sure that you re-order the JavaScript files from:

<script src="js/main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

To:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/main.js"></script>

We’ll talk more about this in a little bit.

At this point, refresh the page. Assuming all went well up to this point, then you should see the dialog as demonstrated in the image above. If that doesn’t work, look over the code that’s above (or download the files attached to this tutorial) and make sure you’ve got everything loaded correctly.

Reproducing the Problem

Now that we’ve got the sandbox set up so that we can begin exploring the problem in-depth, let’s take a look at some potential problems that you may see when working with jQuery.

1. jQuery Is Loaded After Your Code

Whenever you opt to use jQuery in a project, this means that jQuery becomes a dependency for your work. And whenever you’re working with dependencies, you generally need to make sure that they are loaded before your code so that your code can take advantage of it.

If you notice in the first bit of code above, our JavaScript file is loaded before jQuery, so anything we’d like to do with jQuery can’t actually be done. The reason that you’re seeing the undefined error message that we discussed earlier is because jQuery is literally not defined within the context of your code.

That is, your code has no idea that jQuery even exists because jQuery is loaded after your code. Luckily, this is a simple fix. Simply change the order in which the files are loaded—that is, place jQuery above your source file, and then try to execute the code once more.

After the change, the full HTML should look like this:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/main.js"></script>

    </head>
    <body>
        <p>This is a basic HTML sandbox.</p>
    </body>
</html>

Your code should work and the console shouldn’t be displaying any errors. This is likely the easiest problem to solve, but it’s probably one of the least common errors to see, as it’s generally assumed that jQuery will need to be loaded first.

2. A Conflicting Plugin or File

When working with jQuery, sometimes developers like to modify the $ function so that it doesn’t conflict with something else that their source code uses.

Specifically, jQuery is the name of the function within the jQuery source code. The library uses $ as a synonym or a shortcut since it’s likely going to be used so often. It makes the code easier to type and easier to read.

No Conflicts

But it’s not the only JavaScript code that uses that function and sometimes developers will need to use a different function or relinquish the $ to another bit of source code. In order to do that, they may end up using jQuery.noConflict()

Straight from the API:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $

If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

So somewhere in the code that you’ve included, there’s a chance that another developer has made a call to this function. Thus, the $ function will not be accessible. It could potentially be calling a function other than jQuery itself, or it could be calling a function that is undefined

In our case, we’re interested in the latter. To address this, we can try a couple of solutions. First, we can try to reclaim access to the $ function by simply calling jQuery.noConflict() once again. Though this may solve the problem, it may also result in another problem that exists if another framework, library, or some other module is included with your code.

To that end, I only recommend using this whenever you’re absolutely sure you know what you’re doing and that it won’t affect other frameworks.

Properly Scoping $

But what if you don’t know that it won’t affect other frameworks. What then? In this case, you have the opportunity to initialize your code such that it will start with the basic jQuery function and then use the $ to scope the shortcut function into the context of your own code.

Sound complicated? Don’t worry. It’s not bad. Let’s edit our JavaScript source file to contain the following:

(function( $ ) {
    'use strict';

    $(function() {
        alert( 'JavaScript Loaded!' );
    });

})( jQuery );

Alright, here’s what’s happening:

  1. We’re declaring an anonymous function that accepts a single argument (in our case, jQuery).
  2. The function will be passed and referenced by $ and will be scoped only within the context of our anonymous function.

This means that we’re free to use the $ function however we see fit, without actually interfering with any other implementations of that particular function. In fact, for what it’s worth, this is somewhat the de-facto way to set up your jQuery-based code. 

Not everyone does it this way, but this is a very common, very safe way to handle it so that you’re able to avoid the whole undefined error message.

3. Are There More?

Absolutely. But the challenge is figuring out how to cover them all. The truth is, I don’t know if it’s actually possible because, at some point, the complexity of web projects becomes so great that tracking down where the problem exists can be tough.

Furthermore, changing jQuery to do what you want it to do might end up breaking something else (which is obviously never a good thing).

Instead, it’s best to stick with what we know is safe—like the anonymous function approach mentioned above—and not to abuse things like the noConflict() method. After all, part of good development is not only playing nice with other people’s code, but writing code with which others may play nice, as well.

Conclusion

As outlined above, there are a number of different things that could trigger the jQuery is undefined message in your console. We’ve attempted to look at several of the most common problems in the examples above.

That said, it’s hard to be exhaustive because it’s near impossible to cover all of the combinations and permutations you may have set up in your project. Perhaps you’re using a conflicting library, maybe it’s a poorly written plugin, or maybe there are just dependencies that are not properly ordered.

Whatever the case may be, this hopefully helps explain what the problem is and some ways that you may move forward with diagnosing it. If your solution wasn’t outlined here, then please feel free to leave it in the comments.

Additionally, if you have any other questions, feel free to leave them in the comments below and I’ll aim to answer them to the best of my ability.

The Beginners Guide to WooCommerce: Shipping Settings Part 4

In the previous beginners guide I explained half of the Shipping settings. Today I’ll be guiding you people about how to configure the two remaining options termed as Local Delivery and Local Pickups. So, let’s get to it.

Local Delivery

Shipping via Local Delivery means that you will deliver items to your customers locally, i.e. within the geographical boundaries of your base location within the same city or country. WooCommerce allocates a separate section for this type of shipping. Let’s see how you can configure it.

Enable local delivery

The first two options are:

  • Enable: This is used to Enable/Disable this shipping option.
  • Title: Set the title of this form of shipping for the front-end display.

The default setting is an unmarked Enable/Disable checkbox, while Local Delivery is the Title.

Fee type and amount

The next two fields, Fee Type and Delivery Fee, are dependent upon each other. 

  • Fee Type: This manages how the delivery charges for local shipping are calculated, and offers various options through a dropdown menu.
  • Delivery Fee: This quotes the exact amount that a store owner will charge customers if they select local delivery as their method of shipping. 

Let me explain the role of these two options in Local Delivery shipping via examples. Consider three cases.

Case 1: Fee Type = Fixed Amount & Delivery Fee = 10.

Cart showing order total of 47 pounds

Fixed amount means that a standard rate will be charged to customers for the delivery of their product. In the above figure you can see that the cart page displays £10.00 as a fixed rate for local delivery. So the actual product price was £35.00, and when this fixed amount is added (i.e. £10.00) along with the VAT value (£2.00), the total cost of the order becomes £47.00.

Case 2: Fee Type = Percentage of cart total & Delivery Fee = 10.

Cart showing order total of 39 pounds 20

Percentage of cart total means that whatever you write in the Delivery Fee field will be considered as a percentage value and the delivery charges will now apply as a percentage of the item price/value. 

In this example we have set Delivery Fee = 10, which corresponds to 10%. So charges for local delivery will be calculated by "10% of cart total" i.e. 10% of £35.00 = £3.50. Similarly, in Case 1 VAT was £2.00, and now VAT becomes £0.70. All these costs generate a total price of £39.20 (i.e. £35.00 + £3.50 + £0.70). 

Case 3: Fee Type = Fixed amount per product & Delivery Fee = 10.

Cart showing order total of 83 pounds

This option for Fee Type is somewhat similar in function to Fee Type=Fixed Amount, because with this option a fixed amount will be charged on every product. The figure above shows that two products are there in the customer’s cart worth £35.00 and £20.00. This means a delivery fee of £10.00 will be imposed on every product. Hence, the total cost of local delivery becomes £20.00. Similarly, VAT will apply separately on every product, so that now becomes £8.00. The total cost of the order becomes £83.00.   

Make sure you click the Save Changes button after every configuring every option.

Zip codes and Method availability

In the last two fields you will specify all those Zip/Post Codes and Countries where you will offer shipping via local delivery. You can add multiple codes, each separated by a comma.

Local Pickup

In my opinion the least preferred method of shipping is Local Pickup, where customers have to come and collect their products directly from the store owners. This shipping service nullifies the concept of an online store. Despite all these facts, WooCommerce offers Local Pickup.

Local Pickup options

The first two options are:

  • Enable: This is used to Enable/Disable this shipping option.
  • Title: Set the title of this form of shipping for the front-end display.

The default setting is an unmarked Enable/Disable checkbox with Local Pickup as the Title.

As no additional charges or geographical boundaries are involved in this type of shipping, the settings in this section are quite simple and straightforward. The figure above shows various options which can be configured. 

Quite similar to the last shipping settings, in the last two fields you will specify all those Zip/Post Codes and Countries where you will offer shipping via local pickup. You can add multiple codes, each separated by a comma.

In the next article I will start configuring the Accounts section in WooCommerce. Till then if you have any query regarding the shipping settings you may ask in the comment box below. Cheers!

How You Can Help Educate the Next Generation of Web Professionals

The web industry is growing fast: no-one can dispute that. But what is being disputed within the industry and in the media is whether or not there are enough skilled people to fill the jobs that are being created.

The existence of a skills gap is something that’s interpreted differently by different analysts: some point to high levels of unemployment and the fact that there are plenty of workers available to fill jobs, while others argue that it’s not just any old workers that are needed to fill the high-skill jobs in the web industry, but skilled individuals. Sites like the Huffington Post have reported extensively on the nature of the skills gap and how it can be addressed. Some estimates paint a more worrying picture, estimating that there will be a shortfall of a million skilled coders in the US by 2020.

But whether or not the skills gap represents a crisis, there’s one thing you can’t argue about: today’s kids and young people will need a skill set that hasn’t traditionally been taught in school or college, and what’s more the skills they’re learning now may be at least partially obsolete by the time they enter the jobs market. If today’s kids are going to be filling the high skilled development jobs of the future they don’t just need to know how to use a computer or even how to write HTML: they need a deeper understanding of how computers work and a lack of fear when it comes to working with new technologies and trying new ideas.

The education system is working hard to catch up: in the UK, ICT has been replaced by a new flexible Computing curriculum with less focus on word processing or creating Powerpoint presentations and more on code. In the USA school districts are attempting to catch up, but there is evidence that Computing isn’t consistently being given the emphasis it might be. Even with an evolving curriculum, teachers, particularly at Primary or Elementary level, can find teaching computing daunting, as it’s often not part of their skill set.

So what can experienced web professionals do to help address this and reduce the risk of not being able to fill jobs in decades to come? In this article I’ll examine some of the initiatives taking place, and suggest why and how you can help to educate the next generation of web professionals.

Do Kids Really Need You?

It’s safe to say that a huge proportion of kids and young people love computers, and they don’t just want to use them passively. The immense success of MInecraft and the popularity of using it in creative ways shows that there is an appetite for doing something more with a computer than passively following the rules and storyline of a game.

But Minecraft doesn’t teach all of the skills people need to pursue a successful career in the web industry. It’s not just people who can sit at a computer for hours and produce code that will be increasingly needed, but also experts in human machine interaction as UX and UI become more important, and people whose creativity means they can invent future technologies and solve problems we haven’t even come across yet.

2 kids at a Code Club
These kids love their Code Club.

Students can learn some of these skills in other ways: for example creativity can be applied across the curriculum and an understanding of UX can come from studying Psychology or Ergonomics. But learning to code can help kids with problem solving skills, understanding of basic concepts, the ability to identify why something isn’t working and fix it, and developing their ideas. Importantly it also helps them lose any fear they might have of doing more than just using a computer as a tool.

Most people who work in the web industry will tell you a personal story of how they dabbled with computers at a young age. If they’re of a certain age, they’ll also tell you that this was frowned upon by adults who didn’t ‘get it’. Personally I used to spend my lunch breaks in the computer room at school learning how to program my own games using BASIC (and playing other students’ games too, saved on floppy disk). My teachers thought this was a waste of time so I would tell them I’d spent the hour at the dance club. I think the way I chose to spend my time turned out to be more useful!

An interest in computing certainly isn’t frowned upon by teachers these days, but sometimes it’s not understood: most teachers have a background in non-technical subjects (especially at Elementary level), and may not have an intuitive grasp of what their students are doing and why it excites them so much. Which is where people from outside the education system—professionals—come in.

What’s In It For You?

There are a variety of ways that people with coding and/or web design and development experience can get involved in helping kids and young people learn key skills, but before I go into those, let’s take a look at the benefits.

  • It’s fun. Taking part in something like a Code Club or a Coder Dojo takes you away from your desk and gives you a chance to do something different. Working with kids who are so motivated by the subject is lots of fun.
  • It consolidates your skills. If you’re passing your own skills on to an audience, it makes you reflect on what you do and why. It also helps you identify any bad practices you might have picked up over the years and correct those.
  • You learn from it. I’ve been running a Code Club for a year now and it’s prompted me to learn about coding languages that I hadn’t worked with before, so that I can support the kids.
  • It’s inspiring. Working with kids is completely different from working with adults. Their enthusiasm, creativity and refusal to be constrained can be quite energising and make you approach your work in new ways.
  • It’s an investment in the future. The more of us get involved in passing on skills to young people, the more skilled people there will be to work alongside us in the future. Don’t think of them as the people who’ll be snapping at your heels in ten years’ time: think of them as future coworkers or employees.
  • It’s great PR. If you run an agency or other business, having a public involvement in educating kids and young people helps you engage with the local community and gives potential clients and employees a positive impression of the way you work.
  • It can motivate staff. If you employ people with technical skills, giving them time to get involved in Code Clubs or similar will help motivate them and increase employee loyalty.

Personally I run a Code Club once a week and enjoy the fact that it gets me away from my desk and into a completely different environment. I enjoy working alongside the teachers and seeing the moment when a student suddenly grasps a new concept or creates something they never thought they could.

How to Get Involved

There are a few organisations that exist to link experienced adults with kids and young people who want to learn. Let’s take a look at some of them: Code Club, Hour of Code, CoderDojo and Young Rewired State.

Code Club

Code Club website

Code Club links volunteers with kids who want to learn code. It’s aimed at 9 to 11 year olds and most of its clubs are run in primary schools. It started in the UK but is expanding internationally.

You can either sign up to run a club at a venue you’ve already identified (your local school or community centre, for example), or you can register to volunteer and be matched with a school or venue that’s looking for someone.

As the clubs normally take place in schools, you won’t need to find a venue or audience, and you’ll work alongside a teacher, meaning you don’t need to worry about behavior or any of the non-coding aspects of the club.

Boy coding on a laptop
Help kids learn code by becoming a Code Club volunteer

Erietta is a Code Club volunteer who really enjoys getting involved:

"As a programmer, I am very enthusiastic in both learning more myself, and teaching others. Code Club provides me with a way to share my knowledge, and it’s a great chance to do something different and break the daily routine. Plus it may make more people interested in programming, which is something the field needs!"

All of the lesson materials are provided: these cover Scratch, HTML and CSS, and Python. There is flexibility though, and plenty of Code Club leaders also teach the kids about their own areas of expertise.

Hour of Code

Hour of Code website

The Hour of Code initiative was established in the USA in 2013 with the goal of making computer science available to more schools, with a specific focus on increasing women’s and ethnic minority participation. It has support from some of the biggest US tech firms, including Amazon, Apple, Facebook, Google and Microsoft, as well as an advisory team made up of education experts from universities and other organizations.

A lot of the resources on the Hour of Code website are targeted at teachers, providing them with the tools to run coding session with their students, but there are also opportunities for people who aren’t teachers. You can teach the introductory course as a volunteer, but unlike Code Club you’ll have to do most of the work yourself: getting it off the ground, finding a venue and publicising your course to students. The lesson materials are all provided.

If you don’t have time to get involved to such an extent, you can help by adding tips to the online tutorials, which is something that can take as little as 10 minutes.

Coder Dojo

Coder dojo website

Coder Dojo is a network of free computer programming clubs with a global reach. Its audience is young people aged between seven and 17, and it covers a wide range of topics including web design and development.

Volunteers are called Coder Dojo Champions, and they take responsibility for setting up, running and maintaining a club (or Dojo). You don’t have to do all the teaching yourself: you can bring other volunteers in to help. You’ll have to find a venue and publicise the Dojo yourself, but you do get support from the Coder Dojo team.

If you aren’t ready to commit to running a Dojo yourself, you can register as a volunteer and help out at an existing Dojo, which is a great way to add as many skilled professionals as possible to each Dojo and offer learning on more topics. 

Young Rewired State

Young Rewired State website

Young Rewired State is a movement aimed at ‘digital makers’ aged 18 and under. It runs regular events (called Hyperlocal) in local communities as well as annual events such as the week long Festival of Code, which takes place in the UK and brings young coders together from across the UK and internationally to work in teams and compete against each other.

Chloe Gutteridge is just one of many young people who’s benefited from YRS:

"YRS has been a great help in me learning to code. I learnt more in the first 5 days of their Festival of Code than I had in the two years of computing lessons I’d had previously. I can’t wait until the Festival this summer!"

YRS is less formal in its approach than other initiatives: instead of having lesson plans or a curriculum, it brings young people together and encourages them to work on their own projects together or explore languages or technologies as a group.

YRS - hundreds of young people in a large space with computers
2014’s Festival of Code

A number of Hyperlocal groups are run by digital agencies at the weekend, so this is a great way to get involved if you run or work for an agency that wants to help develop young coders.

If you’re outside the UK, you can get involved via the Everywhere initiative, which takes place online and via weekend events in cities like New York, San Francisco, Berlin, Kosovo and Singapore.

Summary

Learning to code and to design and develop for the web is lots of fun, and it’s going to be an increasingly useful skill for young people as more quality job opportunities are created in the years and decades to come. By getting involved in passing on your skills to the next generation you not only get a huge amount of satisfaction and enjoyment right now, but you know you’ve helped invest in the future of the industry.

There are plenty of organisations and initiatives around the world that you can get involved in as a volunteer: so what’s stopping you?

Image credits: Code Club/Chocolate Films Ltd, Young Rewired State.