The HowTo shortcode for WordPress can be used to display a How To section within content, with a proper Schema markup JSON-LD which can help improve visibility in both search engines and AI overviews/search results (in ChatGPT, Perplexity etc.). AI powered search operates rather as an Answer engine, therefore by using the HowTo markup can provide better understanding to search engines with structured data. Please note that inclusion is such results is not guaranteed, but the Schema markup can provide an advantage. The HowTo shortcodes from our plugin can provide both Search Engine Optimization (SEO) and Answer Engine Optimization (AEO). The HowTo is displayed similarly to the Spoilers Accordion, in an interactive manner, offering a smooth visual transition when going through each How To step and instructions. Check below for example implementations and shortcode documentation:

HowTo Examples

Step 1: Install Plugin

To implement the HowTo section in your website you need to install the X3M Shortcodes plugin in your WordPress website. Activate the plugin once installed.

Step 2: Include Shortcode code in Page content

Once the plugin was installed, you can copy the below shortcode syntax and paste it in the post content where you want it included. Edit the shortcode content and steps with your own info and save.

You may click on any of the spoilers above to open them, and when this is done, the other opened spoiler will close. This is provides the accordion effect, with proper Schema JSON-LD markup.

HowTo Shortcodes

HowTo Shortcode

[x3m-howto name="How to implement HowTo shortcode?" time="5m" estimated-cost="39" currency="USD" description="Learn to implement the HowTo shortcode section with schema markup." image="https://x3mmedia.com/wp-content/uploads/x3m-logo.png"]
[x3m-howto-supplies supply1="X3M Shortcodes plugin" supply2="Wordpress website"]
[x3m-howto-tools tool1="web browser"]
[x3m-spoiler title="Step 1: Install Plugin" open="yes" background="#f5f5f5" textcolor="black" radius="10px"]
To implement the HowTo section in your website you need to install the X3M Shortcodes plugin in your Wordpress website. Activate the plugin once installed.
[x3m-howto-image url="https://x3mmedia.com/wp-content/uploads/x3m-shortcodes-installation.png" width="50%" align="right"]
[/x3m-spoiler]
[x3m-spoiler title="Step 2: Include Shortcode code in Page content" open="no" background="#f5f5f5" textcolor="black" radius="10px"]
Once the plugin was installed, you can copy the below shortcode syntax and paste it in the post content where you want it included. Edit the shortcode content and steps with your own info and save.
[/x3m-spoiler]
[/x3m-howto]

The shortcode can be used to display a list of instructions, step by step, to get something done/built. When one of the spoilers is opened, any other will in turn close, creating the accordion effect. The HowTo shortcode can be used with ease for a How To section with proper Schema markup, listing visible step-by-step instructions to follow in each spoiler. Above example displays a light-grey 2 step instructions HowTo section.

HowTo Documentation

Here are the shortcode option settings available for HowTo:

Shortcode Settings	Details
title=”How to Title”	This is used to set the title of the HowTo section.
time=”5m”	This is used to set the time for following the instructions. Can be values in minutes like “5m” or hours and minutes like “1h15m”.
estiamted-cost=”39″	This is used to set the cost of supplies and tools required for the implementation.
currency=”USD”	This is used to set the currency of the cost, as a three letter currency – ex. USD, EUR, GBP etc.
description=”HowTo description”	This is used to set a short description of the HowTo section.
image=”url”	This is used to set the image source of the end product for example, presented in the HowTo section.
x3n-howto-supplies	This shortcode is used to set a range of supplies required for following the instructions.
supply1=”name of supply 1″ optional	This is used to set the name of supply 1. If multiple supplies required, add extra following the format supply2=””, supply3=”” and so on.
x3n-howto-tools optional	This shortcode is used to set a range of tools required for following the instructions.
tool1=”name of tool 1″	This is used to set the name of tool 1. If multiple tools required, add extra following the format tool2=””, tool3=”” and so on.
title=”Step Title”	This is used to set title on each individual spoiler / step in the instructions.
open=”no”	This is used to set spoiler to be open or not on page load. Available options: – “no” for having the spoiler closed – “yes” for having the spoiler open
background=”#f5f5f5″	This is used to set the background color of the spoiler container. Color names or HEX color codes can be used to set the desired color.
textcolor=”black”	This is used to set the text color for the spoiler title. Color names or HEX color codes can be used to set the desired color.
radius=”10″	This is used to set corners’ radius of the spoiler container, making them rounder or sharper.
instructions	The instructions should be provided inside the [ x3m-spoiler] answer here [ /x3m-spoiler] shortcode.
x3n-howto-image optional	This shortcode is used to set the image of how product/service should look like at the end of the instructions in each step. This shortcode should be set inside the spoiler shortcode, as part of the instructions content
x3n-howto-video optional	This shortcode is used to set the video following the instructions in each step. This shortcode should be set inside the spoiler shortcode, as part of the instructions content
url=”image/video link”	This is used to set the url of the image/video.
align=”right”	This is used to set the position of the image/video in content, with possible options as “right”, “left”, “center”.
width=”25%”	This is used to set the width of the image/video in the instructions area. It can be exact value in pixels (ex: “150px”) or it can be flexible value in percentage (ex: “25%”).