WordPress TutorialRemove Version from WordPress and StylesheetsRun WordPress local with XAMPPSecurity in WordPress - EscapingSecurity in WordPress - SanitizationThe Loop (main WordPress loop)Update WordPress ManuallyWordPress Actions and FiltersWordPress add action()WordPress add editor style()WordPress add menu page()WordPress Add ShortcodeWordPress add submenu page()WordPress add theme support()WordPress Add/remove contact info for users with user contactmethods filter hookWordPress Admin Dashboard WidgetsWordPress AJAXWordPress Alternating main loop (pre get posts filter)WordPress Child Theme BasicsWordPress Create a Post ProgrammaticallyWordPress Create Template for Custom Post TypeWordPress Creating a custom templateWordPress Custom exerpts with excerpt length and excerpt moreWordPress Custom Post TypesWordPress Customizer Basics (Add Panel, Section, Setting, Control)WordPress Customizer Hello WorldWordPress DebuggingWordPress Enqueuing scriptsWordPress Enqueuing StylesWordPress Function : wp trim words()WordPress Function: add action()WordPress get bloginfo()WordPress get home path()WordPress get option()WordPress get permalink()WordPress get template part()WordPress get the category()WordPress get the title()WordPress home url()WordPress How Can I integrate Markdown editor with Advance Custom Fields repeater Add-on.WordPress initWordPress Installation and ConfigurationWordPress Making network requests with HTTP APIWordPress Meta BoxWordPress Options APIWordPress Plugin creationWordPress Plugin developmentWordPress Post FormatsWordPress Querying postsWordPress Remove Auto Line Breaks from Content and ExcerptWordPress REST APIWordPress Secure your installationWordPress ShortcodeWordPress Shortcode with attributeWordPress ShortcodesWordPress SidebarsWordPress Site MigrationWordPress TaxonomiesWordPress Template hierarchyWordPress template includeWordPress the $wpdb ObjectWordPress the Admin Bar (aka The Toolbar)WordPress the title()WordPress theme and child-theme developmentWordPress ThemesWordPress wp get current user()WordPress WP Query() LoopWordPress WP-CLIWordPress WP-Cron

WordPress Shortcode with attribute

From WikiOD

Syntax[edit | edit source]

  • add_shortcode('your_short_code', 'your_function_name');

Parameters[edit | edit source]

Parameters Discription and usage
$tag (string) (required) Shortcode tag to be searched in post content Default: None
$func (callable) (required) Hook to run when shortcode is found Default: None

Remarks[edit | edit source]

IMPORTANT – Don’t use camelCase or UPPER-CASE for your attributes

You can generate a shortcode with attribute Here

Examples of Shortcodes[edit | edit source]

WordPress shortcodes were introduced in 2.5

Here is come example of shortcode


to use shortcode direct into theme you have to use do_shortcode()

 <?php echo do_shortcode('[button]'); ?>

To customize the button, we could simply add something like:

[button type="twitter"]

Or to make it even better, we could use an enclosing shortcode:

[button type="twitter"]Follow me on Twitter![/button]

Creating a self-closing shortcode[edit | edit source]

The simplest shortcode is the self-closing one. We’re going to create a simple link to our Twitter account, and then add it in a blog post. All the code goes in functions.php, which is located in /wp-content/themes/your-theme/. If you don’t have one, just create it and put the code in it.

function button_shortcode() {
return '<a href="http://twitter.com/rupomkhondaker" class="twitter-button">Follow me on Twitter!</a>"';
add_shortcode('button', 'button_shortcode'); 

Usage: [button]

Creating a self-closing shortcode with parameters[edit | edit source]

Creating a self-closing shortcode with parameters

function button_shortcode( $type ) {

    extract( shortcode_atts( 
            'type' => 'value'
         ), $type ) ); 

    // check what type user entered
    switch ($type) {

        case 'twitter':
            return '<a href="http://twitter.com/rupomkhondaker" class="twitter-button">Follw me on Twitter!</a>';

        case 'rss':
            return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>'
add_shortcode( 'button', 'button_shortcode' );

Now you can choose what button to display by defining type in your shortcode.

[button type="twitter"]
[button type="rss"]

Creating an enclosing shortcode[edit | edit source]

enclosing shortcode

The enclosing shortcode allows you to embed content within your shortcode, just like BBCode if you’ve ever used that.

function button_shortcode( $attr, $content = null ) {
return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>';
add_shortcode('button', 'button_shortcode');

To use this shortcode, you embedd the text you want to use like this:

[button]Follow me on Twitter![/button]

To make this button even better, we could add parameters just like we did in the previous example.

function button_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'account' => 'account',
 'style' => 'style'
 ), $atts ) );
return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>';
add_shortcode('button', 'button_shortcode');


[button account="rupomkhondaker" style="simple"]Follow me on Twitter![/button]

Shortcodes in Widgets[edit | edit source]

By default, WordPress does not support shortcodes within Sidebar Widgets. It only expands the shortcodes within the content of a Post, Page, or custom post type. To add shortcode support to sidebar widgets, you can install a plugin, or use the below code:

add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );

It is important that these lines be added in this order. The first line prevents WordPress from turning line breaks into paragraph tags, since this keeps shortcodes from working. The second line is the one that makes the shortcodes work.