Getting started with WordPressget_bloginfo()Enqueuing scriptsMaking network requests with HTTP APIEnqueuing Styleshome_url()Custom Post Typestemplate_includeThe Loop (main WordPress loop)AJAXThe $wpdb ObjectActions and Filterswp_get_current_user()Add/remove contact info for users with user_contactmethods filter hookCreating a custom templateCustomizer Hello WorldCustomizer Basics (Add Panel, Section, Setting, Control)The Admin Bar (aka "The Toolbar")Querying postsAlternating main loop (pre_get_posts filter)ShortcodeCreate a Post Programmaticallyget_template_part()Taxonomiesget_template_part()ShortcodesPost FormatsCustom exerpts with excerpt_length and excerpt_morePlugin developmentSecurity in WordPress - EscapingTemplate hierarchyRemove Version from Wordpress and StylesheetsChild Theme Basicsadd_action()get_template_part()Shortcode with attributeSidebarsSecurity in WordPress - SanitizationinitCreate Template for Custom Post TypeFunction: add_action()Add ShortcodeHow Can I integrate Markdown editor with Advance Custom Field's repeater Add-on.Installation and Configurationwp_get_current_user()WP-CronSecure your installationOptions APIFunction : wp_trim_words()WP_Query() LoopUpdate WordPress ManuallyThemesWP-CLIDebuggingadd_menu_page()add_submenu_page()get_option()get_permalink()get_the_category()the_title()get_the_title()add_editor_style()add_theme_support()WordPress Plugin creationRun WordPress local with XAMPPAdmin Dashboard WidgetsSite MigrationMeta BoxRemove Auto Line Breaks From Content and Excerptget_home_path()Wordpress theme and child-theme developmentREST API

Shortcode with attribute

Other topics

Remarks:

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

You can generate a shortcode with attribute Here

Examples of Shortcodes

WordPress shortcodes were introduced in 2.5

Here is come example of shortcode

[button]

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

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.

<?php 
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

Creating a self-closing shortcode with parameters

<?php
function button_shortcode( $type ) {

    extract( shortcode_atts( 
        array( 
            '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>';
            break;

        case 'rss':
            return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>'
            break;
    }
}
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

enclosing shortcode

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

<?php
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.

<?php
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');
?>

Usage:

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

Shortcodes in Widgets

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.

Syntax:

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

Parameters:

ParametersDiscription 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

Contributors

Topic Id: 6291

Example Ids: 21741,21742,21743,21744,21745

This site is not affiliated with any of the contributors.