Category Archive: WordPress

A Fresh Coat of Paint

As with most things, a little change can be a great thing.

I’ve finally gotten the basics of my new WordPress theme finished and uploaded. I got so bored with all of these business themes with their straight lines and boring colors…

… so I decided to kick it up a notch!

This is the new version of my site. There’s a lot of angles, colors, and various insights to my life that aren’t work related. Eventually I want to do a lot more, but I know that the best things in life are built a bit at a time… Rome wasn’t built in a day, after all!

Everything is built with CSS and Flexbox. I debated using Grid, but I knew I could get Flexbox to behave – especially with the vertical timeline in the middle of the page.

I still need to add my portfolio, but I feel like this is a much more vibrant representation of who I am. I’m not stuffy, business minded… I want to make the web a more beautiful place.

The site also adds in a few of my other passions as well: specifically, gaming, ministry, and culture. I know this seems like a smorgasbord of topics, but they all come together to form who I am, and they (combined with my design and development work) are the lenses in which I view life.

Some things to note:

  • The lines are angled at 1.75 degrees
  • The backgrounds all scroll at the same rate, even those the images are different.
  • I created a function specifically to randomize the background color on some sections because I love a little bit of chaos 🙂
  • The calendar is running a customized version of Modern Tribe’s “The Events Calendar”. I wanted something where I could have a nice way to look at upcoming stuff. Eventually, I’ll have streams (Twitch or YouTube) and other ‘short term’ items that aren’t just conferences.
  • I have a few other ideas that will be coming soon. But I want to nail down what I have before I add on, and that’s nearly done!

I’ve never felt so good about a design as I do about this one, and I feel like it’s… me. It’s a little rad, a little chaotic, and bright – just like I aspire to be in real life!


Getting into Gutenberg, Part 2: A Knee-Jerk REACTion (and an Introduction to Gutenberg Blocks)

I wrote yesterday on Gutenberg, WordPress' soon-to-be editing experience, as it was highly mentioned at WordCampUS here in Nashville over the weekend. Yesterday, I focused specifically on the outer facade of Gutenberg – movable blocks, layouts, and modular approaches to content.

Today, we're going to look at the back-end. For a WordPress developer, this is where their experience may become a little less rosy. For a modern developer, a lot of this will look familiar.

Gutenberg's Content Structure

Gutenberg's content is structured into "blocks". A block is simply a syntaxed area of code that WordPress recognizes as something it should hook into with the editor.

On the outside, as we saw yesterday, a typical text block looks like your standard paragraph. But on the backend…

…we have syntax. Commented code that Gutenberg recognizes to store its information. Those paragraphs are pretty standard fare, but there could also be parameters…

…stored as an array.

This is the first of two pain points a lot of developers seem to have, as a structure like this is just not sustainable in the long run. Commented code is normally frowned upon in clean standards, and with WordPress using it as the primary source of templating for Gutenberg, it seems that (for the moment) the simple content looks bloaty on the inside.  One of the biggest outside forces right now in the development cycle – other than adoption and testing – is for a better, cleaner, leaner way of storing data.

Adding a New Block

I've been fiddling with Gutenberg's block syntax all day, and I've finally come up with something of a boilerplate to use for plugins.

<?php

/**
 * Plugin Name: Mitch's Gutenblocks
 * Plugin URI: https://github.com/WordPress/mitch-gutenblocks
 * Description: Mitch's playground for creating new blocks for Gutenberg.
 * Version: 1.0.0.0
 * Author: Mitch Canter
 * Author URI: https://www.mitchcanter.com
 *
 * @package mitch-gutenblocks
 */

 /** Defining Constants **/
 define( 'SG_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
 define( 'SG_PLUGIN_URL', plugin_dir_url( __FILE__ ) );

 /** Separating Files **/
 require_once ( SG_PLUGIN_PATH . 'blocks/sample-block/sample-block.php');

For our main plugin file, I've defined constants and broken the actual block off into its own file.

Our structure looks something like this:

mitch-gutenblocks
|- blocks
|--- sample-block
|----- block.js
|----- index.php
|----- sample-block.php
|--- index.php
|- index.php
- mitch-gutenblocks.php

We have our root folder (with main plugin file), a separate folder for each block, and a javascript and php file inside of that folder (along with silencing indices for each level).

Let's look at the sample-block.php code:

<?php

function sample_block_editor_assets() {
	wp_enqueue_script( 'sample-block', plugins_url( 'block.js', __FILE__ ), array(
		'wp-blocks',
		'wp-i18n',
		'wp-element',
	), time() );

	wp_enqueue_style( 'giphy-block', plugins_url( 'editor.css', __FILE__ ), array( 'wp-blocks' ), time() );
}
add_action( 'enqueue_block_editor_assets', 'sample_block_editor_assets' );

But wait, you may ask… where is all of the plugin functionality?

Welcome to Gutenberg's second pain point with WordPress developers – all of the blocks are based on React JavaScript. I think that of the two major pain points, this is the loudest simply because WordPress developers see PHP as the defining language of their platform. I'll go into another post explaining why this is turning into an incorrect assumption another time, but the long story short is this: with WordPress turning into a REST-API powered CMS, we can start to focus on other languages to create WordPress sites.  React is a natural choice, despite its baggage or emotional reaction.

Here is a VERY simple block.js file:

( function( wp, $, _ ) {
	var __ = wp.i18n.__;

	wp.blocks.registerBlockType( 'sample-block/sample-block', {
		title: __( 'Sample Block', 'sample-block' ),
		category: 'common',
		icon: 'admin-plugins',
		keywords: [ 'sample' ],

    edit: function edit( props ) {

      ... code goes here ...
 
		},

    save: function save( props ) {

      ... code goes here ...

		},

	} );

} )( window.wp, window.jQuery, window._ );

Let's walk through it. If you're familiar with React, this syntax may be familiar. If not, here's what's going on:

The first few lines set up the function and call wp.blocks.registerBlockType – similar to firing up a class in PHP. We're using an abstracted layer to generate the guts of the block itself.  We define a title, category, an icon (via Dashicon naming) and any keywords we want to have this pop up for in search.

There are two important sections: Edit, and Save. Editing functions are what happen as you use the block in the editor. You can modify the block at will with functions, and any inputs you have can be utilized in the next function.

Save functions fire when the box itself is manipulated. Moving a box, adding a box, or any other CRUD functions will fire the save command and make sure any data currently in the box isn't lost.  

Change for Change Sake? Or Progression?

There are very, very loud opinions on both sides of the aisle on this topic. WordPress purists argue that PHP is the de-facto language for WordPress. Why use another framework to do something that we've been able to do for a long time – create content?

On the other hand, progress marches on, and others see value in allowing other frameworks that are maturing and progressing to interact with WordPress.

We're going to continue to look through the Gutenberg platform over the next days – adding a block is fine and dandy, but what does that mean for meta boxes, options in WordPress (stored via PHP) and other data we already have in WordPress?

That's a whole different post altogether!


WordPress, React, and The Future

On September 14, Matt Mullenweg announced that WordPress was rethinking its use of the React.js library due to Facebook’s clarification on its patents.

The short story: Facebook released React under a modified “open-source-ish” license (called BSD+Patents) that allow them to judiciously revoke the patent if a service violates the terms of service (specifically, if they use React to build a system that would compete with Facebook).  In doing so, the Apache Foundation has condemned the license and placed it in their “category X” group – disallowed for use on Apache projects.

With over 25% of the web powered by WordPress, Matt Mullenweg states, ‘having them all inherit the patents clause isn’t something I’m comfortable with’.

At the end of the day, a large company like WordPress shunning a software package would normally be a death knell, but it’s basically putting two Internet superpowers against each other. I know personally I’ve been trying to decide on a JavaScript framework to branch into, and this has caused me to have pause with regards to React.js.

I think that this is a great time for WordPress/Automattic to do what they’ve done with projects in the past: create a brand new (or purchase the rights to an existing) framework library, rebrand/revitalize it, and license it the same way they’ve licensed WordPress products in the past.  With WordPress’ front-end quickly being excised from its back-end system, this could be just the push needed to create something that would do for JavaScript frameworks what WordPress did for blogging: revolutionize it.


Advanced Custom Fields: Building a Client Friendly “Page Builder”, Part 1

There are very few subjects debated so hotly in the WordPress world as the ones regarding “Page Builders”. For the unfamiliar, a page builder allows the end user to set up content without needing knowledge of code.  While – to the end user – the allure of being able to have full control over design and content is nice, most developers shy away from them due to the resources needed to give that sort of power. Page bloat – loading of unnecessary scripts that drives up load time – is usually a problem with such plugins. Even caching plugins can only do so much to curb the bloat.

Over the years, I’ve tried to find a nice, happy medium – something that was “developmentally sound”, but that would allow at least some customization of the content beyond just being able to enter text.

A few years ago, I got a primer from Tammy Hart about Advanced Custom Fields – specifically, the “Flexible Content” fields.  Flexible Content fields allow a user to select from predefined options, fill in blanks, and the code renders based on what content is selected.  Given the combination of options available in ACF, there is a way to build something that resembles a page builder – the ability to have different types of content – without the “page bloat”.

Note: I only recommend paid plugins when the cost is outweighed by the benefits. This plugins has been in my toolkit for several years, so I absolutely recommend it for any developer wanting to extend their capabilities.  You can purchase it here: https://www.advancedcustomfields.com/pro/. The free version will not work, as you need the Pro version for the “Flexible Content” add-on.

Page Builder Overview

This is the first in a series of posts. The first post will be the initial setup of the “module loop” and a sample module.  The second post will contain sample modules used in many modern page builders. The final post will be a few “tricks” I’ve learned – global (sitewide) modules, defining module locations with hooks, and other similar aspects.

The Initial Module Loop

Once you’ve purchased and installed the plugin, a new option (“Custom Fields”) will show up on the left side.  Clicking on it reveals a page that shows any field groups you’ve defined.

Building a Page Builder with Advanced Custom Fields

Add a new field group, give the group a name, and admire all of the options you have to set. Luckily, we can avoid most of them in favor of setting the essentials.

Building a Page Builder with Advanced Custom Fields

Yes, there’s a lot of options – ranging from input boxes to date pickers.  For this tutorial, we’re going to focus on the “Flexible Content” option.  Selecting it gives you the basics – the title, the slug, and the ability to define your modules.

Building a Page Builder with Advanced Custom Fields

I’ve called mine “Modules” since we’re thinking about this in a “page builder” mindset. We want something people can define a row and content, add in some text, and call it a day.  For our first module, we’ll do something very simple: A WYSIWYG editor that runs the full container width.

Keep in mind that your code may look similar, but ultimately you need to implement this code in your own way, with your own framework. I’m just providing the basics.

Building a Page Builder with Advanced Custom Fields

The big things to note are that our modules have a “module” slug, and our content block has a “content” slug. We’ll need these as we write our code.

Publish the field group, and let’s swap over to our codebase.

The Page Builder Code

I’m going to define these modules as a “function”. I do this for a few reasons: 1) It keeps our actual content templates free of bloat, and 2) it allows me to re-use the function multiple times – something I do for clients that need modules in different places.  An example: one client I wrote for has these modules either above, below, or replacing their content on a page.

function insert_modules() { ?>
<section id="modules">
<?php
    if( have_rows('modules') ):
       while ( have_rows('modules') ) : the_row();
          if( get_row_layout() == 'full_width_content' ): ?>
             <section class="module full_width_content_module">
                <div class="container">
                <?php the_sub_field('content'); ?>
                </div>
             </section>
          <?php endif; 
       endwhile;
    else :
       echo "<div class='container'>No Modules Defined!</div>";
    endif;
 ?>
</section>
<?php }

So, let’s look through this:

The first line defines the use of a function. This lets us re-use it later, vs just being able to use it once.

Then, the actual HTML markup for the function. I’m setting up a section (named modules) so I can keep things in line.

Then things get interesting: we’re using an if-then statement to check for any defined “modules”.  If there aren’t any, it falls back to an error message.

Inside of our “loop”, we then query for what “type” of module we’re display, and use that code.  We’ve defined one module – the full width content. If there’s a match on the module type, it runs the code inside (and pulls the relative custom field data).

In our next post, we’re going to set up a few different types of modules (and add them to our “module loop”). We’ll explore what some of the more popular content types are on a site, and see if there’s a way to duplicate those without all of the bloat a “page builder” has.

Drop your questions in the comments below, or if you have any module ideas for the next post, leave those as well!


Encryption, WordPress, Terrorism, and the Modern Web

Editor’s Note: I try not to bring politics into my development discussions, but when they intersect, it’s always a good time for a teaching moment. If you leave a comment, be civil and follow the rules of having a good discussion, or I will outright delete your comments. There’s no room here for rude people. We’re here to talk about encryption, not start a political war. Be good.

Last week in Westminster – a neighborhood of London, terrorist Khalid Masood killed 4 people and injured more than two dozen. While the terrorist attack was heartbreaking, and our thoughts and prayers go out to the victim’s family, it’s the aftermath of the attack that’s stirring up technology specialists around the globe.

Home Secretary Amber Rudd has put out a call to big tech companies – Google, Facebook, Twitter – to take on extremist content on the web.  The article, posted by The Guardian, goes on to name several services that (according to them) contribute to terrorism around the globe. Three services are named in particular: Telegram, JustPasteIt, and… WordPress.

The full blurb (highlighted text is my emphasis):

What is it?

Uunlike Telegram WordPress is not a mobile phone messenger but a free website publishing and hosting system. WordPress software supports more than 60 million websites from personal blogs to major newspapers, and the free hosting site WordPress.com hosts approximately 40 per cent of the world’s blogging sites created by webdesign companies like http://www.webdesign499.com/web-design-jupiter/.

To create a WordPress.com account, users log in with an email address, which they could have created anonymously. They do not need to provide a phone number.

Once users have picked an available web address and chosen a basic website template, the new site will appear online.

Why is it linked to terror?

Its low cost, ease of use, and anonymous interface means terror groups are as likely as the average website owner to create their sites using WordPress.com – for propaganda, radicalisation or publicity.

It is possible to secure and encrypt a WordPress site’s server so content cannot be hacked, and to share an encryption key with others so content can be shared privately.

But most such sites are publicly available and used to spread content. According to US think tank the Counter Extremism Project, WordPress.com sites have played host to beheading videos, firing squads, and a video of a man being shot in the head, emblazoned with the words This In the Enemy Of Allah.

Who runs it?

The WordPress project was co-founded in 2003 by two developers, American Matt Mullenweg, 33, and Briton Mike Little, 54. Mullenweg’s company Automattic owns WordPress.com which acts as web host for the majority of smaller WordPress sites.

Automattic was valued at over $1bn in its latest funding round. Little, who lives in Stockport, developed the original WordPress software alongside Mullenweg but has gone on to focus on other development projects rather than on the WordPress.com web hosting business.

Encryption and the Web

If you’ve never heard of encryption by that term, you’ve still seen it in action: when you go to Amazon to purchase something, that green lock in the URL address bar is letting you know that the site has an SSL Certificate.  It’s not foolproof, but encrypting the data securely via SSL is a “first level” defense against hackers getting in and intercepting the data.  If someone were to intercept secured, encrypted data – they’d see a bunch of random ones and zeros, or a string of gibberish characters.  But, the SSL certificate acts like a decoder pin – it has the necessary information needed to interpret and read the information.

Encryption: What’s the Problem?

Using the decoder pin example, let’s take it a step further. Let’s say you write a message with a decoder pin, and you are the only one that has that specific pin. You are the only point of failure, and someone would have to literally mug you in order to decode your data.  Now, with enough tries, a person could -guess- your decoded information, but the time it would take to iterate through all of the possible combinations. In the InfoSec community, this is known as a “Brute Force” attack.  A person could also guess at what you’ve written using common words and phrases.  This is known as a “Dictionary” attack.  Both of those attacks are much harder to pull off successfully with one point of failure – your decoder pin.

The problem, then, is that governments are starting to see encryption as a bad thing. They see data they can’t snoop into and – contrary to the US judicial system – immediately decree that you must be guilty because you’re hiding something.  Both the US and the UK – especially after last week’s attacks – are ramping up pressure on tech companies to install backdoors into their programs. Basically, they want the FBI and UK governments to be able to tap into those programs to read

This is a terrible, terrible idea.

Remember that single point of failure?  Imagine, now, that someone has made a copy of the decoder pin, and handed it to the law enforcement agencies.  They’re able to – at any time – see anything that you’ve written with your code.  To some people, this may not seem bad, but let’s look further for a moment.

  • We now have two points of failure – 100% more chances that a hacker or dubious individual can use your encrypted data maliciously.
  • Humans are humans. Even if someone has your decoder pin and pinky promises not to use it, the allure of being able to access that data may be too great.
  • If the decoder pin is stolen or misused (by others, or by their intended audiences), your data is now at risk.

The Bottom Line

I am a firm believer that humans are mostly good. Sure, there’s some terrible people out there, but I know Muslims, Christians – Humans in general – and all sorts of other people that are terrible, and I know many more that are legitimately good.  And people have a right to privacy.  I have a right, in my own home, to be free from people spying on what I do. Does that mean that I’m doing something dubious? Absolutely not – it just means that I have the right to have people not be “all up in my business” when I’m home.

Online data is a different animal, but I think that we still have the right to that privacy.  The ability to encrypt data is no different than putting something in a safe where we have the only key. I would never give a random person the key to the safe in my house, and I don’t expect to give the key to a random person to inspect the data I send online, either.

Educate yourself.  We should not, even for the sake of safety, have to give up any more rights than we already have.  The right to privacy far outweighs that.

This subject will come up more in the coming months, as more and more people start to learn what encryption is.  I hope that the value of encryption is seen over the need for personal safety, especially because – in the long term – a sacrifice of encryption will not lead to a safer world.


WooCommerce: Third Party API Calls At Checkout

I’ve been doing a lot more WooCommerce work as of late. And with good reason – WooCommerce (as of the end of 2016) powers nearly 42% of all eCommerce stores on the internet. One of the biggest requests I have when working with WooCommerce is how to integrate a third party vendor into a checkout screen. An example would be a gift card merchant. The retail store may not have the capability to fulfill their own gift cards, and so a third party merchant is used.  That’s well and good, but how do we get WooCommerce and the third party merchant to talk to each other?

As long as the third party vendor has even a half-way decent API, we can tie this into WooCommerce.

Prerequisites

The biggest prerequisite is that the third party vendor have an API that allows at least one way communication.  Preferredly, we’d like to have a payload AND response sent back, but sometimes that’s just not the case.  API documentation will differ on a per-vendor basis, but having an understanding of how the API responds and accepts payloads is a must here.

We are also working under a few assumptions:

  • We want to only interface with the API upon completion of a payment.
  • We want to store / display information from the API
  • We want the API information to be sent out with WooCommerce’ email.

Sending / Receiving from the API

I’ve added a function below. We’ll walk through it once you’ve had a chance to read it.

add_action( 'woocommerce_payment_complete', 'my_api_call');
function my_api_call( $order_id ){

	// Order Setup Via WooCommerce

	$order = new WC_Order( $order_id );

	// Iterate Through Items

	$items = $order->get_items(); 
	foreach ( $items as $item ) {	

		// Store Product ID

	$product_id = $item['product_id'];
        $product = new WC_Product($item['product_id']);

        // Check for "API" Category and Run

        if ( has_term( 'api', 'product_cat', $product_id ) ) {

	       	$name		= $order->billing_first_name;
        	$surname	= $order->billing_last_name;
        	$email		= $order->billing_email;
	        $projectsku     = $product->get_sku(); 
        	$apikey 	= "KEY_GOES_HERE";

        	// API Callout to URL

        	$url = '##API URL##';

			$body = array(
				"Project"	=> $projectsku,
				"Name" 		=> $name,
				"Surname"  	=> $surname,
				"Email"		=> $email,
				"KEY"		=> $apikey
			);

			$response = wp_remote_post( $url, 
				array(
					'headers'   => array('Content-Type' => 'application/json; charset=utf-8'),
					'method'    => 'POST',
					'timeout' => 75,				    
					'body'		=> json_encode($body),
				)
			);

			$vars = json_decode($response['body'],true);
        	        
                        // API Response Stored as Post Meta

  			update_post_meta( $order_id, 'meta_message_'.$projectsku, $vars['message'] );
  			update_post_meta( $order_id, 'meta_link_'.$projectsku, $vars['link']);
  			update_post_meta( $order_id, 'did-this-run','yes'); // just there as a checker variable for me
        }

    }
}

The first thing we do is to create an action for the woocommerce_payment_complete hook. This hook will only fire once the payment from whatever payment method the customer chooses comes back as successful.  Any pending or “pending payment” orders will not fire this action.

We want to then create a new $order via the WC_Order class, and loop through the items.

For this particular code, I didn’t want -every- item to fire the API since there are other types of products in their store. So, we then check for any products in the ‘API’ category – via the slug – and only run the script further when that condition is met.

If the condition is met, we start to build the payload – the information we want to send to our third-party. In this case, we’re sending first name, last name, email, SKU (which I used as a unique product identifier), and API Key.  Most APIs are restricted in access, and an API Key may be given in order to validate with the third party server.  In this example, the SKU matches with a Project ID in the third party system, and lets me access that particular item via a variable shared in both data sets.

The $url – our API endpoint – is then set up.  We can then start to build the $body based on whatever documentation given to us by the third party. In this scenario, we’ve set up the $body as an array of the various variables we’ve collected.

The $response variable actually sends off the data via the wp_remote_post function, which has two parts: the URL, and the payload.  I’ve set some various headers and options above to let WordPress know that our payload should be sent as a JSON request. This, in turn, is received and then the response is sent back as JSON as well.  The $vars variable accepts that request and decodes the JSON into a format that’s readable by our system. In this case, it’s a PHP Variable with key/value pairs.

Finally, I want to store some of the response into the order meta. This will allow us to access those variables in other places – customer/admin emails, and the order screen.

(You may notice above that I also call the SKU of the product. I like doing this, and using it as a variable in the custom meta, so that if multiple unique items are purchased we can store this information – and display it – per product.)

Order Confirmation

In my theme folder, I’ve created a subfolder called ‘woocommerce’. Within that are two more subfolders: emails and order. These two folders – and the included files – are what lets me override the default WooCommerce templates and display some of our newly acquired data.

For our Order confirmation screen, we want to copy the file from ‘/wp-content/plugins/woocommerce/templates/order/order-details-item.php’ into ‘/wp-content/themes/my-theme/woocommerce/order/order-details-item.php’. Right now it’s an exact duplicate. But we want to add a bit of code in.

I like to add this in right after the

on line 49:

<?php if ( has_term( 'api', 'product_cat', $product->id ) ) { >

<?php $varproduct = new WC_Product($item['product_id']); ?>
<?php $sku = $varproduct->get_sku();?>

<tr>
 <td colspan="2" class="assessment_link">

     <?php 
         $message = get_post_meta( $order->id, 'meta_message_'.$sku, TRUE);
         $link = get_post_meta( $order->id, 'meta_link_'.$sku, TRUE); 
     ?>

 <p><?php echo $message; ?>. <a target="_blank" href="<?php echo $link; ?>"><?php echo $link; ?></a></p> 
 </td>
</tr>

<?php } ?>

As before, we’re checking to see if the product in question belongs to the API category. If so, we run the next bit of code: creating a $product variable, grabbing the SKU, then calling the post_meta we stored during the API call. Finally, we’re echoing that message out.

WooCommerce Emails.

There’s two emails I’m concerned with, as a store manager: the admin [new order] email, and the customer [order complete] email.  Both have a separate email template:

  • Admin [New Order]: copy ‘/wp-content/plugins/woocommerce/templates/emails/admin-new-order.php’ into ‘/wp-content/themes/my-theme/woocommerce/emails/admin-new-order.php’
  • Customer [Order Complete]: copy ‘/wp-content/plugins/woocommerce/templates/emails/customer-completed-order.php’ into ‘/wp-content/themes/my-theme/woocommerce/emails/customer-completed-order.php’

Once again, we’re calling post meta. This time, I like to add it under the do_action (‘woocommerce_email_order_details’) function:

<?php $items = $order->get_items(); 

foreach ( $items as $item ) { 
   $product_id = $item['product_id'];
   $product = new WC_Product($item['product_id']);

   $projectsku = $product->get_sku(); 

   if ( has_term( 'api', 'product_cat', $product_id ) ) {
     echo '<p>';
     echo get_post_meta($order->id, 'meta_message_'.$projectsku, true); 
     echo '</p><p>';
     echo get_post_meta($order->id, 'meta_link_'.$projectsku, true); 
     echo '</p>';

   }

} ?>

We’re checking to see if the ‘API’ category is attached to an item, grabbing the SKU, then pulling the custom order meta information we need.

Once again – API documentation varies from vendor to vendor, so your mileage may vary.  The nice thing about using WordPress’s built in function? If the response comes back with anything other than a 200 response, the function will fail; meaning that you won’t sell a gift card – for example – if you don’t receive the card number and PIN code back.


Twitch Conditional – A WordPress Plugin for Twitch Streamers

I love Twitch. I actually spend my work day with one browser dedicated to Twitch, and subscribe to MrHappy’s daily Stream. So when rumors surfaced a few years ago their API, of course I wanted a way to interface with that API.

In doing research, I realized that a lot of streamers don’t have real websites. A few of the top ones do, but I think it’s because the automation between Twitch and a true website is “iffy” – you have to manually update every time your stream goes live, and that takes precious time away from interacting with the community (and actually streaming).

What if there was a way to automatically update your website to let people know that you were streaming – and that would turn itself off once the stream was over.

Twitch Conditional

I love the way WordPress handles conditional statements; there’s very specific “if” statements built into the core, and it lets you check for any number of flags to be set – is it a Category? is it a Tag? is it page two of some random archive? There’s a conditional for that. So what if there was a way to work with Twitch the same way?

The Twitch Conditional WordPress plugin allows you to see when you – or your favorite streamer – is online, and hides/shows content accordingly.

This plugin takes one variables in the options panel: a Client ID. You can get that from your profile: https://www.twitch.tv/settings/connections. Log in, generate a client ID, and then put it in the options pane. That’s the only set up you need.

When you’re developing your website, you can use something similar to this:

<?php if (twitch_is_live('username')) { ?>
    <p><a href="##twitch_url##">Currently Streaming Live!</a></p>
<?php } else { ?>
    <p>This Twitch user is currently offline!</p>
<?php } ?>

Breaking that down: If USERNAME is live, display a link to the twitch stream. If not, display some text that says the user is offline.

You could get really in-depth, hiding and showing entire sections of the site, embedding your twitch stream into the section so that it shows up when you go online. Or you could do a simple offline/online check with a special icon.  The possibilities are endless.

One day I’ll edit this plugin to have shortcodes – for now, the developer piece is what I was really wanted to get finished.

You can download the plugin here, on Github: https://github.com/thatmitchcanter/twitch-conditional


The Hidden WordPress Options Panel

Did you know that there’s a hidden options panel in WordPress?

It’s one page you can visit that will allow you to set every single option available to you on your site – even some of the hidden ones that are set via plugins and/or other functions.

http://www.mydomain.com/wp-admin/options.php

Navigating here will show you any options, ACF (Advanced Custom Fields) options, SEO options (if you have a plugin installed for it), and a slew of other hidden options (denoted by the _ before them).

So, what can you change here? Everything that’s not greyed out. But the better question is what should you change here. With great power comes great responsibility, so if you’re not sure what an option is, it’s best to leave it alone.

And if you break your website because you were fiddling with options? Well, maybe you should take a backup first!


Using Hyperlinks Correctly in WordPress

Any good content marketer worth his or her salt knows the value of using links in their content. It’s a good strategy to practice – whether you’re linking internally to content you’ve written in the past or to external resources you mention in posts.  However, a lot of people overlook a small, single detail that could mean the difference between someone staying on their website or leaving.

External Link Targeting

The rule is simple: if you are taking someone off-site (whether it’s a completely new domain or even a sub-domain of your current site), you want to make sure the link opens in a new tab or window. In WordPress, that’s as easy as checking a box as you’re inserting the hyperlink. Just in case you want the entire process:

  • Type the text you want to link.
  • Highlight it and click on the hyperlink button in the WordPress editor bar (it looks like a chain link).

Using Hyperlinks Correctly in WordPress

  • Fill out the URL. The Link Text should be filled out for you already
  • Check the box that says “Open link in a new window/tab”.

That’s it. When you click on the hyperlink in the content, it’ll take you to a new window or tab and will leave your content open in the previous location.

Internal Link Targeting

You want to make sure that people visiting an internal link (a link that shares a domain with your website url) don’t visit a new window or tab. It’s assumed that any links that are in the same domain are on the same site and shouldn’t confuse users. One exception: if you host multiple websites in sub-folders, and want to link from one site to another, use a new tab or window.

As a bonus, if the content you want to link to is a WordPress content piece (page, post, category, or custom content / taxonomy), you can click the “Or link to existing content” drop down and see options to easily link to existing content.

Using Hyperlinks Correctly in WordPress


Why I (Still) Use WordPress

It’s no secret that I love WordPress. I’ve built this site on it, for one, but I brag that I’ve used WordPress for nearly all of the projects I’ve done over the last few years.  Other platforms have come and gone, but WordPress has remained steadily at the top of my list of “must-use” tools. My workflow has changed, but it still all centers around WordPress.

So, how is it that in a world with so many content management systems that WordPress manages to stay at the top of my leaderboard?

WordPress is Powerful.

It may have started out as a simple blog, but WordPress has grown up. Sitting under the hood is an amazing collection of functions, actions, and filters that let you (with a plugin or a few lines of code) change everything about how your blog functions. And since it’s written in PHP, you have the full language behind you if you want to go “off-grid” and create something new.

WordPress is Functional.

You want to add something other than a blog? WordPress has you covered. From fully functional eCommerce engines to membership sites, there are plugins and addons that can do the job well. Nowadays, most of them even seamlessly integrate with WordPress, making the entire experience both easy to use and functional enough to get the job done.

WordPress has a Great Community.

Behind WordPress are thousands of amazing developers, designers, and strategists that are working behind the scenes to ensure users have the best product they can. People are constantly testing, improving, and debating new features, as well as fixing bugs and errors that may pop up from time to time. Very rarely does WordPress ship with a glaring bug; and if it is, it’s usually fixed within 24 hours.

WordPress is Secure.

I know a lot of people who would fight me on this, but WordPress is just as secure as any other platform. WordPress has tons of eyes on it, and people testing malicious scripts on it daily. For the most part, any “Zero Day” exploits (a hack that could compromise a site on the day it’s discovered) are fixed within hours, but even that is a small part of the overall reasons a site is hacked. Usually if a WordPress site has been compromised, it’s for one of three reasons:

  1. Out of Date Install
  2. Out of Date Plugin
  3. Hosting Issues

Which brings me to…

WordPress is Easy to Update

Gone are the days where you’d have to worry about hitting the update plugin. WordPress has taken the App Store approach to its update strategy: you should be able to hit the update button and get the new version quickly and painlessly. Plus, there are a myriad of backup solutions out there (most free nowadays) that can save you if things go south.


Contact/Hire Mitch

Want to book Mitch for a speaking event at your business or church?

Or does your business or project need some amazing design / development muscle?

Use the form below!


Don’t worry - your information is safe with us! We dont’ sell it, and we don’t like people who do!

Please only contact Mitch related to speaking engagements, projects, or personal messages.

NO SPAM EMAILS, PLEASE!