Be Devious

Friendly, helpful, personal web services. Seriously.

Update Placker Card Actual Effort From Toggl Time Entries

by

Summary

The purpose of this exercise is to update cards in the Placker project management tool with actual time spent on the activity based on time logged using Toggl.

Update: after writing this and running with it for a while, the issues noted at the end were too much for me. Not only did it not work well enough, but I also ran out of my free allowance of “Zaps” from Zapier halfway through the month for which I was already paying $15 odd.

I get why it’s a good tool for marketing or less technical folk, but given that with the Zapier approach I feel like I had to write half of the code anyway, I didn’t really feel like paying them for the privilege.

So, since then, I wrote a little script in Node that is now running on Google Cloud Functions which is available on GitHub, and I haven’t had to pay Google a single penny for the privalage of running it for me.

Approach

  1. Use the Toggl browser extension to start a Toggl timer to ensure the description matches the card title
  2. Use Zapier to fetch recently completed time entries from Toggle
  3. Fetch the related card from the Placker API
  4. Add the time spent in the Toggl entry to the current actual time spent on the card
  5. Update the Placker card with the new actual time spent value

Description

Start the Toggl timer using the browser extension in Placker

Create a step to process new time entries

Attempt to fetch a placker card with a title that matches the Toggl description

Only continue if a card was found

Use JavaScript to calculate the new actual time

Update the Placker card with the new actual time

Issues with this approach

  • Card names must be unique or it is possible that the wrong card may be updated
  • If two time entries are processed in the same run by Zapier, it processes them at the same time and so one entry will overwrite the updated actual time made by the other entry

Password Reset via the WordPress REST API

by Leave a Comment

The WordPress REST API is a fantastic tool that has transformed the way developers can user WordPress and introduced a huge number of possibilities. One of the possible use cases is using WordPress as a back end for apps. Whether they are progressive web applications, single page applications, mobile apps or even desktop apps.

This is often referred to as “Headless WordPress”, the head referring to the front end of the site, or even the admin area, as it means you just use what is under the hood. You can then use whatever your favourite front end framework is for a site or app.

A simple use of the API could simply be to load publicly available blog posts. But if you need to go further than this and your users need to be logged in to WordPress via a non-WordPress interface, you will need to add some extra tools or plugins to help manage this. There’s a few options for registering and logging in, but that’s not what this post is about.

Specifically here we’re looking at methods of resetting a user’s password.

Password Reset – why does it need special attention?

If you consider the normal password reset process in WordPress, as user will:

  • Click the forgotten password link
  • Receive an email with a unique link to the password reset screen
  • Follow the link back to the WordPress website
  • Set a new password
  • Login

There’s an issue using this process when using an alternative front end, since you won’t want users redirected back to your WordPress install. This will take them out of the flow of your app, and then, how do you get them back to the app again? This is especially an issue for mobile apps, since while you can set up deep links for your app to open based on a URL, the set up is quite involved, especially since it’s different for each platform.

All these considerations aside, let’s take a look at our options.

WP REST User Plugin

WP REST User

This plugin offers the ability to create users and reset their passwords. The main drawback for the password reset is what is explained above, since it will trigger the normal WordPress password reset email. As if the user had requested a password reset. If this isn’t an issue for you, this plugin works well. If it is, you’ll need to figure out how to get the user back into your flow.

Create a Custom Password Reset Process

After not getting what we needed from WP REST User Plugin, we initially coded our own custom solution which involved the following:

  • Creating a new REST Endpoint for a password reset
  • Sending a new custom email with a link back to our web app with a custom code parameter in the URL
  • Creating a new REST Endpoint to set a new password, ensuring that we validated the code that came with the request

This worked fine for browser based apps but fell short for mobile apps. Since we had no other case to use deep links for our app, the amount of work required to implement it seemed disproportionately high.

It was this scenario that inspired the development of…

Password Reset with Code for WordPress REST API

Password Reset with Code for WordPress REST API

So yes, this is our plugin. When the previous process fell short, we took a step back and thought – what other password reset processes are there? One that jumped out as being simple to implement was the sending of a 4-digit code via email that the user could enter into an app. This code would then be sent with the reset request and validated when setting a new password.

At present, although there are many action hooks and filters in the plugin to customise the experience for your app. But, there’s scope to  take this further. Codes could be sent via SMS or we could make use of an authenticator app like Google Auth.

Roundup

As we know the password reset process requires a little extra thought when using the WordPress REST API. But we do have a couple of good options available.

Using another method for password resets? Use the comments to share your experience.

Credits

Featured image courtesy of NeONBRAND@Unsplash

Sorting WordPress Queries By Multiple Criteria

by Leave a Comment

Sorting posts and custom post types in WordPress has been made pretty easy when compared to the old days of having to write custom SQL queries thanks to the WP_Query class. Later updates to the class methods to allow arrays and multiple values have helped even further. But when using the class in such a way, you can still end up in a bit of a muddle.

I was recently working on a project that included listing classified ads that were initially added by the administrator but could subsequently be managed by a user if they joined the site and paid a subscription. I was under an NDA for this one, so I’ll need to create a new scenario to illustrate what was needed here, let’s say we’re talking about camp sites.

What were the sorting requirements?

On the site, the client wanted to, generally, list the camp sites that appeared in a given set of search results in a random order, so as not to give specific priority to any of them.

One of the benefits of signing up and paying to manage your own listing, however, was that you would be prioritised in any search results you appeared in and so would need to be listed at the top.

Subsequently, the client found that camp site owners were not always adding a featured image to their listing, and so to further encourage this, listings with a featured image would appear higher than those without.

So, the requirements were to sort like this:

  • Show listings for paying clients above listings with no paying client
  • Show those with featured images above those without featured images
  • Otherwise, show them in a random order

The Code

For this, we need to use the good old pre_get_posts hook to alter the query.

First off, we set up the function and hook and ensure that this is only run when we want it to be:

function custom_sorting( $query ) {

  //don't edit the query if we're not dealing with the main query for
  //the post-type-slug post type and we're not in the admin area
  if( ! is_post_type_archive( 'post-type-slug' ) || is_admin() || $query->is_main_query() ) {
    return;
  }

}

add_action( 'pre_get_posts' , 'custom_sorting' , 100 );

We’re then going to add our sorting for those who have paid. NB. it’s elsewhere in the code that listings of paying members have a “1” stored in the wp_posts_meta table under the meta_key “is-active”, and ask the order by attribute to sort by this value.

Happy days.

function custom_sorting( $query ) { 

  //don't edit the query if we're not dealing with the main query for
  //the post-type-slug post type and we're not in the admin area
  if( ! is_post_type_archive( 'post-type-slug' ) || is_admin() || $query->is_main_query() ) {
    return;
  }

  //sort by the meta value is-active in a descending order, i.e. those with a 1 before those without
  $query->set( 'meta_key' , 'is-active' );
  $query->set( 'orderby' ,  'meta_value_num' );
  $query->set( 'order' , 'DESC' );

}

add_action( 'pre_get_posts' , 'custom_sorting' , 100 );

OK, so that was nice and easy, but, now that we’ve used the order and orderby parameters, how are we going to add more criteria and sort orders for them?

There’s a couple of steps to this:

  • Update the meta query array to filter for posts with AND without featured images
  • Update the order parameter to the array format
  • Remove the order parameter
function custom_sorting( $query ) {   

  //don't edit the query if we're not dealing with the main query for
  //the post-type-slug post type and we're not in the admin area
  if( ! is_post_type_archive( 'post-type-slug' ) || is_admin() || $query->is_main_query() ) {
    return;
  }

  //add a query to filter for posts that do AND don't have a _thumnail_id value
  //if you don't add the NOT EXISTS clause you will lose any posts without featured images
  $meta_query = array(
    'relation' => 'OR',
    //note that you must name elements you wish to filter by
    'has-image' => array(
      'key' => '_thumbnail_id',
      'compare' => 'EXISTS',
    ),
    'has-no-image' => array(
      'key' => '_thumbnail_id',
      'compare' => 'NOT EXISTS',
    ),
  );

  $query->set( 'meta_query' , $meta_query );

  $query->set( 'meta_key' , 'is-active' );
  $query->set( 'orderby' , array( 
    'meta_value_num' => 'DESC', 
    'has-image' => 'DESC'*, 
    'rand' => 'rand' 
  ));

}

add_action( 'pre_get_posts' , 'custom_sorting' , 100 );

And there you have it, you can now sort by multiple criteria in WordPress.

Links:

Featured Image Credit:

How To Use GTMetrix to Test The WordPress Admin Area

by Leave a Comment

As web developers we put a lot of time into making sure that websites we build load quickly. Why? Because it’s well established that if your website loads slowly, you lose visitors. Which depending on the reason for your website’s existence, you will lose business. There’s tonnes of information about this online, including on this very website!

Occasionally, the question of the speed of the WordPress admin area comes up. If you’ve worked on a lot of WordPress sites you’ll probably have done a lot of trial and error on your journey to find how to make sites work how you want them to and so you’ve probably come across the odd site here or there where the admin area suddenly seems to grind to a halt.

It’s OK, we can just apply the same theory to the admin area as we do to the front end right? OK, first stop – GTMetrix

BUT WAIT!

When you try to test a page in the admin area with GTMetrix there’s a problem. GTMetrix isn’t logged into your site, and certainly isn’t an administrator. All that happens here is that you test the speed of the login page, which is normally pretty good.

Let’s get GTMetrix logged in

GTMetrix has a handy feature that will allow you to authenticate the speed test so that you can test any logged in page. The way we do this is by lending GTMetrix our session cookies so that our website thinks GTMetrix is us.

IMPORTANT: The first step is ensuring that we do this as securely as possible. Passing your browser’s session cookies could be a security risk!

To help mitigate the security risk of using session cookies, the first step to take is to create a brand new administrator user for your site and login with this user. Call it whatever you like, as soon as we’re done testing we’re going to delete this user.

Once you are logged in with the temporary test user, navigate to the page you are going to test and open up the browser console. I’m going to demonstrate this in Google Chrome.

Head to the application tab, on the left open the cookies list, and click your websites domain. This should display a list of cookies your browser currently has stored for your site.

Next, I’m going to highlight them and copy and paste in Microsoft Excel, feel free to use your spreadsheet editor of choice.


We only need the first two columns so the rest can go. In the third column, I’m then going to concatenate the cookie names and values with an “=” sign in between. To do this, I’m going to enter, for example, in cell C2

=A2&"="&B2

I’ll then copy this formula to all rows in the spreadsheet that contain my cookies, then I’m going to copy the whole list.

Back to GTMetrix, I’m going to start a new page speed test as normal, except this time I’m going to click Analysis Options. In the bottom left in the box labelled “Cookies”, paste column C from your spreadsheet. Note the ? tool tip and it’s warnings and FAQs link, worth a read.

There you have it…

OK, so now we’ve managed to generate our speed test report for the admin area of WordPress. Now what?

Well, that’s for another blog post but not at least you area able to generate the report and begin using the information for your investigations.

Once you’ve finished testing, logout from your test users account and delete the user! This will ensure that no one can use the cookies you gave to GTMetrix to gain access to your website!

Have you ever experiences a slow WordPress admin area? Share your tips in the comments!

Not Another WordPress REST API Post

by 2 Comments

Not another what now? If you are someone who is plugged in to the world of WordPress and is paying attention to what is going on, as I am, then you will most definitely have been hearing about the WordPress REST API. A lot. And, perhaps getting quite excited about it, like I am.

But, I’ve got a feeling that most of you out there have not heard of it. And probably the phrase “REST API” means nothing to you either.

There are LOADS of blog posts all over the internet about this, but I haven’t come across any that would tell non-techy folk why they should think this is cool. And they should!

Photo Credit: Oliver Thomas Klein – Unsplash

So what’s it all about?

First off, API stands for Application Programming Interface. What it means, is that if there is an application or website that does stuff, you can do some of that stuff from outside that application or website.

Confused? Don’t worry, the good news is that you have probably used APIs already. So you will definitely be able to understand it.

A very commonly used API…

Potentially the most common you might have used is the Facebook API. Facebook, as a website, does stuff. You can use it to share statuses and images, send messages, interact with people on pages, events and groups.

You might also use the Facebook app on your smartphone or tablet. This looks like Facebook, and works like Facebook, but it lives on your phone. When you post something to Facebook, the app needs to send that off to the Facebook server, and it does this via an API.

Similarly in order for an app to show you the latest posts on your news feed, it needs to go and get them, via an API.

You will probably also have experienced using the API through a 3rd party (i.e. not Facebook).

Ever used an app or website that asks you to login via Facebook? Then you’re then presented with a screen that says they want access to X, Y and Z from your account? And then you can do things like see your most posted words, or post a status update via that website? The Facebook API enables all of these things.

People are able to offer these types of services with Facebook because they make large parts of their APIs available to 3rd party companies and developers.

Photo Credit: William Iven, – Unsplash

OK, that’s the API bit, what is the REST bit?

As I mentioned at the start of this post, we’re talking here about the WordPress REST API. We’ve talked about what an API is already. In this post I’m not going to go into detail about what the “REST” part is.

Just understand that the “REST” part is referring to the technical structure of the API. It’s something that makes working with a complicated thing very much more simple.

Additionally “REST” is completely generic. This means that it doesn’t matter what the REST API is accessing – a WordPress site, Facebook, whatever – anything else can access it – a website, a mobile app, whatever.

And what has all this got to do with WordPress?

Now that we have access to the WordPress REST API, it starts to open up a lot of opportunities, here’s a few:

  1. We can allow 3rd parties to offer apps and features that link with our websites.
  2. It becomes easier to create mobile apps that link to our websites and even allow users to log in to their accounts.
  3. It opens the possibility of creating standalone templates and themes that are detached from the WordPress core.
  4. You could use WordPress as an application platform for a mobile app. i.e. just as the engine, it doesn’t even need to have a website attached to it that’s accessible via a browser!
  5. Create a completely standalone, redesigned WordPress admin system, like WordPress’ own Calypso admin system

Do I need to know about this if I’m not a coder?

I believe that understanding the technology that is available and what it can be used for is very powerful, whether you’re a coder or website builder or not. I’m hoping that by reading this article you’re starting to get little thoughts popping up in your head.

“I wonder if this would work for that idea I’ve got.”

“I bet my customers / website visitors would benefit from being able to do X.”

WordPress is a great platform, clearly I’m a big fan. It’s ease of use has allowed millions of people to build websites and blogs and reach audiences all over the world. It’s flexibility has allowed developers to tailor websites to client’s specific needs.

The addition of new features like the REST API takes all of those benefits and puts WordPress on a new level opening up all sorts of new possibilities.

Photo Credit: Luca Bravo – Unsplash

Where to go from here

I’m warning you, this stuff is a can of worms and is highly addictive! Depending on who you are, you might want to consider the following:

Business Owners / Website Owners / Entrepreneurial Types

Developers and Coders