Basic SEO plugin with Toolset Types & Types Fields API

Author: Aleš Sýkora, 29. 9. 2018

I asked myself if I really need SEO plugin’s like Yoast SEO. Why? Because every big plugin really slow down my wordpress webpage. So I decided to use Toolset for my SEO. How? Let’s see.

Which SEO fields I need?

For small page I need just three fields:

  1. Title - main SEO field
  2. META description - does not really count on SEO but can increase Click through rate
  3. Sharing image for social sites (facebook etc.)

And now it’s time to use the Toolset Types to make own SEO Yoast-like box.

Create custom field group with SEO fields

Navigate to the Toolset > Custom fields > Add new > Post Fields and create:

  1. Single line field for Title
  2. Single line field for Description
  3. Image field for Sharing image

custom field group for SEO

You can also select where this box should appear at fields group settings (I am using it for post type Page and Article).

Filling the SEO fields

Look what happen now when I open my article. New box called My SEO Module appears. It looks like normal SEO plugin isn’t it?

custom seo with toolset

That’s fine. Let’s fill this fields and render them in header.

Render SEO fields in header

Rendering the fileds with toolset API is maybe the hardest part of this tutorial. We need to render them in theme header.

  1. Copy header.php from your theme to your child theme.
  2. Open the header.php and prepare fields for rendering with some easy php:
    <?=types_render_field( 'field-name') ?>

I also want to fill some microdata for social sites. For facebook (OpenGraph data) and for twitter. So I added some more meta properties. Here is the header code example. Put it after the opening:

<title><?=types_render_field( 'title') ?> </title>
<meta name="description" content="<?=types_render_field( 'meta-description') ?>"/>
<meta property="og:image" content="<?=types_render_field( "shared-image", array( "url" => "true" )) ?>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />
<meta property="og:locale" content="cs_CZ" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?=types_render_field( 'title') ?>"/>
<meta property="og:description" content="<?=types_render_field( 'meta-description') ?>"/>
<meta property="og:site_name" content="" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="" />
<meta name="twitter:title" content="<?=types_render_field( 'title') ?>"/>
<meta name="twitter:description" content="<?=types_render_field( 'meta-description') ?>"/>
<meta name="twitter:image" content="<?php echo types_render_field( "shared-image", array( "url" => "true" )); ?>" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="1200" />

Save your header and try if it works. You can use browser plugin like META SEO Inspector. Final result should look like this:

meta seo toolset

And that’s it. Only one more thing I need is sitemap. And I recommend to generate sitemap automatically with lightweight plugin Google XML Sitemaps plugin.

This tutorial works only on posts and pages. If you want to use it on taxonomies and archives, you need secondary Term custom fields group and also you need to write a simple plugin wich decide if page is archive, tax or post. I made it for my project. If you need it please contact me via article suggestion form on homepage :).