The Ultimate Guide to WordPress Shortcodes

Thursday , 22, April 2021 Leave a comment

WordPress Shortcodes is a security precaution, php code running in WordPress content not allow . so Shortcodes alternative way to insert in content .

WordPress shortcodes are small tags that are used as shortcuts for executing specific features in posts and pages. You can recognize shortcodes by square brackets[]. Shortcodes introduced in WordPress 2.5v to help people to execute a long function the easy way

Basic Shortcodes

function function_shortcode(){
    return 'hello world';
}
add_shortcode( 'shortcode', 'function_shortcode' );

add_shortcode hook is a major function for create Shortcodes.

in this hook two parameters:

  1. shortcode_name Shortcode tag to be used in post or page content field . example: [shortcode]
  1. shortcode callback function run when the shortcode is found. example: function_shortcode()

Callback function Parameters

Second parameter of add_shortcode() callback function ,each shortcode callback is accepted three parameters by default, including an array of attributes $atts, the shortcode content or null if not set $content, and finally the shortcode tag itself $shortcode_tag, in that order.

function function_shortcode($atts,$content){
    $atts = shortcode_atts(array(
        'font'     => '50px',
        'position' => 'right',
    ),$atts);
    return "<p font-size='".$atts['font']."'  align='".$atts['position']."' >".$content."</p>";
}

The 2 Types of Shortcodes

Self-closing Shortcodes: 

These don’t need a closing tag. Example: The shortcode name doesn’t need a closing tag. We add everything it needs with different attributes. [shortcode name]

Enclosing Shortcodes:

 you need to add a closing tag. Enclosing shortcodes generate the content between the opening andclosing tags.

Example: [shortcode name]content [/shortcode name]

The Default WordPress Shortcodes

WordPress 6 default shortcodes:

  • audio: The Audio feature allows on your website. It includes simple playback controls like Play & Pause.
  • captionThe feature allows Wrap captions around your content with it. It’s mostly used to add simple image captions, but you can use it for any HTML element.
  • embed : allows you to wrap embedded itemse. This shortcode lets you set different attributes to your embeds.
  • gallery : allows you to show image galleries. You can use attributes to define which images are used and customize how the gallery looks.
  • playlist : allows you to display collection of audio or video files. You can give it a cool ‘dark’ mode with its style attribute.
  • video: allows you to embed and play audio files. This shortcode supports embedding videos with these formats: mp4, webm, m4v, webm, ogv, wmv, flv.

For more exmple , you can visit to the linked Codex docs.

WordPress Shortcodes Use

[shortcode font="90px" position="center" ]hello  world[/shortcode]

First of all , open the page or post editor where you want to insert the shortcode.
If you’re using the Gutenberg editor,

you can add the shortcode tag.and inset the shortcode

you can add the Classic Editor (or the plugin)

or in other page builder plugin

Shortcodes can also be insertable in sidebar widgets

Shortcodes Using in Header and Footer

<?php echo do_shortcode("[shortcode name]"); ?>

WordPress shortcodes are generally insert in pages, posts, and widgets.
But you can insert shortcodes anywhere in your website easily to use above code

do_shortcode is output function of add_shortcode

Fix the Error Establishing a Database Connection in WordPress How To Use wp_enqueue_script () hook to Add js and CSS files after_setup_theme WordPress hook best wordpress security plugins 2021

Leave a Reply

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