Aleš Sýkora / December 6, 2023 / 0 comments

Basic SEO plugin with Toolset Types & Types Fields API

Post summary: Make your own SEO plugin with Toolset Types. No need to install any additional SEO plugins. Read our tutorial and make your own today!

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:


<head>

<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="Toolset.wiki" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Toolset.wiki" />
<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. Sitemap is now automatically generated by WordPress itself.


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. If you need it please let me know in the comments.






Fuel my passion for writing with a beer🍺


Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻






0 comments

Share Your Thoughts