How to Customize Nelio Content’s Quality Analysis

Nelio Content is a WordPress plugin created by the Nelio team (yup, that’s us) that helps you manage your WordPress blog and promote it on social media. I assume you’re already familiar with it but, if you aren’t, this post by Toni describes its outstanding editorial calendar and this one by Ruth shares its social media capabilities.

One of the main features included in Nelio Content is its content quality analysis. The idea is quite simple: when writing new blog posts, there’s a series of steps we must take to ensure that everything about our content is fine. For instance, we may want to control the length of our posts, add some images to the copy and tag it properly, add links to our own website as well as to external sources, or set a beautiful featured image, to name just a few examples.

As you can imagine, it’s quite easy to miss one or more of these tasks and, let’s face it, none of them are super important, but it’s nice to know we checked all the boxes, isn’t it? After all, paying attention to detail is a sign of professionalism and good work 🙂

Today we’ll talk about something few people know: Nelio Content’s quality analysis can be customized and extended with your own checks. So let’s see how to add a new quality control check in Nelio Content based on a real example that we have recently implemented in our workflow.

Internationalization and Spanish Content

Before we get started, let me share some information about our blog and editorial process. As you may already know, all the content we produce in this blog is available both in Spanish and English. Our website uses Multilingual Press, a plugin that adds i18n capabilities to a WordPress multisite installation. Here’s what we do to write new content:

1. First, we write the new post in Spanish (here’s how we decide what we’ll talk about)
2. Once it’s written, a colleague reviews it, corrects any errors it may contain, schedules it, and let’s the author know is ready for translation
3. The author duplicates the post using Multilingual Press into the English subsite of our multisite
4. The author translates the duplicated post into English
5. Once again, a colleague reviews the English version, fixes any typos or errors it may contain, and schedules it

As Toni told you in this post, to speed up the translation process we implemented a small plugin, Nelio Translate, which automatically translates all the blocks of our post from Spanish to English using, you guessed it, Google Translate. Here’s how it works:

The result of this automatic translation process is a post where Spanish and English paragraphs are interspersed. This is quite helpful, because it gives the author the chance to manually review each translated paragraph and look at its source right about it. So here’s what we do: we read the automatic translation, fix it as we see fit, remove the Spanish counterpart once we’re done, and move on to the next Spanish/English pair.

Unfortunately, on some rare occasions we forget to delete a Spanish paragraph and the final blog post ends up having a random Spanish paragraph in it. Sure, it seldom happens thanks to the review process I mentioned earlier… but wouldn’t it be nice if an automatic tool checked this?

How to Add a New Quality Control Check to Nelio Content

As usual in the WordPress world, to extend Nelio Content and add a new quality control check we’ll have to create a plugin. This plugin will be in charge of customizing Nelio Content as we please. If you want to, you can get the project from GitHub already, but I strongly suggest that you follow the whole guide through if you really want to understand what we’re doing today:

Nelio Content

I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.

Panozk

WordPress.org

View Plans

1. Create the customizations plugin

Creating a plugin is very simple: I already told you how to a while ago. But let’s quickly review it again, shall we?

First of all, we are going to create our plugin folder. I, for example, am going to call it customizations. Then, add the plugin’s main file (let’s name it customizations.php, for example) with the following content:

<?php
 /**
 Plugin Name: Customizations
 Description: All my customizations in one single site.
 Version:     1.0.0
 Author:      David Aguilera
 */ 
 if ( ! defined( 'ABSPATH' ) ) {
   exit;
 }//end if

where you’ll specify the plugin name, description, version number, and author. And that’s it! You already have a plugin that you can install and activate on your WordPress site:

2. Initialize the JavaScript Environment

Next we have to scaffold the JavaScript tools we’ll need to customize Nelio Content. This is something I also explained in another post but, in essence, all we have to do is run npm init to create a package.json file and then install all the dependencies we need. In this particular instance, just install the @wordpress/scripts package (which, by the way, you can do by running npm i -D @wordpress/scripts). Finally, we edit the package.json file to add the two scripts we’ll be using to compile our code:

{
  ...,
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  }
}

Once the environment is ready, create a src folder inside the customizations plugin and add an empty index.js file in it. Then, run npm run build (or npm run start if you want to automatically rebuild the project when you edit a JavaScript file) and you’ll see that a build folder appears with the result of the compilation process.

3. How to Use the our JavaScript Customizations in WordPress

We’re almost there! Now it’s time to tell WordPress it should use our customizations script whenever Nelio Content is loaded in Gutenberg. First, let’s register the script we’ve just created:

add_action( 'admin_init', function() {
  $url = untrailingslashit( plugin_dir_url( __FILE__ ) );
  $dir = untrailingslashit( plugin_dir_path( __FILE__ ) );
  $asset = include "{$dir}/build/index.asset.php";
  wp_register_script(
    'customizations',
    "{$url}/build/index.js",
    array_merge( $asset['dependencies'], [ 'nelio-content-edit-post' ] ),
    $asset['version']
  );
} );

And then let’s enqueue the script in Gutenberg using the enqueue_block_editor_assets action:

add_action( 'enqueue_block_editor_assets', function() {
  if ( ! wp_script_is( 'nelio-content-edit-post', 'enqueued' ) ) {
    return;
  } //end if
  wp_enqueue_script( 'customizations' );
}, 99 );

As you can see, these two snippets are quite simple, but let me briefly focus on two details:

• The first snippet is loading a file named index.asset.php. This file is generated by @wordpress/scripts and contains information about the dependencies of the script it’s building, as well as other useful data (such as a version number). We can use it to make sure all the relevant dependencies are properly loaded when our script is enqueued.
• There’s one relevant dependency, however, that’s not present in the asset file: nelio-content-edit-post. Since we want to extend Nelio Content, it’s important to tell WordPress that our script depends on Nelio Content’s scripts, and so we add the dependency using an array_merge.
• Finally, the second snippet makes sure that Nelio Content is enabled in the current Gutenberg instance. If it isn’t, there’s no point in enqueuing our script for customizing Nelio Content, don’t you think?

4. Programming a New Quality Control Check in JavaScript

And finally it’s time to implement the new quality control check! You can do so by using the registerQualityCheck function of the NelioContent.editPost object as follows:

/* global NelioContent */
const { registerQualityCheck } = NelioContent.editPost;
registerQualityCheck( 'customizations/spanish', {
  icon: 'translation',
  attributes: ( select ) => {
    const { getContent } = select( 'nelio-content/edit-post' );
    return { content: getContent() };
  },
  validate: ( attrs ) => {
    const { content } = attrs;
    const spanishWords =
      content.match( /\bde\b|\blado\b|\bpuede\b|\btambién\b/g ) || [];
    if ( spanishWords.length >= 5) {
      return {
        status: 'bad',
        text: 'Spanish content detected',
      };
    } //end if
    return {
      status: 'good',
      text: 'No Spanish content detected',
    };
  },
} );

As you can see in the previous snippet, the registerQualityCheck function takes two parameters. On the one hand, a unique name with which to identify the new quality control (in the example, customizations/spanish). On the other, an object with three attributes: icon, attributes, and validate. Let’s see what each of them is:

• Icon. The icon attribute is a dashicon that helps you identify your quality control check. I, for example, used translation.
• Selecting attributes. A quality control check is responsible of making sure that certain “things” are properly set. “What things,” you ask? Well, anything that might be relevant for your specific check. In my case, for example, I want to make sure that my post content doesn’t contain any Spanish, so I retrieve the post’s content and return it.
• Validating attributes. Once we have the attributes we need to evaluate, we need a new function that checks whatever it is that needs to checking. In our running example, the function checks if the post content contains some common Spanish words and, if it does, it’ll assume that the post contains Spanish text. It’s not perfect, but it’s close enough. The return type of this function is an object with two attributes:
  • status can either be good (green), improvable (orange), or bad (red). It basically tells Nelio Content if things are right or wrong.
  • text is a textual description of what’s the result of the evaluation. That is, it tells the user what’s wrong and needs addressing. Or, if everything’s fine, it tells the user not to worry about the issue.

If you compile the project again and look at Nelio Content’s Quality Analysis, you should see something like this:

Pretty neat, huh?

Conclusion

Nelio Content is a very powerful plugin that helps you run your blog better and more efficiently. You can customize Nelio Content’s behavior as you please so that it better suits your needs. If you are not using it already, what are you waiting for? You can download it for free at WordPress.org or subscribe to one of our plans and help us continue to grow as a team!

Featured image by Glenn Carstens-Peters on Unsplash.