JavaScript, learn to use JavaScript, using JavaScript in WordPress, learn to code in WordPress, WordPress coding tips, WordPress coding tutorials, how to use wp.template, using wp.template, wp.template tutorial

How to Use wp.template, WordPress’ Underscore.js Template Method

Like many developer agencies, we have a few different audiences, including clients (current and prospective) and other developers. Our aim is to serve all of our audiences, who fall on a broad spectrum of technical knowledge. Even if you’re not a professional developer, we know that many of you still educate yourselves on the technology used on your site–and we want to help! If there’s anything we cover that you don’t understand (or anything you’d like to see us cover that’s WordPress related, even 101!), please let us know. There are no stupid questions.

That said, let’s dive into something fun: WordPress’ Underscore.js Template Method, wp.template.


If you’re not yet familiar, wp.template() is a cool little JavaScript utility method that is provided with the WordPress core ‘wp-util’ script. At its core, it uses the Underscorejs .template() method.

WordPress uses this utility to load templates for all of the backbone views, but backbone is not required to use it. First, I’ll demonstrate using wp.template() with a little jQuery in order to output some JavaScript data into an HTML template, then later as a bonus, we’ll rebuild wp.template() as our own module with some additional features.

Keep in mind: this is meant to be an example presented as simply as possible, and not something you would copy/paste into production code. Please continue to follow standard best practices, including things like putting JavaScript in its own file, avoiding anonymous functions, internationalizing your text strings, etc.

By default, the method requires a script tag with an id of tmpl-my-template-name. Because all of WordPress uses this templating method/system, you will want to make sure you properly prefix your ids, so as not to conflict with another template that may be loaded on the page. That script tag should also have a type of “text/template.”1

Let’s get started:

<?php 
function zao_item_status_tmpl() {
    ?>
    <script type="text/template" id="tmpl-zao-item-status">
        <span class="zao-status" data-id="{{ data.id }}">
        <# if ( data.status.name ) { #>
            <div class="zao-item-status">
                <span class="zao-status-color" style="display: inline-block;background-color:{{ data.status.color }};width:10px; height:10px;"></span>
                {{{ data.open }}}
                    {{ data.status.name }}
                {{{ data.close }}}
            </div>
        <# } else { #>
            &mdash;
        <# } #>
        </span>
    </script>
    <?php 
}

So now we have the proper script template tag ready to go in a PHP function, with unique id, tmpl-zao-item-status. As you can see, this isn’t 100% standard HTML. You can see we are using Mustache-inspired data variables, as well as Underscorejs logic blocks.

From the Codex:

WordPress defines its own interpolation tags using the _.template( options ) to avoid incompatibility in some PHP configurations with asp_tags enabled. The WordPress-specific interpolation syntax is inspired by Mustache templating syntax:

  • Interpolate (unescaped): {{{ }}}
  • Interpolate (escaped): {{ }}
  • Evaluate: <# #>

An important bit to understand is the <# and #>, which signals the opening/closing of raw JavaScript output, so you can do things like logic operators (like the if statement in the example above). You can also see we’re taking advantage of the unescaped interpolation when we output the data.open and data.close parameters, since those will contain HTML and we don’t want that escaped.

At this point, let’s hook into WordPress so we can see this in action.

Add this snippet somewhere in your theme’s functions.php file, or a custom plugin:

<?php 
// Output this at the top of the post-edit screen just below the title input.
add_action( 'edit_form_after_title', function() {
    ?>
    <span class="zao-status"><span style="display: inline-block;background-color:red;width:10px; height:10px;"></span> Please wait...</span>
    <?php 
} );

If you go to a new-post or post-edit screen, you should see something like this:

That doesn’t do much for us. We’re going to need some JavaScript setup to grab our updated status and update the status markup. To simplify, we’ll simply fake an AJAX request by setting a short delay. You could also using something like the Zao Mock API to mock some API requests/responses.

The JavaScript:

<?php 
function zao_item_status_js() {
    ?>
    <script type="text/javascript">
        // Wait for the dom to be ready..
        jQuery( function( $ ) {

            // Get the template function corresponding to our template markup.
            var template = wp.template( 'zao-item-status' ); // uses script tag ID minus "tmpl-"

            // Let's wait a tick, so we can see it go from yellow to green.
            setTimeout( function() {

                // Let's fake some data (maybe this is data from an API request?)
                var tmplData = {
                    id: 1,
                    status: {
                        name: 'Success!',
                        color: 'green'
                    },
                    open: '<span class="status-name" style="color:green">',
                    close: '</span>'
                };

                // Send the data to our new template function, get the HTML markup back.
                var html = template( tmplData );

                // Now let's replace the contents of the existing markup with our updated template markup.
                $( '.zao-status' ).html( html );
            }, 1000 );
        });
    </script>
    <?php 
}

The code comments should be self-explanatory, but to recap:

  1. Call wp.template() with the ID of the script tag we created earlier minus the tmpl- prefix
  2. Fake an API request by setting a one second delay
  3. Generate an object of data and pass it to our new template function which returns the compiled HTML
  4. Take that HTML and replace the existing.

We now have the JavaScript output in a PHP function, which we can hook into the footer. We have almost all the pieces we need to make this work, so let’s update our edit_form_after_title anonymous function:

<?php 
// Output this at the top of the post-edit screen just below the title input.
add_action( 'edit_form_after_title', function() {

    // Hook in our template script tag to the footer.
    add_action( 'admin_footer', 'zao_item_status_tmpl' );

    // Hook in our custom JS for updating the status.
    add_action( 'admin_footer', 'zao_item_status_js' );

    // Now, enqueue the WP util script so we can use wp.template
    wp_enqueue_script( 'wp-util' );

    // Make the initial output have a yellow status square
    ?>
    <span class="zao-status"><span style="display: inline-block;background-color:#ffe24d;width:10px; height:10px;"></span> Please wait...</span>
    <?php
} );

With that, we should see the status go from yellow (“Please wait…”) to green (“Success!”).

wp.template success! gif

wp.template success!

Hopefully, this basic example will help you get started using wp.template() in your own work, but if you have any questions, please leave comments below.

The full output for this example snippet can be found here.

If you’re still with me: now that we’ve covered the basics of the WordPress’ utility, you might be interested in a similar utility based on wp.template() which I created, _templatize. This script simplifies the above steps a little by combining the template-getting and data-sending, and also provides a feature that allows creating a template by passing it an HTML string (vs being tied to a tmpl- script tag in the dom). As a bonus, you can see the above snippet updated to use _templatize here.


  1. The key is that it shouldn’t be type="text/javascript" (or no type specified). More info 
a team of people around a wooden table with a white woman writing on a notepad and the post title "So You Want to Hire a Contractor"

So You Want to Hire a Contractor… (Part 1)

If you are running a small development or design agency (or working solo, but looking to grow), you may wonder when you’ll be able to actually hire employees. Hiring a team–even one person–can be intimidating.

You may be worried about taxes, whether you can afford it, or how you’re going to find someone who is a good fit. You might be panicking at the amount of work you have piling up while knowing it simply is not possible to hire a team member and offer them the full benefits of a regular employee. You know you need additional hands on deck, but you’re not sure you can start fleshing out a team of full time employees

That’s when it’s time to hire a contractor.

Getting started

One of the easiest ways to find someone who is a good fit is an obvious one: ask around. It’s likely someone in your industry has a solid lead on who can help you out.

You can contract for whatever help is needed the most.

Here are a few things I’ve seen developers hire contractors for in the past:

  • Development
  • Design
  • Social media management
  • Content management
  • Writing
  • Customer service
  • Tech support
  • Project management
  • Virtual assistance

Word of mouth is a great way to find folks, as is reaching out to any professional communities you’re involved in for recommendations.

While trying to find someone within your network is a good start, it’s also worthwhile to put out a call to online job boards (or even just a call out on your site). While we’re all inclined to invest more trust who is only a few degrees of social separation away, you want to have options. You never know who is lurking out there and will jump at the opportunity to work with you. Maximize your opportunities to create an amazing team by utilizing both your network and platforms that expose your call for a contractor to a new audience.

Vetting

A huge aspect of productivity and success is having an incredible team. Although someone may not be formally joining your company, working with them even on a part-time or short-term basis means that you are working as a team.

A part-time or short-term team member can still have a huge impact on the work you’re creating and your clients’ experience. You want to make sure that they’re a good fit! If you don’t put the effort into finding a contractor that will enhance your team, you’ll wonder why you bothered at all. A bad personality or work style fit can create stress and unrest, and diminish the overall quality of your work. You want someone who is going to work well with you and deliver the goods.

Do your research

Do they have a website with samples of their work? Resumes are great, but often incomplete–especially if they’re performing a specific kind of work (development, writing, etc.). You need to see samples of the work they’ve done in the past.

Keep in mind: if the work is live on a client’s site, it may be different than what the contractor intended. How many times have you recommended something to a client, only to have them shoot it down? Or, worse, go in a completely different direction that you think is questionable (at best)? We’ve all been there, and as we know, clients get veto power. They’re hiring us to create what they need and want, and sometimes we disagree on the best way to accomplish that.

You may come across a sample that makes you go, “Buh? What is that?” Make sure you compare other pieces of their work to that, and look for consistency. Ask yourself, “Is this a deviation or a norm for their work?” You want to make sure that you’re not judging them based on decisions that weren’t entirely their own.

If you find a sample that makes you go, “??!?” to be anomalous, you can bring questions about it to your interview.

Doing this research gives you a fantastic starter for your first conversation with them, as you can ask them how they created this work, what kind of challenges they experienced while doing so, and other relevant questions. These questions offer insight into not only the work itself, but how they conduct themselves professionally and when facing adversity.

Ask for references

And make sure you check them! Even if you get a word of mouth recommendation, make sure you ask for a few additional references and follow through on tracking them down. You want to know that your contractor can consistently deliver good work and maintain relationships. Several good recommendations can give a lot of insight as to who they are and what they’re like to work with.

For example, what most of my references will tell you about me (both good and bad):

  • I’m a consistent, open communicator.
  • I’m also an overcommunicator, meaning I check in a lot and tend to follow up with the persistence of a hungry bed bug out for blood (or a puppy looking to play ball, if you’d prefer a less disgusting analogy).
  • I work hard to make sure what I’m delivering is the best it can be, and have an eye for additional opportunities (don’t get them started on how many times I’ve said, “That’d be a great blog post!” in the middle of a meeting).
  • I’m opinionated and outspoken, which surely can be annoying, but it comes from a place of advocacy and wanting things to be as high quality as possible.

Does this mean I’m a good fit for everyone? Surely not! A good fit for some, but not for others. It’s good information to have either way. A “good fit” is entirely determined by your personality and working style.

Another example:

If you find out that your contractor is a bit lackadaisical with communication, but always delivers work on time, you’ll have to determine what’s the most important to you. Would you prefer someone who communicates well but is sometimes flexible on deadlines? Or would you prefer someone who doesn’t communicate as much, but always shows up exactly when they say they will?

Of course, ideally you’ll find a candidate that checks off all of your boxes, but people are fallible creatures. If you know what your values are, you’ll be able to parse the information recommendations provide and apply it to your dream team scenario with ease.

Conduct an interview

Get on the horn and talk to your potential candidate! Even if most of your communication while working will be done virtually, take a moment to hop on a call. You want to get a sense of who they are through their tone and the way they verbally communicate. You’ll want to use this time to set your expectations for them. This is also an opportunity to ask questions about their experience and the way they approach problem solving and conflict.

Make sure you’re upfront about who you are and how you work, too. Give space for them to ask questions. Remember: This interview is their opportunity to interview you, too. It’s about finding a mutually beneficial set up, not just about you finding a crony. It needs to work for everyone.


In part two, we’ll cover what you need to get organized and logistics for hiring contractors.

Have any questions about the start of this process or any burning questions about hiring contractors? Drop it in the comments!

Macbook laptop sitting on a brown table with WordPress dashboard open next to a cup of coffee, with the title "Yes, You Want Your Business Site on WordPress" across the lower center of the photo

Yes, You Want Your Business Site on WordPress

WordPress is powering more than a quarter of the web, but many businesses have shied away from taking the leap. Overhauling an entire site to move to a new content management system (CMS) can be intimidating. Businesses have a wide variety of concerns that prevent them from making such a big technology shift–even if the shift would be beneficial in the long-term. There are also a wide variety of myths surrounding what WordPress does and how it can benefit a business (or, rather, how it won’t).

I’m here to give you a few reasons that you want your business site on WordPress:

WordPress isn’t just for blogging

Although those of us in the WordPress industry already know this to be true, there are a lot of non-WordPress folk who still believe WP is just for blogging. Many of them aren’t even clear of what WordPress is.

WordPress provides all kinds of opportunities for your entire site, and it’s not just a place to host thoughts scribbled in a blog. Whether you want a member site, an e-commerce store, or a sleek, beautiful design to represent your company, WordPress can do all of that–and more. Since WordPress is endlessly advancing and changing, the bounds of what it can do are determined by the skill and creativity of the person building on it.

The learning curve is a little steep, but it’s worth it

Although WordPress boasts a five minute install, the average person is going to spend a bit longer setting it up. For someone who doesn’t have the technical savvy, getting a WordPress site set up the way that they want can be a challenge.

Don’t let that stop you from taking it on!

One of the best parts about WordPress is that it’s open source software, which means the source code is available to the public for study, alteration, and distribution. Most of the folks in WordPress are deeply committed to advancing open source software and giving back to the public by making it better and faster. The best and brightest professionals are giving their time to make a free software the absolute best it can be–which benefits all of us.

The work developers do requires expertise and skill, and when you hire them to do the work for your business, you pay for their extensive time and effort. In addition to that, they provide a public service by making WordPress, a free tool, widely beneficial and accessible to everyone. You may hire one developer, but when you work with WordPress, you benefit from the community work of countless brilliant minds.

If you stop and think a moment about all the people who generously give their time and knowledge, often without compensation, to create one of the strongest platforms available, you’ll realize it’s a community worth joining.

Since WordPress enthusiasts, professionals and amateurs alike, are so dedicated to enhancing the software and innovating with the tools provided, there are a ton of resources available for learning how to do what you want to your site. Sites like WPBeginner and WP101 aim to educate people on the fundamentals of WordPress, and if you do some Googling, you’ll easily find a wealth of answers to almost any question you have.

If you’re still worried about that learning curve, many WordPress developers and designers offer WordPress education as a part of their services, so the day to day dealings can be handled by you or your staff without a struggle.

WordPress makes content management easy

Yes, WordPress is a content management system, but that doesn’t just refer to blogging. “Content” describes nearly everything on your site–videos, photos, and text.

As a CMS, WordPress is the absolute best. Once you learn the basic terminology and know where things are in the dashboard, updating your site is easy peasy.

Even if you have a staff of Luddites, teaching them how to handle basic content management in WordPress is super simple! This means your staff will be empowered to make those changes and can handle the content on your site as a part of their duties. This means less oversight from you, which gives you time to focus on running your business. Empowering your staff to use your technology allows you to delegate responsibly and allocate your time to where you need it most.

Integrating with WordPress opens up your audience

One of the ways we’ve helped our clients is by building them their own WordPress plugin. This is particularly helpful for companies that offer a digital product or service and have a target audience that is building out their own business sites.

We have an example of this from our own experience:

Quantcast Corporation is a technology company that provides real-time measurement and analysis of advertising and audience engagement. Quantcast hired us to create a WordPress plugin that puts a JavaScript snippet in the header of their users’ sites. This extended their service out to the greater WordPress community and provided a huge benefit to their existing users. Quantcast users with WordPress websites can install the Audience Analytics plugin. Then, their Quantcast account is linked directly to their WordPress site and they can access their site analytics through WordPress super easily.

WordPress can scale–which means it can grow with your business

To make it do so successfully, though, you’ll definitely need the assistance of a professional. This part gets a little technically advanced, but Smashing Magazine took a look at what different developers have done to set up high traffic sites for success. WordPress isn’t the only key component in the fight to keep your site performant, but it’s not going to be what holds you back.

Getting on WordPress means being in good company

There are tons of businesses and major publications that are on WordPress, including:

  • WorldPay
  • Amazon
  • Disney
  • Politico
  • The NBA
  • Discovery Communications
  • USA Today
  • Microsoft Office Blogs
  • FiveThirtyEight
  • Airbnb

And many, many more. Big names take their technology seriously, and they’ve chosen WordPress to best serve their massive audiences.

So what are you waiting for?

development retainer, when should i put a developer on retainer, should i have a developer on retainer, should i have a programmer on retainer, hiring a programmer, when to hire a programmer, hiring a programmer for my business site, business site development, eCommerce development, WordPress plugin development, build a plugin for my business, build a WordPress plugin for my business, build an eCommerce site, hire someone to develop an eCommerce site

Why You Pay a Premium for Web Development Retainers

When folks think about hiring a service provider, they’re usually looking for help achieving one particular goal.

Whether it’s hiring a lawyer to draft a will, a contractor to remodel your kitchen, or a developer to build your website, the goal is to finish one specific project and set you up for future success on your own.

But what if you know you’ll need ongoing support from your chosen provider? What if you think this project isn’t the only thing you’ll need their expertise on?

That’s when you want a retainer.

What’s a retainer?

A retainer is a fee paid in advance to a service provider to secure their services. People most often associate retainers with lawyers, but all kinds of service providers offer retainer accounts, including developers. While a developer can build your site and send you on your way, retaining a developer’s services on a long-term basis is a fantastic way to make sure your technology is being handled by an expert as your business grows.

How web development retainers help you

Most developers offer a broad variety of services: building and designing websites, building apps, conducting code audits, debugging code, updating your site (particularly relevant if you’re on WordPress and things fall behind), and more. As your business grows, your technological needs will change. Justin talked about this in his most recent post covering code audits:

…Some plugins do well if they’re on a site that has no users logged in. However, if that same site has switched to a subscription model, it won’t have caching layers that allow the plugins to run as smoothly. Your client may not know this difference. All they know is that they made the switch when they needed to shift their business model. They didn’t recognize the impact it would have on their technology.

As your business changes, issues like the one outlined here may crop up–without you understanding what is happening or how to fix it. If your business goes through a sudden growth spurt, your site may not be able to handle the traffic or engagement, which could be financially devastating. And if your site goes down, if you don’t have technical support, you’re on your own, since most developers can’t drop everything they’re doing to work on your site (or if they can, they’ll charge a pretty penny for it).

Having a technical expert in your corner ensures that your technology will grow alongside your business. It means that you can either outright avoid or quickly ameliorate any pain points that arise, which makes your life less stressful, your business run smoothly, and your clients happy.

But retainers are expensive!

Some folks argue that retainers are a waste of time, since you pay for the hours upfront and if there isn’t work to be done, not all of those hours may be used. Although the nature of transactions like these is how they’re outlined in terms of hours, thinking of it this way is too simple. You’re paying for so much more than just the hours.

Priority and access

If you’ve ever desperately needed tech support and tried to find it last minute, you’ve likely discovered how difficult it is to get it done as quickly as you need it. If you have managed to find someone to handle it, they likely charged you a ton of money to handle the immediacy of the request.

Setting up a retainer with your web developer means paying for priority. They’re turning down other work in anticipation of being available to you.

At Zao, in particular, we provide a higher level of access to not only our time, but also, in immediacy of response. That different level of access means reaching us during a broader range of hours (particularly good in an emergency), as well as a quicker turnaround.

A working knowledge of your business

Any developer who is working with your site should make it their priority to know your business. They need to know your technical pain points and goals, of course, but they should also keep your broader business goals in mind as well. When you hire a developer on retainer, it means you’re keeping a consistent tap on someone who filters your professional objectives through a technical lens. It means they can anticipate your technical needs and potential obstacles you may face in the future–and help you plan for it.

It also means you have someone who knows your code inside and out, so fixes are a lot quicker and easier. It means your development is consistent in quality, delivery, and expectation.

No DIY worries

How often do you get your oil changed? Tires rotated? Do you do it yourself, or do you hire a professional to handle it so that you don’t have to worry about getting your hands dirty?

Maintenance doesn’t just apply to cars; it applies to your technology, too.

Of course you can handle the WordPress site updates yourself, but do you really want to add something to your ever-growing to-do list? And do you have the technical capability to handle it if an update shuts down your site?

That aforementioned access and expertise comes into play here, because with a developer on retainer, you can build maintenance into your agreement with them. Not only can they handle the basic tweaks to keep everything running, but they also have the skill and time dedicated to you to fix anything should an update go awry.

Retainers can be spendy, but they’re an investment.

Rather than handing over your arm, leg, and one extra pinky toe to pay for an urgent fix, retainers are an investment in technical partnership that prioritizes your emergencies and needs. They may seem spendier in the long run, but when you consider the cost of emergencies, it is pennies in comparison.

A one time buy is for vendors, but retainers create technical partnership

Paying for a retainer means essentially paying someone to join your team. One of our values is family, and that extends not to just our families, but to creating a kind of family in our professional sphere. We want to welcome our clients in, and do more for them than just build something and kick it out the door. We like offering more than a drive by snack; we want to have a family meal.

When our clients hire us on retainer, they’re paying us to take some of the focus off of our business to focus on theirs. We take their dreams and big ideas and translate them into something that has a tangible impact on their business. That takes time, priority, and strategy that simply isn’t possible for a short-term project.

We guide as they scale. We care about the success of their projects and business as much as they do. Like any family, we love being able to celebrate our clients’ successes as they happen just as much as we want to dig in and help when things fail.

Zao, learning to code, WordPress developers, WordPress ecommerce, learn to build WordPress, learning to build in WordPress, learning WordPress, how to use WordPress

Five Things I Wish Someone Told Me When I Learned to Code

I haven’t been in the software development industry for loads of time, but thanks to some amazing people who championed my growth, I slingshotted in quicker than some other peers who did it all on their own. (Props to you individuals, by the way, that wrestled it all out by yourself–you are unstoppable!)

After thinking a bit about my experience I came up with five things I wish I had known when I started developing:

1. It’s 100% normal to feel like you’re drowning

I stumbled my way into coding; it initially started as a hobby.

At first, everything was bite-sized and easy. I was blissfully unaware of how little I knew. Once that bubble popped, my lack of knowledge was overwhelming. Everywhere I turned there was something I could not do.

I remember the first time I tried poking around in the Codex. I ran away thirty seconds later because it all seemed like Greek! I literally did not have the capacity or supporting framework to “get it.” I wish I had known in advance how often it would feel like drowning and that it was fine.

2. Just Keep Learning, Just Keep Learning

Go after all the low hanging fruit that you can. It might seem like a waste of time to spread yourself so wide, but if you are truly a newbie and have no context for the developing world, the wider you go, the wider your foundation will be. Although you won’t be fully aware of it at the time, you’ll fill in the gaps of your understanding so you can level up.

When I felt like I was drowning, I continued to chip away at the pieces I could master and walked away from the pieces that made no sense to me. It paid off in the long run.

You can only handle so much drowning before you give up. By moving on, I kept my overload threshold in the green and experienced small wins that boosted my confidence.

Every so often, I would return to the Codex and give it a go again. When it still wasn’t useful for me, I moved on. I remember the day I was working on something, jumped around several Codex pages…and realized it made sense to me. Suddenly, the Codex was in my toolbox. By expanding my understanding in other areas, I built a framework that allowed me to tackle the previously impassable problems.

I wish I had given myself the permission earlier on to move on when it suited me. While there is a satisfaction to mastering something, I have found the field to be so wide, deep, and complex that it is rare to master something the first go around. Spending all your resources to come out utterly defeated is more costly than saying, “I don’t get it, so I’m going to move on to something else and return to it another time.”

It changed my experience from perpetually drowning to recognizing that I need to play in the wading pool a bit longer.

Note: This should go without saying, but don’t put yourself in a situation where you have committed to do something that is beyond your abilities for a client…because then, you don’t have the permission to walk away from it.

3. Hone in on your trusted sources

The internet is amazing and Google a robust resource, but not all of the resources out there are reliable.

As helpful as Stack Overflow is, quality control is not always a guarantee. Many of the solutions provided are hacks, instead of the industry standard approach to the problem. When you’re starting out, it’s hard to know who you should and shouldn’t listen to. It’s imperative to find good sources that you can soak up. This might require reaching out to experts in the business and find out who they trust.

My introduction to coding started with a free online coding tutorial resource. It was great for the most basic things. However, the further I got down the rabbit hole, I discovered that some of what they were teaching was completely wrong. Fortunately, friends who are professional developers pointed me to some credible resources.

It is hard to unlearn something foundational if you learned it wrong the first time. You only have so much time and you can spend eternity reading about all the different approaches.  Find approaches you can build on so it’s not considered time wasted later.

Team Treehouse proved to be an invaluable resource for me. They are trustworthy and they are actually good at teaching–a huge bonus because not all developers are good at breaking down what is natural for them into bite sized pieces for newbies.

4. After you learn it, build it

I cannot tell you how often I’d go through a tutorial and think to myself, “This makes complete sense. I get it!”

I followed with the tutorial and find myself at the end with the desired product. Ta-da! I learned it, right?

More times then I can count, I noticed that stepping away for the weekend would be enough for me to completely forget it. I found that after completing a tutorial, it was really helpful to go through and build the entire project again without the tutorial.

That was the real test of what I had actually learned, versus what I was regurgitating. It is great to follow along with a tutorial, but that’s only the first level. You need to practice it several times before you get it. The more you build it, the more muscle memory you create.

I wish I rebuilt the same things over and over instead of moving on to the next skill before mastering what I initially focused on.

One final point on building: going through other people’s tutorials is a great way to gain knowledge. However, reproducing something that already exists does not activate your creative thinking.

I discovered if I tried to implement a skill in a different context than the tutorial, I understood the steps to build one specific solution, but didn’t always grasp the concept in its entirety and how it could be applied to different situations. After you master a project on your own without the tutorial, try it again but with a different outcome as the goal. This will keep the skill pliable for you.

5. Get excited about pet projects

One of my biggest struggles when learning to code was that I had no idea what to build on my own. I desperately wanted to practice and try things out, but I had zero idea where to start.

As I mentioned earlier, you can only drown for so long before you give up. The antidote to this is passion. If you are really passionate about what you are building, you will have more endurance to push forward when the going gets tough.

Additionally, the great things about pet projects is that they are often side projects. You probably have other pressing matters that need attending, and so your project will get put on the back burner. This is fantastic!

When you return to it you will see your work through the eyes of a new developer. You will learn first hand the importance of commenting because you’ll probably have forgotten about why you did some of what you did and what all the moving pieces do.

As you improve your skills, you’ll find that when you return to your old work, you’ll be embarrassed by some of your approaches. The upside: you’ll have an opportunity to practice refactoring. These skills are super important and less painful to learn on your own project then in a group project where you’re impacting your peers and clients.


I wish I had known all of this sooner.  What about you? What things do you wish your baby developer self knew?

Zao, WordPress web development, WordPress eCommerce development, WordPress eCommerce developers, WordPress plugin developers, WordPress technical partners, WordPress developers to hire, hire a WordPress developer, find a WordPress developer

Zao: A Look Back at 2016

After a decade of work, 2016 was the best year Zao has had thus far.

Our small team more than doubled, we worked on several amazing projects, and we contributed back to open source, of course. Here’s a rundown of what we did and what we’re excited about moving forward.

A 2016 Retrospective

The Zao Team

Team Zao grew considerably in 2016 – we more than doubled our staff size and even found some incredible contractors who have been an integral part of our success.

Full-time Staff

Mihai

In February, we hired Mihai Joldis as a full-time developer. Hailing from Romania, he leads the charge with many of our enhancements to WP eCommerce and is an invaluable engineer on many of our client projects as well. To top it all off, he provides excellent support to our growing customer base at wpecommerce.org.  He is also one of the funniest people you’ll ever meet–humble, kind, and generous, too! All fantastic qualities that he’ll be putting to good use as he becomes a first-time dad in a few short months.

The Other Justin

In May, we hired Justin Sternberg as a lead developer, staff sergeant, managing partner, and all around excellent human being. He leads many of our agency projects; clients pretty much love him the moment they start working with him. After less than a year on our team, we can’t imagine life without him.

Contractors

Lizz

Late last year, we had the good fortune of finding Lizz Ehrenpreis. Lizz is the only reason you’re aware of who we are and can read these words without wanting to stab your eyes out. She’s an absolute wizard with content, incredibly disciplined, and pretty much the bee’s knees. Did I mention she plays the ukulele?

Jon

If you don’t know Jon, you should DEFINITELY know Jon. He’s a rock-solid developer who has been a massive help to Zao since Q4 last year. He’s been an integral part of helping us launch our own projects on budget, on time. If you’ve ever been tasked with finding GOOD developer contractors, you know how difficult it can be. If they’re solid engineers, they never communicate. If they communicate well, you’re constantly fixing code. Jon is the exception to that rule; he’s the real deal and we’re lucky to have him around.


Our work with Cancer Tutor

Cancer Tutor Logo

If you’ve been poking around our site for the last few weeks, you’ve already learned a little bit about Cancer Tutor and the work we’ve done for them already.

A brief synopsis of the work we did for them, from our portfolio:

Cancer Tutor worked with Zao on several different aspects of improving their site, ranging from eCommerce to solving complex technical hurdles. They wanted the ability to have member profiles that allowed their users to track and follow content from different authors, as well as create a notification center inside of WordPress without the overhead of something like BuddyPress.

Zao created a custom notification system built on a notifications component found in BuddyPress; we cribbed the component and integrated it with the REST API in WordPress. Now, users can follow categories and authors, and will get notified every time there is new content. This JavaScript intensive update also allows greater communication from Cancer Tutor admins, allowing them to send a notification to everyone in the system as desired.


The Cancer Tutor project was challenging and exciting to our team particularly because of how we utilized WordPress REST API.

The REST API and what it can do in WordPress are going to be a huge area of growth for us. It’s in WordPress core, and will become the primary way to solve a lot of technical problems. The custom notification system we built for Cancer Tutor required digging into how the REST API works.

The REST API touched almost everything we did on the Cancer Tutor site, from templating, to the way the notification system works, to the way that users are able to follow certain authors and forum posts or different categories. The site we built for Cancer Tutor is a user-centric, member-centric website, and all of that functionality is built on the REST API.

We dug into the internals to find best way for authentication, as well as how to manage users and notifications in a way that scales. We had to figure out how to build the site so that 50,000 users liking the same thing at the same time or sending out 100,000 notifications wouldn’t crash the server.


Working with the WordPress REST API

Working with the REST API fits nicely in our wheelhouse. Zao focuses on advanced problem solving with our clients; it’s something we enjoy and it’s where we really shine. Plus, it’s at an intersection with our specialty. Since we focus on eCommerce, there are loads of cool possibilities that come into play when sites can utilize the REST API.

Since the REST API is a major part of WordPress moving forward, we’ll see it utilized in a few different ways by many:

Single page applications

Instead of going to an eCommerce site that feels sluggish, we predict we’ll see more sites using an eCommerce theme with the REST API, which makes the site feel way faster. Obviously, anything that can make a site load faster is better for business; it’s a common vanity metric. Faster sites convert better.

Advanced technology for mom & pop shops

This is also going to provide opportunities for advanced technology to be utilized by smaller businesses. Maybe we’ll see programmable drones delivering from mom and pop shops, where the delivery address for an order that just came in can go through their site and directly to their delivery drone. Piece of cake.


Our work with Brooklyn Tweed

Brooklyn Tweed, Brooklyn Tweed website, Zao clients, sites on WordPress, WordPress developers, hire a WordPress developer, building a clothing store, eCommerce developers, e-commerce WordPress developers, using WordPress for e-Commerce

Cancer Tutor was our hare. Brooklyn Tweed is our tortoise.

Brooklyn Tweed is another excellent client of ours (we’re biased–all of our clients are excellent!). Zao is doing month to month work with them, which we love. Having long-lasting, ongoing relationships with our clients is satisfying. It may not be a gigantic project from the start (who doesn’t love landing a big check?), but it means that we get to work with them and steadily grow their business.

Longevity in our relationships gives us the opportunity to be a technical partner, rather than a one-off vendor. It requires us putting in some hard work upfront to build a foundation to what we always hope will become a fruitful relationship. It allows us to add real, measurable value to their business.

When we build a long term relationship with our clients, we have an impact on that business we’re not able to have otherwise. We can take their business to the next level, technically speaking, and work with their team to make sure their technology is scaling as it should, right alongside their sales.

Long-term clients allow us autonomy and creative license to do what we need to do. If we’re just a vendor pushing code, it turns into a different dynamic. Long-term partnership allows us to approach the relationship as a collaborative effort. We get to work alongside the client as their goals shift over time. We love that, and we’ll be looking for more of these kinds of opportunities in the future.


Open source efforts

Our open source efforts have been incremental, but solid, and you’ll see bigger changes to those things in 2017.

CMB2

Since Justin Sternberg joined us in June 2016, a few notable changes have been made to CMB2, including:

A significant change came with 2.2.2, allowing you to now show your meta fields in the admin columns (on the post-listing screens).

And 2.2.3 was a major release, marking the addition of the CMB2 REST API, to neatly complement the new WordPress REST API. That means when you use a site with the REST API, you now have a way to interact with CMB2 data as well. This update also included something that has been asked for over and over again, which is making the WYSIWYG editor work properly within repeatable groups.

You can see all of the updates for the year on the CMB2 Github page.

Although CMB2 is still a WebDevStudios property, Justin’s passion for working on CMB2, as well as the shared commitment that both Zao and WebDevStudios have made to open source, means it’s still Justin’s baby. You’ll be seeing more work from him on that moving forward.

CMB2 Group Map

We created this CMB2 add-on for Brian Krogsgard and PostStatus. It allows users to use CMB2 group fields to manage custom post type entries, and is used on PostStatus to associate footnotes with notes.

WP eCommerce

WP eCommerce got some love this year, with three minor releases and eight core contributors working on the plugin. We continued significant development efforts for an upcoming 4.0 release. The 4.0 release has been in the works for the last five years! WPEC also strengthened partnerships with strategic partners like Paypal, Amazon, and TSYS ProPay.

GatherContent

Zao worked with GatherContent to release a major rewrite and many improvements to their GC integration plugin. While GatherContent is not an open-source platform, their WordPress plugin is open-sourced, available for collaboration, and offers benefits to open source in its availability and transparency.

Since Zao started working on the GatherContent WordPress plugin, there have been sixteen releases. The plugin is benefiting from active development, bug fixes, and feature updates. You can see the work we’ve done from versions 3.0.0 and up right here.


Sweet, sweet numbers

Zao plugin downloads in 2016: A whopping 504,855

When compared with 2015:

  • Analytics for WordPress downloads went up 5%
  • GatherContent’s plugin downloads went up 88%
  • CMB2 downloads went up 511%
  • Dsgnwrks Instagram Importer downloads went up 39%

Our revenue increase: 121.7%

Wow! These are the kind of numbers that make us feel good; it means what we’re doing is working.


All in all, it was a productive year that showed a lot of growth and prosperity. And it laid fantastic groundwork for 2017. Things in the world may be challenging, but we believe staying true to our work and being productive is one way of being radical.

We’re looking forward to seeing what 2017 brings, and we hope to see you on the way.

what developers need to know, developer education, code audits 101, how to do a code audit, what should i offer in a code audit, what is a code audit, how to price a code audit, code audit tools, code audit analysis, code audit deliverable, code audit checklist, software code audit

What Developers Need to Know Before Offering Code Audits

So, you’re a developer. You’ve thought about offering code audits, but maybe you haven’t had a clear idea of what your code audit should provide, why clients go seeking one, or how to price the service.

In January, we covered the questions clients need to ask their developer before getting a code audit, and offered some guidance on how to vet their vendor. This time around, we’re going to cover the developer side of things: why clients seek code audits, what questions you need to be asking before you get started, and how code audits lay a good foundation for a future relationship with your clients.

Why Clients Look For Code Audits

Yes, of course, there’s a ton of information available on the internet, including all the information that a client could need regarding the basics of site performance and functionality. Most clients, however, either don’t have the time to do this research, or don’t have the technical expertise to make sense of it all.

Code audits benefit clients by empowering them to make informed choices about the future of their technology.

When clients are coming to you asking about code audits and an assessment of their technology, they’re looking for your extensive knowledge that empowers you to look at their code, quickly parse the information, and dictate which things are worth building on.

Basic Code Audit Questions

There are a few standard questions every developer should ask before diving right into someone’s code.

What type of project are we auditing?

Knowing what kind of project your client is looking to have assessed is vital to understanding how much time it will take you–and whether or not you’re a good fit for the project. Is it a website audit or a full-scale plugin? An eCommerce site or an app? Knowing what you’re looking at upfront helps you figure out if you have the right expertise to do your client justice…and what kind of scope you’ll set out for your clients.

Are we auditing code that has been custom written by a previous developer or is this a distributed plugin that we’re assessing?

Knowing the origins of the code can help you set your expectations. Custom code created by another developer may take longer to dissect, especially if something is buggy. Is the developer someone you know? If so, that gives you informative context on what you’re dealing with–and provides a point of contact for figuring things out. If not, you know that it may take you longer to dig through and assess what is happening with the code at hand.

If it’s a plugin downloaded from the WordPress Plugin Repository, you know that checking on when it was last updated, as well as going to the plugin page to look over developer updates and reviews, will be a part of your process.

The Most Crucial Thing Developers Need to Understand

The key to delivering a valuable code audit is understanding your client’s underlying goals. If you’re lucky, your client understands their own business goals, and has mapped out the future of their business, too. That information is an enormous assist in guiding you through this process.

The scope of a code audit can vary wildly depending on a client’s objectives.

Here are just a few reasons our clients have sought out code audits:

They want to get rid of a tool, but need a good reason.

Sometimes, a client doesn’t like a tool, but they don’t have the technical knowledge to evaluate whether or not it’s a necessity. They need someone to assess if this tool is truly their best option–or even something they need at all.

There’s a plugin that is freely available, but they want to make sure it’s contributing to a solid technical foundation for their business.

Our websites are our online real estate. A shop owner wouldn’t want to open up their store in a crumbling building, and business owners don’t want to open up their shop on a lousy website. They’re coming to you to find out whether these distributed plugins are their best choices and will set them up for future success.

Their site is custom built, but it’s slow, and they suspect the custom build may be the culprit.

This is fantastic information, because it tells you, the developer, that they’re looking for a performance based evaluation. Now, you know you need to find out more information about their business before getting started. Maybe their business has outgrown their site; the code they had built was once working, but now, it can’t scale. This gives you an opportunity to evaluate performance in a specific, measured way, and give recommendations accordingly.

Their business has changed, but their technology hasn’t.

For example, some plugins do well if they’re on a site that has no users logged in. However, if that same site has switched to a subscription model, it won’t have caching layers that allow the plugins to run as smoothly. Your client may not know this difference. All they know is that they made the switch when they needed to shift their business model. They didn’t recognize the impact it would have on their technology.

Understanding the history of your client’s business (and the trajectory of where they intend to go) provides context regarding what needs to be assessed and what kind of upgrades would serve them best.

There are two plugins that do the same thing, but which one is best for their site?

Once again, this comparison that may be available out there on the internet, but they want your expert insight. If you’ve assessed your client’s business goals and trajectory, you can make a recommendation based on their specific business model. That’s a boon for both you and them! It means that you have something to offer that they can’t get anywhere else.

What About Pricing?

One of the toughest quandaries of them all! Code audit pricing can differ wildly depending on the client. We’ve quoted simple code audits at anywhere from $2,500-$5,000, and have quoted much more complex audits of entire platforms/systems for $50,000+.

Why the disparity?

Three crucial factors come into play:

The deliverable

As we’ve said before, we offer a comprehensive deliverable, filled with detailed information. We take a pragmatic approach, and provide a transparent, realistic look at associated costs with the recommendations we make.

Your clients will need to know what they can expect from you. Is it a document or a confirmation email? Is it a walkthrough on a call? The details of the deliverable determine how much time it will take to create and what value you’re providing.

The scope of the audit

If you’re already a working developer, I don’t have to tell you how scope impacts cost. When pricing services, you need to know what kind of assessment is needed and how much time it will take.

The amount of experience you have

Although we’d all like to dive in and make a bazillion dollars at the start, less experience usually dictates a lower rate. Do the research on what other developers in the same experience bracket are charging. Evaluate what your time is worth (and don’t fall prey to Imposter Syndrome!). Realistically assess how your experience (or lack thereof) informs your expertise and turnaround.


Code Audits: Good for Your Clients and You

Code audits benefit clients by empowering them to make informed choices about the future of their technology. A successful code audit gives your client the opportunity to accurately assess the current state of their tools. It allows your clients the chance to evaluate recommendations, knowing that they were made with their business goals in mind.

It doesn’t just benefit them, though. It also benefits you.

Code audits give you an opportunity to develop new working relationships, and lay groundwork for a long-lasting partnership. The code audit is something you can build on with your client. Whether that leads to performing the recommendations you make or for future development overhauls, the options are endless! This is a low-commitment way to spark a relationship…if you do it right.