How to create a shortcode in WordPress?

wordpress-shortcode

Shortcode is a very useful tool in the world of WordPress users  which exist from version 2.5, which can give to the editor of the blog  a lot of new opportunities, such as adding entries or compose custom elements without manual entries contain the HTML fragments. As it turns out, adding shortcod to WordPress theme is not difficult and complicated. From what we ought to start?

Function which we need

We should start by writing a function that supports our shortcode. For example, if you would like to add a shortcode with email, so if there would be any change of email address, all you need to do is turn it into just the shortcode handler, it will be replaced on all pages of your site.

1
2
3
function email_sc_func ( $atts ){
    return "office@example.com";
}

You should also create a child theme, so you avoid problems later on, when the theme will be updated to a newer version. If you do not know how to create a child theme, the instructions can be found HERE.

Our next step is to tell WordPress to call the function, or associate it with a shortcode. We will use this function add_shortcode which you’ll add in the functions.php file. The first parameter, is nothing but a name of shortcode, and the second is a function that will handle it.

1
add_shortcode('email', 'email_sc_func');

Shortocode’s attributes

Our goal is to prepare a button with link and define additional classes for this button, so there is nothing else as you begin to write the function which should be provided by the pull shortcode attributes and assign them to the default values.

  1. function fn_btn_with_url($atts){  
  2.  extract(shortcode_atts(array(  
  3.       ‘url’ => ‘http://wptips.pl’,  
  4.       ‘title’=> ‘WP tips’,  
  5.       ‘class’ => ‘ right’,  
  6.    ), $atts));  
  7. return ‘<a href=”‘.$url.‘” title=”‘.addslashes($title).‘” class=”gradient-button  ‘.$class.‘ “>’.$title.‘</a>’;  

The next step is to add support shortcode, and then call the shortcode.

1.add_shortcode(‘btn_with_url’‘fn_btn_with_url’);

  1. [btn_with_url url=“http://google.pl” title=“Uncle G” class=“left”

Buttons to look elegant, this should be adequately realized by the individual CSS class.

function email_sc_func ( $atts ) {
    $atts = shortcode_atts(array(
                             'temat' => 'ogolne',
                             'styl'  => 'text'
                          ), $atts);
    $temat = $atts['temat'];
    $styl  = $atts['styl'];
    if ($temat == 'handel') {
        $address = 'dzial_handlowy@example.com';
    } elseif ($temat == 'reklamacje') {
        $address = 'biuro_obslugi@example.com';
    } elseif ($temat == 'naprawa') {
        $address = 'serwis@example.com';
    } elseif ($temat == 'ogolne') {
        $address = 'sekretariat@example.com';
    }
    if ($styl == 'html')
    {
        $address = '<a href="mailto:' . $address .
                   '">'. $address .'</a>';
    }
    return $address;
}

Write the style sheet must be on file with the theme or child theme as shortcode-buttons.php. To the sheet was loaded when loading pages on this blog need to add functions.php file share. How to do it? Just write a function wp_enqueue_style () and add it as a share for the hook ‘wp_enqueue_style’, and our buttons are ready!

1
2
3
4
function my_enqueue_scripts() {
    wp_enqueue_style( 'shortcode-button',
        get_template_directory_uri().'/css/shortcode-button.css');
}

1
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

 

Graphics: http://wplifeguard.com/