Cool things I’ve done with Zapier recently

Zapier always pops into my life when I least expect it, and here recently I’ve done some pretty cool stuff with it! Thought I would share the top two here:

#OERxDomains21 twitter hashtag to Discord

This one was especially fun to work on as I continue to prepare for the OERxDomains21 conference happening in just a few short weeks. (I owe this space plenty more blog posts on the matter, but for now I’ll focus on what I came here to talk about.) We’ll be using Discord for some of the conversations happening during the conference, so I thought it would be cool to sync that together with the #OERxDomains21 hashtag on twitter.

First I created a channel in Discord called #hashtag:

Next I went into Zapier and created a “Search Mention in Twitter” trigger.

Next, I had to log into my Twitter account. I then set the trigger search term to be “#OERxDomains21”:

Edit: After I realized this was working, I had to set an additional query to filter out retweets. Without the filter, every retweet was syncing in Discord as a new post and it was a bit redundant/loud. My final search term ended up looking like:

#OERxDomains21 -filter:retweets

I then tested the trigger to make sure that Zapier was able to search the #OERxDomains21 term successfully. Now for the second half of the Zap, I chose the “Send Channel Message” action for Discord:

From there, I logged into the Discord Server. Next I set the details of the action by customizing how I wanted it to look as it came into the #hashtag channel:

  • Channel: #hashtag
  • Message Text: <enter>, followed by the URL of the tweet. I noticed that if I didn’t include the <enter> to a new line, Discord wouldn’t automatically embed the tweet. Weird, I know.
  • Text to Speech: false
  • Bot Name: Username of the person tweeting
  • Bot Icon: the profile picture of the person tweeting

From there, simply test and save. Now all tweets using the #OERxDomains21 hashtag pop into discord like this:

If you’re interested in replicating this Zap for your own use, click on the “Use this Zap” button at the top of this post.

Automatically creating a new Google Doc every week

Another use I found for Zapier recently was to automatically create a new Google Doc at the beginning of each week. We have a Manager’s Meeting every Monday and we use a new google doc each week to keep track of notes & items to discuss. The issue is that we always forget to create the doc until the last minute, and then no one has time to fill it out completely. Lol.

So for this one, I used an “Every Week” trigger, with the app set as ‘Schedule by Zapier’:

I then set the time that I wanted the Google Doc to be created:

After testing it out, I set my action to “Create Document from Template” in Google Docs:

Note: I originally set my action to to “Create a Google Document from Text”, but HTML formatting for Google Docs is pretty lousy. It was cleaner to create a template straight in Google Docs and have Zapier simply clone it with a new title each week.

I then set up my action with the following settings:

  • Template Document: select the doc you’ve made as your template
  • Document Name: set the doc name you want to use
  • Folder for new doc: where you want the doc to live
  • Sharing Preferences: who can see/edit the doc
  • Unused Fields: not applicable, set to Keep

After testing that the Google Doc creates successfully, I wanted Zapier to notify me via email when the action had run so I wouldn’t forget about it. I chose Zapier’s “Outbound Email” action:

I then wrote the contents of the email, and pulled in Google’s “Alternate Link” field to give me a direct link to the doc:

Final step was to turn the Zap on and run it in full for one final test:

And that’s it!

Moving a Single WP Site into a WPMS

In the past I’ve toyed around with converting a single WordPress site into a WordPress Multisite. But today while I was on a call with some folks at Miami University of Ohio, we were talking about the possibility of bringing single WP sites into a larger multisite network, and I realized I never really blogged here about what that entails. I set out today to document this, and it was a good refresher for me since I haven’t handled migrations in some time. The process is quite simple thankfully, even though the idea of moving sites can feel worrisome. Domain redirects in instances where site URLs are changing is also a common worry so I’ll make sure to cover that at the end.

For the purposes of my test, I installed a WordPress Multisite via Installatron in my personal cPanel account at lauren.reclaim.hosting. I already had a single test WP instance at laurenhanks.com/custom/ so that’s what I used for this migration.

Before Starting

Take a backup of your site. If you’re working in cPanel or Installatron, you should have the option to generate a backup in a multitude of ways: Generating a backup in Installatron; Generating a backup in cPanel; Restoring backups from JetBackup

Step 1: Export the single WP site

While it may be tempting to use a migration plugin, you can’t always guarantee that you’ll be able to use the migration plugin on the WPMS side of things, so for the purposes of this guide we’ll be using the import/export tool. (I personally love the All In One Migration plugin for other scenarios, and it looks like they have an extension for Multisite migrations that might worth it in bulk moves.)

Log into your single site dashboard and go to Tools > Export. Select which content you want to export (I’ll click All Content) and then click Download Export File:

You’ll be prompted to download the .xml file that WordPress generates. Temporarily save it somewhere easy to access like your Desktop.

If you want to move over Widgets as well, you’ll want to install the Widget Importer & Exporter plugin, and follow similar steps to above to download an export .wie file:

Step 2: Create a new subsite

Navigate to the Network Dashboard of your WordPress Multisite and create a new site where you want your exported files to live.

In my case I changed the subfolder name to /wpmscustom. Once filling out the required fields, click Add Site.

Step 3: Prepping your New Subsite

We’ll need to start first by installing & enabling all necessary themes and plugins used in the single WP install. This is where a little diagnosis and legwork may be required depending on how large your WPMS is, which plugins/themes you want to provide to all end users, and which plugins/themes are compatible in a WPMS environment. My /custom site thankfully didn’t have much on there, but I went ahead and installed the theme and plugins that were previously active. While you’re here, you’ll also want to make sure that the WordPress Importer plugin is installed and network enabled. If you’re importing Widget settings, make sure Widget Importer & Exporter is also installed/enabled. Next you’ll want to navigate to the dashboard for your new subsite and activate your required themes and plugins.

From here, head to the Posts and Pages section of your subsite dashboard and delete any Hello Worlds or Sample Pages.

I also like to delete the widgets that are automatically added too. This section can be found under Appearance > Widgets:

Step 4: Import content into new subsite

Remember that .xml file we downloaded to our desktop in step 1? Cool. Navigate to your new subsite dashboard, and head to Tools > Import. You should see the option to click Run Importer under the WordPress section. If you don’t, make sure the WordPress Importer plugin is activated in your subsite dashboard.

After clicking Run Importer, upload your export .xml file where prompted and then click Upload file and import:

Assign the site content to a new or existing user & select the option to download and import file media attachments. Finally, click Submit:

Upon a successful import, you should see the following notice:

If you’re importing widgets as well, you’ll want to navigate to Tools > Widget Importer & Exporter. Upload your .wie export file and click Import Widgets:

Upon a successful import, you should see the following:

Step 5: Site Cleanup

As with any standard Export/Import in WordPress, you may need to adjust theme & plugin settings given not all customizations will come over cleanly. You’ll certainly get the content over in one piece, but you may need to adjust options in Customizer & Menus, for example. If you’ve got a caching plugin activated, it might be helpful to temporarily disable that while you make changes. Clearing your browser cache also helps, too! I would also check that your user roles are correct, and its always good practice to reset passwords.

Step 6: Domain Mapping & Redirects

Depending on the domain you’re using on the old and new sites, you may need to adjust DNS as well to point to the new multisite. We have a quick guide about Domain Mapping to WPMS that Gordon wrote here. If you need a more in-depth explanation of the process, I recommend checking out the following wpmudev article: The Ultimate WordPress Multisite Domain Mapping Guide. If you’re concerned about old domain names being hardcoded in the WordPress database, you can run a search and replace command in terminal to confirm the domain name change globally.

Creating a Low Highlight behind Links

So this post came about because I was fidgeting with different WordPress themes and decided I wanted to set out and learn how to change the way my post links were appearing. I came across a theme that was highlighting the lower half of text and which looked kinda cool in my opinion. Here’s an example of it working on my personal site:

This quest led me to discover two new CSS functions: Linear Gradients and Transitions. I’m excited to now have these under my tool belt! I’ve never had any formal training for CSS, so this trial & error thing is how I’ve been learning. :)


Linear Gradients

Now I had previously known that using background-color would highlight the entire text, but that wasn’t what I was after. Apparently, if you want to cut the highlight in half, you have to use what’s called a linear-gradient. It works something like this:

linear-gradient(angle, color-stop, color-stop)

I had to do a little reading to wrap my head around the ‘color-stop’ idea, but I found this article helpful if you care to read further. But to break it down, the angle is referring to the angle of the color line. This could be horizontal (my scenario) but it can also be vertical, at a 45° angle, or simply not specified. The next two sections, color-stop, color-stop are basically what’s used to customize the color gradient. You can specify using either length or percentage, and in my case we’ll want to use the latter.

p a {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #E6DFE4 65%);
}

So this is what I’m using. I only want these changes to effect the links (a) in the main paragraph text (p). The background of the links (i.e. the highlight) will be a 180° angle (i.e. horizontal). In the second portion, I’m specifying that a little over the top half of the links will be transparent, while the bottom half will be a nice shade of pink. I encourage you to play around with the percentages so you can get a sense for how they work. I could have done 50%-50%, but I wanted the highlight to fall a little below the halfway mark so you could still read the text.

Incorporating a Hover Action

This next piece is pretty simple. Now that I’ve got the links where I want them, I wanted the highlight to completely fill the text when I hover over the link with my mouse. Like so:

This was done by using the background-color property that I mentioned above. Here’s what I used:

p a:hover {
	background-color: #E6DFE4;
}

Easy peasy, right? It’s just basically removing the linear gradient and doing a full blown highlight when I hover over the link. The only issue that I noticed, and it’s super picky, but it highlighted too quickly. Lol, I wish I wasn’t serious, but this led to my next discovery…

Adding a Transition

In reading this guide, I learned that transition properties allow you to change values over a specified duration rather than having them occur immediately. Just what I was looking for. Transition properties take the following form:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

For me, this translates to the following:

transition: all 0.8s ease;

I’ve only got one transition, but I’m calling all transition properties to keep it simple. I want the effect to take place over 0.8s and I want it to happen with ease! You can choose from a handful of predefined transition-timing-funtions like ease-in or step-start and I’ll link to them here. Finally, I don’t want to delay the animation so I left the final transition-delay out.

Now when I hover over links with my mouse, it just sort of fades in to a full highlight. *chef’s kiss*

The Final Product

p a {
	text-decoration: none !important;
	background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #E6DFE4 65%);
}

p a:hover {
	background-color: #E6DFE4;
	transition: all 0.8s ease;
}

^I added one last line to the top which is essentially removing any previous text-decoration defined by my theme. Check out the GIF below to view this in action:

Filtering Alias Email Notifications into Slack

Ok, today I set out to revamp Sales team notifications for our reseller registrars. I’ll be documenting as I go, but will first share a little back story:

We have some Domain of One’s Own schools that register Top Level domains for all of their users, so keeping those domains separate from shared hosting and consolidated in their own reseller registrar account is crucial. But as you could imagine, we’ve got a handful of these reseller accounts to monitor, and all of these accounts have their own thresholds for funds. It’s important that we keep a solid buffer of funds in each account so X number of domain renewals and registrations can be handled on a given day.

Coming back to the notifications. Our registrar, Logicboxes, will send out email notifications when funds reach a certain threshold within each reseller account. Which sounds simple enough, right? I wish! Unfortunately the email address for these notifications is also the standard billing email address, so changing it to a personal email isn’t really possible. And to make matters worse, the email address is LOUD. So loud, in fact, that we avoid checking the inbox all together and have instead resorted to manually checking reseller account funds daily.

This works fine, but I don’t like it. Manually checking makes way for human error (who is checking what? where’s the communication around the work? what if someone forgets?) and it’s definitely not scalable if we bring in new employees or take on additional reseller accounts.

I should also mention that each reseller account has their own custom email address (school@reclaimhosting.com) which acts as an alias for our catch-all email address, info@reclaimhosting.com.

My idea here was to create a sales@reclaimhosting.com email account and begin routing some of these sales-related emails out of the catch-all info@reclaimhosting.com account and into their own inbox. (I’ve wanted to do this anyway for a while now.) From there, I want to filter/forward useful notifications (like the funds threshold notice) into our designated #sales slack channel. I don’t expect doing this will eliminate the desire to manually check on reseller accounts, but I’m hoping that it will create a failsafe and centralized space to talk about the work that’s happening.


Creating a Sales Email & Setting up Alias Accounts

Reclaim Hosting runs mail though GSuite, so I started first by creating a new email account for sales@reclaimhosting.com. I had to remove the original sales@ alias first.

Next, I moved over all school@reclaimhosting.com aliases that were originally sitting on info@reclaimhosting.com. GSuite has a guide here if you’re interested.

Before doing anything else, I tested to make sure the aliases were working properly by sending an email from my personal email to school@reclaimhosting.com. It worked pretty immediately:


Setting up the Email App with Slack

Before connecting any email to Slack, I needed to first figure out what the ‘low funds in reseller account’ email notification looked like. To essentially generate the notification, I checked on the funds we had our reseller accounts, and then changed the threshold settings to a dollar less than that.

While waiting on those notifications to come through, I set up the forwarding email address in Slack. Using this guide, I went with the option to “Connect the Email app to your Workspace” because I wanted to have the option to choose which emails were being sent; I didn’t want to route the entire inbox into Slack.

Next, I chose the #sales channel since that’s where I want the notifications to arrive:

I went through integration settings, taking note of the custom email address that slack generated for me. That’s what I’ll use when filtering/forwarding specific ‘low funds’ emails.

After saving my settings, I tested the integration in Slack by sending a test email from my personal inbox to the custom address that the Slack Email App gave me:

The notification showed up beautifully in the #sales channel! By the way, I love that Slack allows you to upload a favicon and really customize how the notification comes in.

Defining Email Filters

The final piece was obviously to make sure that the proper notifications were being filtered into Slack. I didn’t want every email from sales@reclaimhosting.com coming into our #sales channel, just the ‘low funds’ notification. First, I set up my email forwarder in Gmail under Settings > Forwarding and POP/IMAP:

In this step you’ll have to confirm the forwarder email address with a confirmation code, but that wasn’t a problem since I previously tested the connection and the code came directly into Slack. From there I made sure the forwarder was disabled for the time being.

Next, I set up my filter rules in Gmail using this guide. By now I had received the ‘Low Funds’ notification from Logicboxes based on my new threshold settings so I was able to click filter messages like this next to the email:

I added in my simple filter settings (the Logicboxes email is actually coming from support@reclaimhosting.com) and clicked Create Filter:

On the following window, I gave it a quick Label, selected my forwarding address from the dropdown field, and then clicked Create Filter:

^I created a filter like this for each “school@reclaimhosting.com” email address.

The next ‘Low Funds’ notification came directly in the #sales Slack channel as planned. Woo!

Custom Page Templates in WordPress

In an effort to start unpacking all things WordPress, I decided to start first with understanding how a few basic WP dashboard tools are working on the backend. Today I’m looking at Page Templates.

Now it’s one thing to troubleshoot the WordPress file system in little spurts as tickets present themselves, and another thing entirely to build out your own page template. So while this may seem like basic knowledge to some, is was quite empowering for me!

For this post and likely others, I’m playing with a WordPress install at https://labrumfield.com/custom/. The theme I’m using is called Aileron. (This is a completely random choice, but I did like that it was pretty simple in terms of overall design– I was looking for a blank slate to work with.)

You can use FTP or File Manager for this one. I’ll work in File Manager since this is pretty simple! I started first by navigating to the wp-content folder of my WordPress install, and then going further into my theme folder at themes>aileron.

The first thing I did was create a new file in the theme folder called laurenstemplate.php. I know very little about php, but I do know that every file needs a title. I added the following to my new file:

<?php /* Template Name: Lauren's Template */ ?>

After clicking save, I went back to my WordPress dashboard, created a new Page, and selected Lauren’s Template from the dropdown that now magically existed under Page attributes:

Now the live version of my new page looked like this:

…which makes sense, right? Because my laurenstemplate.php file is completely empty.

I didn’t want to recreate the wheel when adding content, and I know that WordPress is already looking to a template for pages called page.php, so I started by cloning that to my new file.

As shown in the gif above, you’ll want to copy the full page.php content, aside from the top title/description into your new template.php file. Make sure to remove you ?> from your top php opener if you need to, and then click save! Now when I reload my WordPress page using Lauren’s Template, this is what I see:

Woo! Now we’ve have something to work with. (Feel free to stop reading here if you don’t care about design changes for this specific theme.) But let’s say I want to remove the sidebar and center the page content. There’s a section in my code that’s calling the sidebar right here:

By simply removing the highlighted line the sidebar goes away, but the content is still pushed to the left. I’ve added some text (and an awesome gif that inspired our Roadshow) to the page to see the changes a little more clearly:

Upon inspecting the page further (I used right-click>Inspect Element in Google Chrome) I noticed that the content area of my site was pulling in columns, which also explained why simple CSS to make the site width set to 100% wasn’t changing anything:

In the code that I copied over to laurenstemplate.php, this is what I saw next to my content-area class:

I removed the aileron_layout_class so my code looked like this:

After clicking save, those changes to the template are now applied:

Creating Different Versions of cPanel for different User Groups in WHM

cPanel Packages work great in Domain of One’s Own or Managed Hosting environments where an administrator wants to offer different versions of cPanel to the end user. (i.e. Student vs. Faculty accounts; Beginner vs. Advanced accounts; 1GB vs. 5GB accounts… you get the picture.) Watch the video tutorial below to get a sense of what’s possible, and how you would go about creating your own cPanel packages in WHM.

Introduction: 0:20
Overview: 2:23
Package Settings: 5:15
Feature List: 7:28
Installatron Apps: 9:22
Changing Packages: 14:42

A written guide on cPanel Packages can also be found here.

How to redirect a top-level domain without impacting subfolders

So I got a ticket this morning (thank you Skidmore Domains!) regarding domain redirection and ending up teaching myself the fix thanks to my bff Google! Now I’m not sure if this solution is “best practice” since it involves tweaking the .htaccess file, but it worked and I’m proud of it nonetheless. :)

Support Scenario:

Can I redirect a top-level domain without impacting subdirectories of that domain?

For instance, let’s say I have a subdomain called bigpicture.labrumfield.com that I want to redirect to my main domain at labrumfield.com. Easy enough– all I would need to do is add the redirect in my cPanel account following this guide.

But let’s say that in addition to the above redirect, I also have an Omeka instance at bigpicture.labrumfield.com/omeka that I need to keep in tact. If I were to proceed with setting up a redirect in cPanel, all subdirectories, including my Omeka instance, would redirect to labrumfield.com as well.

To set up a redirect for the top-level domain only (or in this case my top level subdomain) we need to add a few conditions to the .htaccess file for the site that needs to be redirected, bigpicture.labrumfield.com.

If you’re not all too familiar with .htaccess files, you’ll need to know that this is a hidden file in your File Manager. To make sure hidden files are visible, click on Settings in the top right of your window and check Show Hidden Files:

(Psst, if you’re interested in learning more about .htaccess files in general,
I have an entire blog post dedicated to that here: Understanding .htaccess)

Next, navigate to the site directory that you’re redirecting, select .htaccess, and click edit:

In the next .htaccess window, add the following lines:

RewriteEngine On 
RewriteCond %{HTTP_HOST} ^(www.)?bigpicture.labrumfield.com
RewriteRule (.*) https://labrumfield.com [R=301,L]

Here’s a screenshot of my .htaccess file:

And if you’ve got conflicting redirect rules like:

RewriteOptions inherit

that are currently listed, those need to be commented out or removed as well.

Press save changes. The proper redirects should start happening pretty immediately! (Also worth noting that you may need to clear your browser cache to see the changes.)

Quick Actions: Converting .HEIC to .jpg

I just moved to Jacksonville, FL and this will be the new office! Excited to transform this space over time, but for now I’m just really content with enjoying the morning light.

This post is completely out of the norm of what I usually write about, but wanted to document a workflow that I use fairly regularly when uploading photos to my computer.

With the rollout of iOS 11, I’ve noticed that if I airdrop photos from my iPhone to my Mac, the photos will drop in on my desktop as .HEIC files. It’s not all the time, so I’m not sure if its a random setting on my phone that I could change, and I’ve honestly been too lazy to dig into it. But at the point that it hits my desktop as an .HEIC file, I know I won’t be able to upload it to my blog, for example, since this is the error that’s returned:

If you Google how to covert files from .HEIC to .jpg or .png, there are all these online, free ‘conversion tools’ which makes me irrationally annoyed. I want to convert these myself, dammit! So I figured out how to set up a Quick Action on my Mac that will do the converting without having to pop my photos into any sort of online conversion thing.

1.Search for the Automator on your computer. Open it up and click New Document.

2. Select Quick Action, then select Choose.

3. Search Copy in the top left search bar, then select and drag Copy Finder Items to the empty space on the right:

4. You’ll now have the option to choose where you want converted images to be saved. I’m usually working right on my desktop and like to file them later, so for now I’ll leave mine as the Desktop folder. I’m also going to check the box called Replacing Existing Files because I don’t want to create a copy of the .HEIC file, I just want to replace it with the .jpg file.

5. Next, we’re going to search for another action on the left-hand search bar. Search Change Type, then select and drag Change Type of Images over to the right blank space (beneath Copy Finder Items):

6. In the Change Type of Images box that appears, click the dropdown menu and select JPEG.

7. Finally, we want to name our Quick Action and save it as a workflow. From the Automator window, click FileSave, and name your action to something like Convert to JPG. Then click Save.

Boom! Now let’s test it out. Right click on your .HEIC image, hover your mouse over Quick Actions, and then select your newly created Action:

Voilà!

Activating Installatron Apps on a per User/Group Basis

I’ve seen a little confusion surrounding the ability to enable/disable applications on a per user/group basis within a Domain of One’s Own environment, so I thought I’d follow up with a little tutorial:

We should already know that it’s possible to set different user groups for cPanel accounts via Hosting Packages, and then customize the cPanel features that are accessible to each user group (i.e. Hosting Package) via Feature Manager. But is it also possible to customize which installatron applications are available to each user group?

In short, this is 100% possible. Follow the steps below to read more about this:

Pretend Scenario

Domain of One’s Own administrators have determined two user groups within their hosting environment: Beginner and Advanced users. All users will receive the ‘Beginner’ or ‘default’ cPanel package upon sign up, and then administrators can switch to the Advanced hosting package for one-off users as needed. Now, our administrators want to make sure that our Advanced cPanel accounts have access to more installatron apps while the Beginner cPanel Accounts only have access to, say, WordPress, Omeka, and Scalar.

How To Create Groups of Users in Installatron

Installatron > Groups > Create a New Group:

If you’ve got existing hosting packages already set up, I recommend naming these Installatron groups with corresponding titles. From there, you can assign individual cPanel usernames or entire cPanel packages to that Installatron group:

Click Save.

Now navigate to Installatron > Access Control and select the newly created group in the top right hand corner:

Proceed to enable/disable applications like normal. (Steps on this can be found here.) Click save.

Now, any cPanel username or cPanel package that was added to the Installatron group list will see those changes immediately:

Simple as that!

Email Notification Template for Zendesk Support Tickets

Last week I had a bit of free time and started looking for a way to add the Reclaim Hosting brand to the support ticket notifications that are sent out to users when they put in a request. If you have no idea what I’m talking about, here’s what the support notification used to look like when a user put in a ticket to support@reclaimhosting.com:

Before:

In short, my goals were to:

  • Make sure the Reclaim Hosting logo was visible
  • Remove the ‘Powered by Zendesk’ branding at the bottom
  • Add in extra Reclaim Hosting documentation resources
  • Keep the integrity of the ticket content

After doing a bit of reading in the Zendesk Community forums I went down a rabbit hole and found a .html file that was basically a skeleton of the template design I was looking for. I added in the Reclaim logo, business hours and documentation helpful links, then changed the spacing, font size and link color. The final template now looks something like this:

Once including the ticket content from the ‘Before’ screenshot, here’s the final product:

After:

The template also embeds responses back to the user so Reclaim branding & helpful links stick around as the conversation continues:

Overall, this was a fun & quick little project that adds to the full Reclaim Hosting customer experience and I’m proud of how it turned out!

If you’re interested in taking a look at the code I used, click this downloadable link to get access to the file.