Front-end development has taken great strides in the last couple of years (and continues to do so) through the use of CSS pre-processors and various JavaScript-based technologies.

The nice thing is that all of these can still be used within the context of WordPress development; however since WordPress includes jQuery, it’s not uncommon to continue writing jQuery-based JavaScript.

Despite all of the various technologies (such as Angular, Vue, React, etc.), I still find myself using jQuery and ES6 more than other libraries and tools.

For simple tasks, it’s not a problem, but when needing to, say, build more advanced components based on the response of an API call, using jQuery can be a bit heavy-handed.

This doesn’t mean it can’t be used – and I’ll walk through how to use it to build components momentarily dynamically – but I think it presents a case as to when other options are more variable.

But more on that at the end of the post.

Creating jQuery Components in WordPress

Whenever I refer to the idea of a component, I’m thinking of a combination of elements that work together to create a more complex element.

For example, let’s say that you make an API call and then, using the response, you need to create a component that’s made up of other elements.

Defining and Drawing a Component

So, for starters, I think that’s a good way to define a component: An element that’s made up of a combination of elements.

At least that’s what I’m going to use for this particular post.

Next, how might we visualize this in terms before codifying it? Perhaps something like this:

Again, all of this is based on the idea of making an API request and working on the data.

Making The API Call

Making an API call using the WordPress API is something that I’ve covered in some posts (and if you’re looking for the most secure way to do it, then I recommend reading this post).

But the flow of control would look something like this:

And the code for doing so would look something like this:

But that still doesn’t actually get us to the point of building the component from the response.

Working with the Response

This next bit is all how you opt to write your JavaScript. I’m not claiming that the way I do is the way to do it, but it’s a way to do it.

Anyway, for this post assume that we’re going to be getting some data back from the API and that we’re guaranteed to have it (this prevents us from having to write guard clauses).

Further, it allows us to populate the necessary variables to build our component. Thus, I’m keeping the code as lean as possible.

From here, we can now setup a method that will create a component and return the result that will allow us to append it to the DOM.

Putting It All Together

Based on the code above, it should be relatively clear as to what you need to do to create the component.

Even still, putting it all together is a process that requires the following:

  1. making the request,
  2. reading the response,
  3. building a component based on the response

The code above should be self-explanatory, but if not it’s doing the following:

  1. Taking information from the response such as the title, image URL, and description,
  2. creating elements of each of those,
  3. appending them to a div element
  4. returning the div element after the various pieces have been appended to it.

From there, you can then take the element – the component – and append it to a container (as shown earlier in the code) and then continue to do so with the rest of the information from the response.

Using Other JavaScript Technologies?

As mentioned at the beginning of the post, this is a lot of work regarding jQuery to create a component to add to the DOM.

Combine this with the responsive nature (not responsive in terms of mobile design but in terms of parts of a display responding to change in the presentation layer), and you have a pretty good case for using a different technology to do something like this.

But still, there are those projects that will call for a certain stack, and if jQuery is part of that stack, then this is one way to go ahead and do just that.

Category:
Articles
Tags:
,