Tag: themes

Use Composer in Your WordPress Plugin or Theme

Simple Tutorial Showing How To Use Composer in Your WordPress Plugin or Theme

I love Composer. It just makes including libraries or scripts in your app incredibly easy. So easy that it’s stupid not to use it (in many, if not most cases).

The number of libraries/scripts available on Packagist is astounding, all of which can be included in your plugin with Composer. Packagist is the main Composer repository. It basically aggregates all types of PHP packages that can be installed via Composer.

I’d never used Composer with a proprietary WordPress plugin before. The plugin is for a client so it’ll never be available to the public.

Here’s the steps I took to make this WordPress plugin compatible with Composer so that I can easily bring in third-party libraries.

We’ll be using mailgun-php throughout this example, as the plugin that inspired this post uses Mailgun to send all sorts of emails.

1. First, install composer on your server.

I install Composer globally, like so: 

curl -sS https://getcomposer.org/installer | php<br>sudo mv composer.phar /usr/local/bin/composer

2. Add Mailgun as a dependency.

cd /path/to/plugin/
composer require mailgun/mailgun-php:~1.7.2

3. Check your composer.json file.

We’re including Mailgun and guzzle from Packagist. Your composer.json file should look similar to the example below.

4. Tell composer to install Mailgun.

tyler@yourmachine:~/path/to/plugin$ composer install

5. Autoload Our Mailgun Classes in Our Plugin.

The following should go in your plugin-name.php file, before any other PHP code. 

<?php
require 'vendor/autoload.php';
use MailgunMailgun;

You can now use Mailgun in your WordPress plugin or theme, some basic examples of using Mailgun can be found on GitHub and in their official documentation.

2+

Add Schema.org Markup to WooCommerce Products

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.

function schema_org_markup() {
    $schema = 'http://schema.org/';
    // Is single post
    if ( function_exists(is_woocommerce) && is_woocommerce() ) {
      $type = 'Product';
    }
    elseif ( is_single() ) {
        $type = "Article";
    } 
    else {
        if ( is_page( 644 ) ) { // Contact form page ID
            $type = 'ContactPage';
        } // Is author page
        elseif ( is_author() ) {
            $type = 'ProfilePage';
        } // Is search results page
        elseif ( is_search() ) {
            $type = 'SearchResultsPage';
        } // Is of movie post type
        elseif ( is_singular( 'movies' ) ) {
            $type = 'Movie';
        } // Is of book post type
        elseif ( is_singular( 'books' ) ) {
            $type = 'Book';
        }
        else {
            $type = 'WebPage';
        }
    }
    echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';
}

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:

<html <?php schema_org_markup(); ?> <?php language_attributes(); ?>>

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:

<?php
/**
 * Single Product Price, including microdata for SEO
 *
 * @author  WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $post, $product;
?>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
 
    <p class="price"><?php echo $product->get_price_html(); ?></p>
    <meta itemprop="name" content="<?php echo $product->get_name(); ?>" /> 
    <meta itemprop="price" content="<?php echo $product->get_price(); ?>" /> 
    <meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
    <link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" />
 
</div>

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.

3+

Meet Unyson, A Drag & Drop WordPress Framework

Features a visual drag & drop page builder that will let your users create countless pages at a drop of a dime

Got an email from Olga at ThemeFuse yesterday announcing the release of their new drag & drop WordPress framework named Unyson.

Unyson comes with many built-in extensions, and the documentation seems to be very helpful and complete. Some highlights from the Unyson home page:

  • All the built in extensions & options work in perfect harmony. You’ll find developing on Unyson a breeze.
  • Your users will love the drag and drop page builder and the customization options built into
  • All you need to do is download the Unyson WordPress framework and start developing your theme.
  • We have a lot of tools ready to help you along the way: developer manual, Trello, GitHub Support and more.

unyson-docs
Unyson also includes an extensive list of customizations and options:

  • Page Builder
  • Option Types
  • Styling
  • Sidebars
  • Megamenu
  • Backup
  • Sliders
  • SEO
  • Breadcrumbs
  • Portfolio
  • Custom Widgets

I enjoy this theme so much because it has many features that premium or paid themes have, but Unyson is free! You can download the source on GitHub.

Getting started with Unyson is extremely easy, but slightly different than how you’d typically upload a theme. Installation of Unyson is like so:

  1. Download the framework archive from the framework’s GitHub repository
  2. Extract it to your parent theme directory. After this you must have framework/ directory in parent theme. It’s mandatory to have this exact same folder structure otherwise it will not work.
  3. Include the Unyson framework by adding this line in your theme’s functions.php:

require_once TEMPLATEPATH .’/framework/bootstrap.php’;

After that, you’ll need to add some more code to the beginning of all the PHP files associated with your theme. I suggest you go over the Getting Started guide and really pay attention so you get a good understanding of what Unyson can do. The documentation is really awesome, most issues or questions you could have are more than likely covered in the docs.

I haven’t had much of a chance to play with Unyson, but will get the opportunity to on an upcoming client project, so I’m really looking forward to that.

Unyson is quite new, so hopefully we will see more features as it matures. It’s definitely worth checking out.

0

WordPress Tip: Specify a Primary Category using Advanced Custom Fields

What WordPress custom fields should have been

I found Advanced Custom Fields (also known as ACF) about 6 months ago while working on a project for a client. They didn’t want to have to mess around with editing the Custom Fields that come native with WordPress, it just wouldn’t have worked as smoothly.

The client needed to require one image, one PDF, one year selection, and one category. The category consisted of two options, “Weekly” or “Daily”. If you’re wondering, it was a newspaper client who wanted to categorize their posts as being either a “weekly issue” or a “daily issue”. Makes sense for a newspaper!

Getting the native WordPress custom fields to play along well with files can be tricky, and probably not worth the effort, especially with a plugin like Advanced Custom Fields around.

So, enter the hero of this post, Advanced Custom Fields. I was able to set everything up with Advanced Custom Fields within about 20 minutes, and that even counts the time that I took to make various theme templates pull data from Advanced Custom Fields. The actual setup of Advanced Custom Fields took about 2 minutes.

I’ve since started using Advanced Custom Fields here at longren.io, too. Independent Publisher, the WordPress theme I’ve been using, likes to show one main category when you’re viewing a single post, even if it’s not the most relevant category. So instead of a post about WordPress having the Git category shown at the top, I can now specify which category I want to be shown. So, for a post like this, I would obviously choose WordPress as my primary category.

I’ve already added the necessary parts to my Independent Publisher child theme, and have sent a pull request to Raam Dev to get his thoughts. It’s a very easy thing to support in a theme, however, it requires that everyone using that theme use the same field name in ACF.

I named my field primary_category, since that’s exactly what it is.

Example field setup with Advanced Custom Fields
Example field setup with Advanced Custom Fields

After you’ve added your “Primary Category” custom field, you can then use the value of that field throughout your theme. I’ll have a short post later this week on exactly how you can display the primary category value in your theme. Or, if you want to know right now, you can see this pull request at GitHub.

As you can tell, Advanced Custom Fields is a beast of a plugin. I also love that Advanced Custom Fields is totally free, which is kind of amazing to me. I’ve come across many paid plugins that are nowhere near as polished and user friendly as Advanced Custom Fields.

Advanced Custom Fields doesn’t skimp on the documentation, either. Their documentation site is extremely helpful, I never once ventured away from it while getting familiar with Advanced Custom Fields for the first time.

You can download Advanced Custom Fields from the WordPress Plugin Directory, so you can also install it in just a few clicks, right from your WordPress Dashboard! Advanced Custom Fields is developed primarily by Elliot Condon, and can also be found on GitHub.

The great thing about this is that it can be applied to any theme, not just Independent Publisher. So, if you’re not using Independent Publisher, just setup Advanced Custom Fields as I described and make the necessary changes for your theme.

A follow-up post will have more details on using data from Advanced Custom Fields, no matter what theme you’re using.

0

Add Open Graph Protocol Markup to Any WordPress Theme

Rich objects in a social graphs

When you share a link on Facebook, an image from the link is shown, usually. Sometimes, no image is displayed, as if Facebook couldn’t find a suitable image at the URL.

Why?

Adding Open Graph protocol tags to your site will ensure that Facebook knows which image to use when someone shares a page on your website. Open Graph markup is similar to schema.org markup. Both allow you to define values for certain aspects of your website, as seen by other sites like Facebook, Twitter, and many other social media sites.

How?

There’s a couple of ways we can do this. You can use a plugin, like Open Graph Protocol Framework, or you can add Open Graph markup to your WordPress theme manually.

We’ll be covering how to add Open Graph markup to your theme manually. Especially useful for theme developers who want to build Open Graph protocol support into their themes.

The markup we’ll be adding can be seen in this GitHub gist:

Most of that should be pretty self-explanatory.

The og:type property is the only tag that needs explanation, as there’s only certain values that are valid. Most of the time, you’ll probably be setting the og:type property to article or website. A list of other Open Graph protocol object types can be found at the Open Graph protocol site.

The Code

Every Open Graph property will be set on-the-fly, depending on which post or page is being viewed or shared. To add the necessary markup, we need to use the add_action WordPress function inside your theme’s functions.php file. Here’s how I’ve been handing it:

Comments are open below, feel free to ask questions or tell me how wrong I am on one point or another. 🙂

1+