Aleš Sýkora wrote

Basic SEO plugin with Toolset Types & Types Fields API

29. 9. 2018 in

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 :).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Use global colours from Oxygen Builder in CSS
You have defined your Global colors in Oxygen Builder and now you need use them in CSS styles? No Problem! You can use your global colors within CSS styles. Just open Settings > Global Styles > Colors, click on your colour group and you will see your colors with assigned ID’s to each of them. […]
Read More
Aleš Sýkora wrote
Checkbox with link for Accepting terms & conditions in toolset form
30. 8. 2019 in
The easy way how to add the checkbox with link to your Terms & Conditions or GDPR page.
Read More
Aleš Sýkora wrote
Display all WooCommerce categories and their products inside
11. 2. 2021 in
If you need to display all your WooCommerce categories in the list and their products inside, you can use mine code. For example you need to create one page layout for food felivery. Use my second tutorial, if you like to display all subcategories and its products on parent category archive. Page = Food Delivery […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram