Creating WordPress shortcodes

March 27, 2020

code

// function that runs when shortcode is called
function my_awesome_function() {

  // Things that you want to do.
  $message = 'Hello world!';

  // Output needs to be returned
  return $message;
}

// register shortcode
add_shortcode('my_awesome_shortcode', 'my_awesome_function');

Add a shortcode in WordPress theme files

code

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

NOTES

Prefixing the function names and shortcode names is a good idea. For example, consider the following function to load a stylesheet

code

// Load the CSS file
function add_plugin_stylesheet()
{
  wp_enqueue_style( 'country-site-selector', plugins_url(
    'country-site-selector.css', __FILE__ ) );
}
add_action('wp_enqueue_scripts', 'add_plugin_stylesheet');

add_plugin_stylesheet has already been declared in another plugin i wrote. When i tried to use it in this plugin and activate it, it failed to do so because the function has already been used.. The function names need to be unique

Adding HTML/JS from the plugin

code

function country_site_selector() {
  ?>

  <!-- BONGA! - i added this from plugin -->

  <?php
}
add_action('wp_footer', 'country_site_selector');

is better than

code

function country_site_selector() {
  echo '<!-- BONGA! - i added this from plugin -->';
}
add_action('wp_footer', 'country_site_selector');

because when echoing from within PHP you have to add HTML as strings and don't get any syntax highlighting.

jQuery vs. $

You can not use the $ shorthand when you enqueue in WordPress (for compatibility with other libraries)

code

var countrySelector = $( "#countrySelectionContainer" );

$(document).ready(function(){
  // code goes here
});

should be this

code

var countrySelector = jQuery( "#countrySelectionContainer" );

jQuery(document).ready(function(){
  // code goes here
});

Creating WordPress shortcodes

Adding HTML/JS from the plugin

jQuery vs. $

Referencing plugin directory

Links