What are shortcodes

In this article I want to show how to correctly create more complex shortcodes and solve the most common problems when creating them:

1. Connecting third-party scripts and launching only if there is a shortcode on the page.
2. Multi-level shortcode.
   • Composite shortcode.
   • Nesting of shortcodes.

Soil preparation

/
/Includes/
shortcodes.php
…
functions.php

Almost every guide suggests creating shortcodes directly in the functions.php file. I will say right away: I am an opponent of this approach. Instead, I strongly recommend placing all shortcodes in separate file(includes/shortcodes.php) and include it in functions.php in one line. This will significantly relieve functions.php and make the code more readable.

Note : WordPress, of course, supports including files via require, but it strongly discourages this. Instead, it is suggested to use get_template_part().

Connecting scripts

An example of such an implementation:

Function foobar_func($atts) ( return "foo and bar"; ) add_shortcode("foobar", "foobar_func"); function foo_script () ( wp_register_script("foo-js", get_template_directory_uri() . "/includes/js/foo.js"); wp_enqueue_script("foo-js"); ) add_action("wp_enqueue_scripts", "foo_script");

This is a completely working option, but the script will load on every page, even if it is not needed there (i.e. there is no shortcode).

To avoid such situations, I suggest using the following approach:

1. Define the shortcode as a separate class.
2. Add a flag that will determine whether this shortcode is on the page.
3. Load the script only by the shortcode presence flag.

That's all...

An example of such an implementation:

Class foobar_shortcode ( static $add_script; static function init () ( add_shortcode("foobar", array(__CLASS__, "foobar_func")); add_action("init", array(__CLASS__, "register_script")); add_action("wp_footer" , array(__CLASS__, "print_script"); ) static function foobar_func($atts) ( self::$add_script = true; return "foo and bar"; ) static function register_script() ( wp_register_script("foo-js", get_template_directory_uri() . "/includes/js/foo.js" ) static function print_script () ( if (!self::$add_script) return; wp_print_scripts("foo-js"); ) ) foobar_shortcode::init( );

Unlike the previous implementation, this shortcode is initialized, but all scripts are loaded only if the shortcode is present on the page.

Nested shortcodes

• Creating a multi-level shortcode (consisting of several).
• Using a shortcode inside the same shortcode.

Now - in more detail.

Creating a Multi-Level Shortcode
The problem is that such a shortcode consists of several smaller shortcodes and you need to prevent them from being used as separate shortcodes (except when necessary).

Let's take for example a shortcode that creates a pricing table. To do this, you need to prepare three separate shortcodes:

-


- …
-
-
- Option 1
- Option 2
- …
-
…

This example uses three shortcodes: .

add_shortcode("price", "price_code");
add_shortcode("plan", "plan_code");
add_shortcode("option", "option_code");

To prevent internal shortcodes from being used as separate ones, the following scheme is proposed:

Price -> displaying code on the page
Plan -> receiving data
Option -> get data

That is, the code is output to the page only in the external shortcode, while the internal ones simply return the received data. An example of such an implementation is given below.
Description of the external shortcode function:

Function price_code ($atts, $content) ( // initializing global variables for price plans $GLOBALS["plan-count"] = 0; $GLOBALS["plans"] = array(); // reading content and executing internal shortcodes do_shortcode($content); // preparing HTML code $output = "

Description of internal shortcode functions:

Function plan_code ($atts, $content) ( // get the shortcode parameters extract(shortcode_atts(array("title" => "", // Plan title name "price" => "0", // Plan price), $ atts)); // Prepare HTML: plan title $plan_title = "

With this approach, the shortcode will only work when assembled, i.e. if used correctly, in other cases nothing will be displayed on the screen (accordingly, nothing will break).

Of course, you can still optimize and improve this shortcode, but still, I think I managed to demonstrate the main idea.

Duplicate shortcodes

Content
Content

Unfortunately, such nesting is already too much for WordPress. The layout will fall apart already on the second content. This happens because when you open a shortcode, WordPress immediately looks for the second (closing) part of this shortcode, i.e. in this example, the first column will be closed on the first nested shortcode.

To solve this problem, unfortunately, there are no other options than simply adding new shortcodes. But there is no point in rewriting functions; you can simply initialize the shortcode for existing functions:

Add_shortcode("column_half", "column_half_code"); add_shortcode("column_half_inner", "column_half_code"); function column_half_code ($atts, $content) ( return "

Conclusion

WordPress is powerful publishing system, equally convenient for novice bloggers and for creating any kind of forums, social networks, stores, etc.

Usually, an appropriate template is selected for each application, but sometimes its capabilities are not enough.

This is where shortcodes come to the rescue, with which you can add your own “zest” to WordPress.

A shortcode is a short code that is inserted directly into the text of a page, header, widget - that is, into the content and expands the capabilities of WordPress.

With its help, you can beautifully format the text, divide it into columns, insert content, a button, an audio player, an order form and many other features into the page that distinguish your WordPress from all others.

If there is no handler for a specific shortcode, then calling it on the page will look like regular text.

This article intentionally uses the names of non-existent shortcodes so that you can see what calling a shortcode looks like, and not the result of its operation.

Types of shortcodes by structure

They come without parameters, with parameters and with content.

Shortcodes without parameters

Sometimes you just need to call a shortcode to perform a strictly defined function. There is no need to pass any parameters to it.

For example, this code outputs horizontal line. Its appearance is determined in the style sheet.

This call displays the current year. Convenient for not having to edit texts every year.

Shortcodes with parameters

Sometimes you need to pass parameters to get different results.

For example, this is how a beautiful button is inserted, the style of which should be specified in the style sheet.

It contains two parameters: title- this is the inscription on the button, for example, Order, Subscribe, etc.

url— this is the click-through address.

This is how you can insert a price in rubles, which is automatically converted from the price in dollars at the current Central Bank exchange rate.

Here's the parameter s is the price in dollars.

Shortcodes with content

They consist of two parts, between which there can be any content of a post, widget, etc.

This is how you can highlight a fragment of text or part of a post by “placing” a colored background under it:

There is some text that will be displayed on a colored background.

Parameter color sets the background color in the usual hexadecimal code.

And this is how you can display text in two columns of the same width:

A shortcode in PHP code consists of a function that processes it, and a command that assigns the corresponding function to the code.

Here's a typical shortcode for a button:

function ha_but($atts,$content=NULL) (
extract(shortcode_atts(array(
‘title’ => ‘Go’,
'url' => false
), $atts));

$output=" '.$title."’;

return $output;
}
add_shortcode('but','ha_but');

In this example the function is named ha_but. It is passed two parameters - title And url. And for title default value assigned Go. If, when calling the code, the parameter title skip, then the default button will have the inscription Go.

Inside a function, other functions can be called, files can be connected, etc. The functionality of the shortcode is limited only by your imagination and programming skills.

The function then returns the result of its work using return.

Function add_shortcode assigns to shortcode by name but handler function by name ha_but.

And here are the styles for a yellow button that spans the entire width of the page:

Btn (
display: inline-block;
color: #000000;
font: 300 16px “Roboto”, sans-serif;
text-transform: uppercase;
background: #fde42b;
background: -webkit-gradient(linear, left top, left bottom, from(#fcea38), to(#ffcf00));
background: -webkit-linear-gradient(top, #fcea38 0%, #ffcf00 100%);
background: linear-gradient(to bottom, #fcea38 0%, #ffcf00 100%);
border-bottom: 3px solid #b27d00;
padding: 14px 15px 11px;
width: 90%;
border-radius: 2px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 #ffec89;

}
.btn:hover (
opacity: 1;
background: -webkit-gradient(linear, left bottom, left top, from(#ffdd02), to(#fffe6d));
background: -webkit-linear-gradient(bottom, #ffdd02 0%, #fffe6d 100%);
background: linear-gradient(to top, #ffdd02 0%, #fffe6d 100%);
border-color: #bd8500;

How to insert a shortcode into a WordPress template

You can insert a function - a shortcode handler directly into the file responsible for outputting single posts - usually this single.php. Then this shortcode will only work in posts.

It's better to paste it into a file functions.php, which is available in any WordPress theme. Then the shortcode will work on all pages, widgets, etc.

However, if you update or change the template, the shortcodes will no longer be processed. If you plan to change the blog design in the future, then it is better to place the code of all shortcodes in one file, for example, shortcodes.php, and place it in a folder my at the root of the site.

In this case, you need to organize the call by inserting into the file functions.php team require_once('my/shortcodes.php');

After changing or updating your WordPress theme, do not forget to re-enter this command.

How to insert a shortcode into a WordPress page

For the shortcode to work, you need to insert its call into the desired place in the content, consisting of square brackets, the shortcode name and parameters. At the same time, you can design it in any style, just like regular post text.

I hope there are enough examples so that you can create your own WordPress shortcode that solves the problems you need.

Watch a video tutorial on creating more complex shortcodes here:

I recently discovered that many people do not know how to insert shortcodes into WordPress or display a script on a site with a different engine. And those who know how to make a website theme in the code of a website template PHP output shortcode, are often allowed serious mistakes. And in the end, then they blame the fact that either they have a plugin or shortcode doesn't work, or something is generally wrong with the site template. But, in fact, everything is very simple and mistakes happen mainly due to inattention or ignorance of syntax and punctuation.

How file? Quick response

Especially for those who already know everything, but are just looking for a quick answer, or for another engine, then please use this code:

php echo do shortcode wordpress

However, do not forget about punctuation! Quotes in your shortcode And Vphp code must be different.

That is, if in your WordPress site template, you use the same shortcode, but with two quotes inside ([“..."]), and in your php code you also use double quotes(“[…]”), then you need to change some of them to single ones. It is precisely because of such small reasons that often Shortcodes don't work in wordpress. More on this below.

What is a shortcode(shortcode), and what is it for?

Shortcode is from English "short code" It is used mainly when creating plugins or modules designed to work with content management systems (CMS), for example, WordPress, Joomla, etc. Simply put, this short code is a kind of shortcut that, when added to the site, pulls up the all the big code from the plugin.

The shortcode usually looks like this: either this or even just one word

In any case, this is not so important, since the main thing is to know the principle of adding a shortcode to the site.

How does this work?

It's very simple. Let's say you have a website on WordPress engine, you have some simple website template (design), but in order to decorate it, you decided to put a slider on it, in which your photos will scroll through themselves. It's very easy to do. To do this, you need to download the slider plugin from the shared library WordPress plugins, upload the necessary photos there, and the plugin will give you a small slider code like:

but just this short code (Shortcode) in one line:

By inserting something like this

shortcode to a site page on Wordpress or in a widget, your plugin will start working and will generate the top large slider code, as a result of which you will get your slider on the site pages.

A how to insert shortcode slider straight into a wordpress template in php code?

If you need it directly into the code, for this purpose the developers of this plugin wrote next to (Fig. above) a shortcode function in PHP:

This shortcode “function” can be inserted into a php file in the location you need on the site. For example, in header.php, somewhere after the body or maybe in sidebar.php, or best of all in the page template file (it could be called something like content-page.php), as a result, you will get that the same slider, but already built into the design of the site itself.

However, you need to be very careful when shortcode output in a wordpress template in php files. For this you need at least basic php knowledge. Because if you insert it “in the wrong place” in a PHP file, an error will be displayed on the site.

Usually any php code starts with. After finishing one PHP code and before starting another, you can insert your PHP function. Unfortunately, plugin developers do not always make a ready-made (as in this example) PHP function for displaying a shortcode. In this case, you can create it yourself easily and simply, more on that below.

How display shortcode in php V wordpress, if there is no ready-made PHP function in the plugin?

There are plugins in which their developers decided not to specify a ready-made PHP function for inserting a shortcode into the site template files (as was the case in the previous example), but only indicate a shortcode. Like this, for example, in this slider plugin:

What should we do in this case, since we need to insert the shortcode into the WordPress template and directly into the php file on the site? In this case, you just need to wrap the shortcode yourself with the PHP output function, which was shown at the very beginning of the article. As a result, taking into account our shortcode, we will get this type of PHP function:

shortcode wordpress how to insert

It can now be safely integrated into any website template. However, don’t rush yet and read below about common mistakes that even experienced webmasters make when adding shortcodes.

Major mistakes! Or why the wordpress shortcode doesn't work?

At the beginning of the article I already described how to correctly add shortcode V wordpress, and how paste the shortcode intoPHP. Let's summarize everything now.

In fact, there are two ways to add, namely:

wordpress shortcode into template

As you can see, they differ from each other only in quotation marks - single and double. PHP language syntax is very careful about such quotes. And if inside the second function, which is with two quotes, you insert a shortcode also with two quotes, for example, like we had: then you will receive an error on the site.

In order for there to be no errors and your shortcode to work normally, you need to have different quotes. For example, like this:

You can add any of the first two shortcodes to your WordPress template directly in the editor. To do this, find a suitable php file in the site editor that controls the “place” on the site where you want to display your slider. You can find this place in the developer tools directly in your browser by pressing the key combination Ctrl+Shift+I.

Adds a new shortcode and a hook for it.

For each shortcode, only one handler function can be created. This means that if another plugin uses the same shortcode, then your function will be replaced by another or vice versa (depending on the order in which the functions are connected).

If the shortcode has attributes, they are converted to lower case, before being passed to the function. Values ​​are not affected.

The result that the function (shortcode handler) returns should always be returned and not displayed.

Shortcodes are a construction of the form: or or text in the text, which will be replaced by other text created by the hook function responsible for the shortcode.

Video about shortcodes in WordPress:

There are no hooks.

Returns

Returns nothing.

Usage

The name of the shortcode that will be used in the text. For example: "gallery".

Spaces and non-standard characters like: & / cannot be used in the name< > = .
Default: no

$func (string) (required)

The name of the function that should work if a shortcode is found.

The function receives 3 parameters, each of them may or may not be passed:

$atts (array)
An associative array of attributes specified in the shortcode.
Default: "" (empty string - no attributes)

$content (line)
Shortcode text when the closing shortcode construct is used: shortcode text
Default: ""

• $tag (line)
  Shortcode tag. May be useful for transfer to additional functions. Ex: if the shortcode is , then the tag will be foo .
  Default: current tag

Default: no

Examples

#1. Example of shortcode registration:

#1.2. Setting a whitelist of shortcode attributes

In order for the shortcode to have only the parameters we specified and for these parameters to have default values, you need to use the shortcode_atts() function:

Add_shortcode("bartag", "bartag_func"); function bartag_func($atts)( // whitelist parameters and default values ​​$atts = shortcode_atts(array("foo" => "no foo", "baz" => "default baz"), $atts); return "foo = ($atts["foo"])"; )

#2. Registering a shortcode with content

An example of creating such a shortcode: here is the text:

Add_shortcode("baztag", "baztag_func"); function baztag_func($atts, $content) ( return "content = $content"; ) // result: // the shortcode construct will be replaced with "content = text here"

#3. Registering a shortcode for classes

If your plugin is written as a class:

Add_shortcode("baztag", [ "MyPlugin", "baztag_func" ]); class MyPlugin ( static function baztag_func($atts, $content) ( return "content = $content"; ) )

#4 Inserting iframe via shortcode

This example shows how to create a shortcode so that you can then insert an iframe through it.

Function Generate_iframe($atts) ( $atts = shortcode_atts(array("href" => "http://example.com", "height" => "550px", "width" => "600px",), $ atts); return " "; ) add_shortcode("iframe", "Generate_iframe"); // usage:

#5 Displaying a post by ID via shortcode

Let's get the post by ID using the shortcode in the theme's functions.php file.

Add_shortcode("testimonials", "testimonials_shortcode_handler"); function testimonials_shortcode_handler($atts)( global $post; $rg = (object) shortcode_atts([ "id" => null ], $atts); if(! $post = get_post($rg->id)) return "" ; $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID));

logo). "" alt="icon" /> !}

". get_the_content() ."

author_image) ."" alt="image"> !}

". esc_html($post->author_name) ." ". esc_html($post->author_designation) ."

Notes

• Global. Array. $shortcode_tags

List of changes

Code add shortcode: wp-includes/shortcodes.php WP 5.2.3

WordPress shortcodes are a powerful but still little-known feature of the content management system. To show ads on your blog, simply type the word adsense. Using the post_count command you can instantly find out the number of posts. There are many similar examples. Feature sets can make a blogger's job much easier.

Example of a simple shortcode

A novice user needs to learn how to create and use special commands, as well as be able to use ready-made options. To do this, you need to understand what WordPress shortcodes consist of. As an example, you can take the line Some sentence. In this post, the user calls the option associated with the shortcode. The line consists of two parameters.

The first part of the entry is an array consisting of the id and color attributes. Instead of these values, you can specify any parameters with the desired names in the opening tag. The second part of the entry is text. In order to process it, you need to translate the entire record into PHP. The user will receive a line with the following content: my_shortcode(array("id"=>"1", "color"="white"), "Some sentence").

If you wish, you can use the post without the closing tag above. The line will look like this: . In this case, only the attributes listed in the opening tag are passed to the function. The specified recording option is used when calling an option that does not require receiving other information for processing. In order to add a gallery, just specify the ID in the attributes.

How to insert a shortcode in WordPress

The feature sets are very easy to use. The blogger needs to create a new post or open an existing post for editing. Then you need to switch the text editor to HTML mode and specify the code in . You can also use attributes. The entry will look like this: .

You can embed any content into shortcodes: text. WordPress 2.5 introduced a set of features called the Shortcode API. After saving the post, the content of the post is processed. In parallel, the Shortcode API converts shortcodes to perform their assigned functions.

Purpose

With this tool, you can create original WordPress themes in the editor without HTML or special knowledge. Accordion-style buttons and sliders are added if necessary. The user can divide the text into columns, connect a gallery, highlight words in any color, insert beautiful lists and tables with prices. Shortcodes allow you to make your blog more functional and your content more expressive and effective. This method of adding interactive elements is used to solve many problems and is very useful in work.

Creating shortcodes

If the user knows how to type a simple PHP function, then he will easily achieve his goal. To create a shortcode, you need to find and open one of the WordPress functions.php files. Then you need to insert the line function hello() (return "Hello, world!";). This action will create a function responsible for displaying the specified text. To transform it into a shortcode, you need to insert the command “add_shortcode()” after the “hello()” option.

The line will look like this: add_shortcode("hw", "hello");. Once the shortcode is created, the user can use it in notes and pages. To do this, you need to switch to HTML mode and enter the line . This shortcode is a clear example of how easy it is to create such feature sets.

Using Plugins

To make work easier, a blogger can download an extension. Using add-ons is the easiest way to get ready-made feature sets without unnecessary settings.

WP Shortcode by MyThemeShop

Most recently, this free extension was distributed as a premium solution. Currently, the WordPress shortcode plugin contains 24 basic elements: buttons, maps, dividers, pricing tables, and much more. To get started, a blogger needs to install the add-on and open a text editor. To add a shortcode, you need to click on the “+” icon. The number of settings in the pop-up window that appears depends on the user's selection.

Shortcodes Ultimate

This is one of the most popular extensions. The add-on is found in every collection of plugins for customizing WordPress. The extension is available to every user. If necessary, paid additions to the plugin are downloaded. The blogger can work with 50 page design elements, a shortcode generator and a CSS style editor.

The plugin has support for several languages. The advantages of the software product also include integration with any templates, modern design, original design of buttons, the presence of a custom widget and sliders for the gallery.

Fruitful Shortcodes

This extension is visually quite simple. Software product updates are performed infrequently. However, the addon contains all the standard WordPress shortcodes.

The blogger can work with horizontal and vertical tabs, columns, dividers, etc. Added elements are instantly displayed in the graphic editor. The user can turn them off for posts or web pages using the Settings section.

Shortcoder

This plugin is also often found in different collections. The extension is updated very rarely. The user can create sets of functions using HTML and JavaScript codes. One of the simplest examples is placing an advertising block in the text. To do this, you need to create a set of adsenseAd functions.

The Shortcoder plugin is a very flexible tool. You won't be able to find basic shortcodes here. The user can create the necessary elements independently.

Easy Bootstrap Shortcode

The plugin allows you to add new design styles for the site. The developers claim that this is the simplest and most accessible extension in WordPress. The text editor panel contains buttons that allow you to copy and paste the shortcode. The plugin has support for fonts with icons. The user can add styles and other website design elements.

The extension was created to work with a web resource grid, so it has many settings for columns. A blogger can create several blocks, as well as specify sizes and indentations. The plugin supports the User can also work with basic shortcodes: tabs, lists, buttons, labels, sliders, etc.

WP Canvas - Shortcodes

The add-on contains a selection of the most popular feature sets to expand the functionality of the site. The blogger has access to not only ordinary elements, but also frames, images with inscriptions, blocks for adding reviews, countdown widgets, progress indicators with effects, etc.

The plugin supports custom styles, HTML code, fonts with icons. If desired, the blogger can enable display of a selection of site posts on the page. The developers provided users only with a brief description of the software product. At the same time, the plugin copes well with all the functions assigned to it.

Arconix Shortcodes

The extension contains 6 types of WordPress shortcodes. The user can work with blocks, tabs, buttons, sliders, etc. The plugin supports fonts with icons. If desired, the blogger can change the login form, turn on the backlight, and divide the page into columns.

Simple Shortcodes

This is one of the simplest extensions for WordPress. After installing the software product, in the top panel of the text editor you can see a button for selecting various elements. All the standard shortcodes are here: tabs, dropdown lists, icons, notifications, etc.

After a blogger learns how to create and use feature sets, he can focus on ready-made solutions for the site.

WordPress Shortcodes: Setting Up

How to display a link to publish a post on the Twitter social network? To do this, you need to open the functions.php file and paste the following line next to the other WordPress shortcodes in PHP: function twitt())(return "

Then you need to switch to HTML mode. Next you should enter the word. The link will be added to where the user left the shortcode.

Set of functions "subscribe to RSS"

One of the most effective ways to increase the number of subscribers is to display a well-formatted message. The blogger does not need to change the entire WordPress theme code. The user must decide for himself where the set of functions will be displayed. The code looks like this: function subscribeRss() (return "

Adding Google AdSense

Many bloggers use the contextual advertising service. Pasting Google's tool code into your theme file is easy. But marketers know that people are more likely to click on links embedded in content. To insert an ad block anywhere on the page, you need to create a shortcode and call it with the command.

Adding an RSS Feed

To accomplish this task, you need to convert the function into a shortcode. Then you need to enable HTML mode and insert the line into the editor field. The first attribute indicates the RSS feed URL, and the second attribute indicates the number of notes to display.

Adding posts from the database

To call up a list of articles directly in the editor, you need to create a shortcode, switch to HTML mode and insert the line . This command will list five posts from the category with ID 2. It is worth paying attention to the fact that WordPress plugins can display related posts. However, using a shortcode, a blogger can easily get a list of any number of posts from a particular category.

Calling up the picture of the last article

To make working with images easier, you can use function sets. To call up the image of the last post, you need to create a shortcode. Then you should enable HTML mode and insert the line into the edit field.

Adding feature sets to widgets

It is worth paying attention to the fact that not a single WordPress shortcode works in the side columns of the site. The platform limitation can be bypassed. To do this, you need to open the theme file for WordPress functions.php and insert the line add_filter('widget_text', 'do_shortcode');. The shortcode will be added to the widget.