Creating a custom wordpress plugin with shortcode

Question

I'm trying to create my first Wordpress plugin that includes a shortcode and I can't seem to get it to work. When I type my shortcode [first] it just displays "[first]" even though it's written in HTML in the post/page. What am I missing?

 <?php
 /*
 * Plugin Name: WordPress ShortCode
* Description: Create your WordPress shortcode.
* Version:
* Author:
 * Author URI:
*/

 function wp_first_shortcode(){
  echo "Hello World";
 }

add_shortcode(‘first’, ‘wp_first_shortcode’);
 ?>

There are no errors, just shortcode is not displaying properly.

j08691 · Accepted Answer · 2019-05-20 21:04:46Z

2

return don't echo. From the add_shortcode() docs:

Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results. This is similar to the way filter functions should behave, in that they should not produce expected side effects from the call, since you cannot control when and where they are called from.

So:

function wp_first_shortcode(){
  return "Hello World";
}

Also don't use curly quotes in your code. Ever. Change add_shortcode(‘first’, ‘wp_first_shortcode’); to add_shortcode('first', 'wp_first_shortcode');

See also https://developer.wordpress.org/plugins/shortcodes/basic-shortcodes/

answered May 20, 2019 at 21:04

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pfbarnet Over a year ago

Thanks, it was the curly quotes. I had copied and pasted from a tutorial and wasn't even thinking about the quotation marks. Replaced them and it works.

EMILY MARCIANO · Accepted Answer · 2025-11-23 06:51:33Z

To develop a Custom Shortcode based WordPress plugin first you need to prepare the folder structure as shown in below.

Shortcode WordPress plugin Code Folder

Here core-init.php you need to define file path (like JS or CSS files). Then using a public function make it accessible from sidebar-widgets.php.

if (!defined('WPINC')) { die; }
define('ITSW_CORE_INC',dirname( __FILE__ ).'/assets/includes/');
define('ITSW_CORE_CSS',plugins_url('assets/css/', __FILE__ ));
define('ITSW_CORE_JS',plugins_url('assets/js/', __FILE__ ));

function itsw_register_core_css(){
wp_enqueue_style('itsw-core', ITSW_CORE_CSS . 'jhp_main.css',null,time(),'all');
};
add_action('wp_enqueue_scripts', 'itsw_register_core_css'); 
add_action('admin_enqueue_scripts', 'itsw_register_core_css');   
/*
*  Register JS/Jquery Ready
*/
function itsw_register_core_js(){
// Register Core Plugin JS  
wp_enqueue_script('itsw-core', ITSW_CORE_JS . 'jhp-core.js',null,time(),true);
};
add_action('wp_enqueue_scripts', 'itsw_register_core_js'); 
add_action('admin_enqueue_scripts', 'itsw_register_core_js');  
/*
*  Includes
*/
// Load the Shortcodes
if ( file_exists(ITSW_CORE_INC . 'jhp-shortcodes.php')) {
    require_once ITSW_CORE_INC . 'jhp-shortcodes.php';
}

As per WordPress assets folder is mandatory. Where you can Store CSS and JS files.

To Store wp global variables use sidebar-widgets.php file as shown in the Folder structure. Sample Codes shared below.

if (!defined('WPINC')) { die; }

// Let's Initialize Everything
if (file_exists(plugin_dir_path( __FILE__ ) . 'core-init.php')) {
require_once(plugin_dir_path( __FILE__ ) . 'core-init.php');

if (get_option('itsw_how_many_records') === false ) {
    update_option('itsw_how_many_records', 20);
}

if (get_option('itsw_height_of_i20_sidebar') === false ) {
    update_option('itsw_height_of_i20_sidebar', 520);
}

if (get_option('itsw_dropdown_border') === false ) {
    update_option('itsw_dropdown_border', 1);
}

if (get_option('itsw_dropdown_image') === false ) {
    update_option('itsw_dropdown_image', 1);
}
    
ob_end_clean();
}

Here I am using ob_end_clean(); for removing unwanted white-spaces. In this kinds of variables itsw_how_many_records I am storing records count and in itsw_height_of_i20_sidebar storing height in pixels.

/assets/includes/jhp-shortcodes.php this is the main file which used to place HTML and functionalities. Here you need to create your shortcode function.

add_action( 'init', 'itsw_register_shortcodes');

if (!function_exists('itsw_register_shortcodes')) {
    function itsw_register_shortcodes(){
        // Registered Shortcodes
        add_shortcode ('i20_Sidebar_Widgets', 'itsw_plugin_form_display');
    };
}

Hope I resolved your Query. For further reference you can Download the Sample Codes.

Collectives™ on Stack Overflow

Creating a custom wordpress plugin with shortcode

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related