Add Schema.org Markup to WooCommerce Products

woocommerce-schema-post

WooCommerce & Schema.org Is Awesome

Adding schema.org markup to a well coded WordPress theme is relatively straight forward and doesn’t take very long to get setup.

I covered how to add schema.org markup to your WordPress theme in a previous post, but I recently needed to apply schema.org markup to an e-commerce site using WooCommerce.

It’s surprisingly easy to do. You’ll need to be using a child theme for the steps that follow.

1. Setup the necessary function in the functions.php file for your theme

Add the following to your functions.php file. It creates a custom function, schema_org_markup.

2. Call schema_org_markup() In Your Header

Open up the header.php file for your child theme and find the html tag, usually towards the top. You’ll want to call the schema_org_markup function inside that html tag, like so:

3. Create a WooCommerce template file in your child theme

Create a directory in your child theme folder named woocommerce. Inside the woocommerce folder, create another new folder named single-product. Inside the single-product folder, create a file named price.php. The contents of your price.php file should look like this:

4. All Done

That’s all that’s required to add schema.org markup to individual WooCommerce product pages. Pretty simple.

If you run into any issues or it doesn’t seem to be working for you, let me know. I’ve only tested this with two themes, Vantage and Virtue. Remember, this only works with well-crafted WordPress themes. Doing this with purchased themes from ThemeForest or other paid theme marketplaces can be significantly more difficult.

Comments are open so let me know if you have any issues, additions, questions, or suggestions.

Introducing Passwds.io

passwdsio

Pronounceable Password Generator

I’d had this code sitting around for a while and decided to make a new site dedicated to it. It’s called passwds.io. It’s a simple service that produces pseudo-random passwords that have some elements that can actually be pronounced, hopefully making them easier to remember.

I do not recall where I got the original code to generate the pronounceable passwords, but am trying to find the source so I can credit where it’s deserved.

I threw thew site at passwds.io together in about an hour using the newest Bootstrap, PHP, and jQuery.

Brandon Lighter brought up the fact that I could be storing all generated passwords, but I’m not. This was developed as a tool for myself to use while I was a sys admin at a large local business, I’d use it to create new passwords for users in Active Directory. It’s still the same code.

Once I can bring the code to a level that isn’t so scattered, I will put it on GitHub so everyone can see the source and what’s going on. It’s really very, very simple.

Of course, I could omit the important “logging” piece when pushing to GitHub, but at some point people just have to trust others, and I’m flat out saying there’s no type of logging being done at passwds.io, other than the standard Google Analytics and Gaug.es for site analytics/

Brandon does bring up good points though, like no usage of special characters.

Secondly, they are only lower-case, upper-case, and numbers, which means you are pulling from a much smaller character set than you could be, making brute-force attacks easier.

I may add an option to do pronounceable passwords, or passwords with special characters enabled, which would probably break pronounceability. But options are always nice.

If you have other suggestions, I’d love to hear them. I’ve debated adding user accounts and the ability to save your generated passwords (that would be accessible only by you), but that sort of goes beyond the scope of passwds.io, which is simple, fast password password creation.

An example output from passwds.io can be seen in the screenshot below.
passwdsio-results

Also, check out Placezombie.com if you’re looking for some pretty gruesome zombie images to use as placeholder images in your designs. Sample 900×150 pixel greyscale image below, achieved with https://placezombie.com/g/900x150 :

Anyway, like I said, I’d love to hear your thoughts on passwds.io. Leave a comment here, it’s the best way to communicate with me about passwds.io. I haven’t bothered setting up passwds.io email yet.

Placezombie: The Zombie Image Placeholder Service

placezombie

Zombie Placeholder Images Are Back

And just in time for Halloween!

I wrote a post about my 10 favorite image placeholder services a while ago. Placezombies.com was one of them. Here’s the announcement blog post for Placezombies.com.

Down in the comments, you’ll see that the owners forgot to renew the domain name, so it obviously stopped working. The source was posted on GitHub, so I immediately forked it and got to work setting up a replacement.

A quick check revealed that placezombie.com was available, so I registered it. Score.

I really didn’t want to host this at DigitalOcean like I typically would, not knowing what to expect for bandwidth usage. Instead, I chose to host it at Heroku, using their free service.

Had a few issues getting it running, but after removing some Ruby stuff and creating the Procfile and package.json files that Heroku requires, I was almost good to go. Only thing holding me back was to replace the port number node.js was using with the port that Heroku uses. Did another git push heroku master, navigated to http://placezombie.com and there it was!

Here’s a 700×300 zombie below for proof!

Placezombie.com

That was generated like so:

You can do black and white images, too:
Placezombie.com

That was generated like so:

So, add some gore to your mock-ups, just make sure your clients aren’t too squeamish.
Placezombie.com

My 5 year old daughter is obsessed with Zombies and is going to fucking love this. She wants to be a Zombie Elsa (from the movie Frozen) for Halloween. :)

Scotch Box: A Vagrant LAMP Stack That Just Works

scotchbox

Just a dead-simple local LAMP stack for developers

I discovered Scotch Box recently, brought to us by the folks at scotch.io. It actually looks like Nicholas Cerminara has done most of the work, or as least done all of the committing to GitHub. Here’s the Scotch Box announcement at the Scotch.io blog.

After using Scotch Box for a day, I’ve decided this is how I will do all future development work. It’s so easy, and you really don’t need to know much about Vagrant or VirtualBox to get up and running with Scotch Box.

Scotch Box has a repository setup at GitHub that explains how to make use of Scotch Box. Basically, just clone the repository, and then run vagrant up inside that repo.

Scotch Box is currently running Ubuntu 12.04.5. Here’s a bit from the Scotch Box readme:

Scotch Box is a preconfigured Vagrant Box with a full array of LAMP Stack features to get you up and running with Vagrant in no time.

A lot of PHP websites and applications don’t require much server configuration or overhead at first. This box should have all your needs for doing basic development so you don’t have to worry about configuring Vagrant and you can simply focus on your code.

No provisioning tools or setup is really even required with Scotch Box. Since everything is packaged into the box, running “vagrant” is super fast, you’ll never have to worry about your environment breaking with updates, and you won’t need Internet to code.

Do you use Vagrant?

View Results

Loading ... Loading ...

Bringing Scotch Box Up

Once you’ve run vagrant up, you’ll be able to access your site at http://192.168.33.10/, you should see something similar to the image below.
scotch

Useful Stuff in Scotch Box

  • PHP 5.5
  • No Internet connection required
  • PHP errors turned on
  • Laravel and WordPress ready (and others)
  • Operating System agnostic
  • Goodbye XAMPP / WAMP
  • New Vagrant version? Update worry free. ScotchBox is very reliable with a lesser chance of breaking with various updates
  • Bootstrap and jQuery are saved in the server’s home folder in case you don’t have Internet (usually plains, trains or cars)
  • Chef and Puppet ready in case you want to add extra features on Vagrant Up
  • Super easy database access and control
    MIT License

Server Components Included

  • Apache
  • Vim
  • MySQL
  • PHP 5.5
  • Git
  • Screen
  • Composer
  • cURL
  • GD and Imagick
  • Mcrypt
  • Memcache and Memcached

Front End Stuff Included

  • NPM
  • Grunt
  • Bower
  • Yeoman
  • Gulp

You can SSH to your server as well, by running vagrant ssh. Upon logging in via SSH you’ll see something similar to the image below.
vagrant-ssh

Scotch Box is in its infancy still. It’s initial commit to GitHub was on October 6, 2014 and has about 10 commits in total.

Updating Scotch Box is easy too. To check for an updated version with Vagrant, do vagrant box outdated. That will tell you if there’s a newer version available. If there is a newer version available, you can update to it by running vagrant box update.

Head to the official Scotch Box website for more information on setting up databases, setting a hostname, and for more details on updating the box. Some basic Vagrant commands are also included to help you with basic Vagrant usage (ie: pausing, resuming, or destroying a server).

If you’re a LAMP developer like I am, and are tired of developing on your client’s dev servers, Scotch Box could be a good solution for you to develop locally. It’s sometimes much easier to develop locally then having to rely on a slow dev server provided by your client. :)

All the images in this post are included in the gallery below.

Free Flat Buttons Are Free

freeflatbuttons

Include stylesheet, apply class, done.

I like flat design. I also like Free Flat Buttons, from freeflatbuttons.com. Did I mention they’re free? But most buttons are free, so the naming must be a marketing thing.

It’s been a while since Free Flat Buttons have seen any updates, but there’s really nothing to update in my opinion. They serve their purpose quite well. They look very nice when paired with FontAwesome, too.

Free Flat Buttons can be found on GitHub, it’s repository is very simple and only includes the button stylesheet and the HTML and CSS associated with the freeflatbuttons.com website.

They’re really simple to use, as they should be. All you have to do is include the CSS, <link rel="stylesheet" href="button.css">, include the FontAwesome CSS if you want it, <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">, and then add a class to an anchor tag.

For a normal sized button, something like this:

To make a button with rounded corners, use style-2, the other styles are listed on the freeflatbuttons.com site:

Aside from the homepage, a demo can also be found on CodePen. I’ve embedded it below. Version 1.0 of Free Flat Buttons can be downloaded from http://www.flatbuttons.com/button.css.

See the Pen Flat Buttons by Anıl Bilir (@Qanser) on CodePen.