If you want to create your own shortcode, we recommend you to do so by creating a child theme first.
Step by step
1. Create child theme
2. Create directory inside your child theme, for example: shortcodes
3. Create a class file (just a simple PHP file) inside shortcodes directory – let’s name it MyCustomShortcode.class.php.
Once done, paste this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<?php /** * Sample shortcode * @author createIT */ class MyCustomShortcode extends ctShortcode { /** * Group name to which shortcode should be assigned (for Shortcode Generator) * @return mixed|void */ public function getGroupName() { return 'Custom'; } /** * Returns shortcode label * @return mixed */ public function getName() { return "My Custom Shortcode"; //this name is visible in shortcode generator } /** * Register javascript files - they will be added at the bottom of HTML * @see wp_footer */ public function enqueueScripts() { //let's add some javascripts for this shortcode. It will be only loaded if shortcode is used. //CT_THEME_ASSETS points to theme_name/assets/ wp_register_script('ct-sample-script', CT_THEME_ASSETS . '/js/ct-sample-script', array('jquery')); wp_enqueue_script('ct-sample-script'); } /** * Add CSS styles */ public function enqueueHeadScripts() { //add some styles //CT_THEME_ASSETS points to theme_name/assets/ wp_register_style('ct-sample-style', CT_THEME_ASSETS . '/css/ct-sample-style.css'); wp_enqueue_style('ct-sample-style'); } /** * Returns shortcode name * @return string */ public function getShortcodeName() { return 'my_shortcode'; //name used as a shortcode [my_shortcode] } /** * Handles shortcode * @param $atts * @param null $content * @return mixed */ public function handle($atts, $content = null) { //MAIN FUNCTION - it must return HTML which will be used in your theme //extract our variables - now all variables from getAttributes may be used extract(shortcode_atts($this->extractShortcodeAttributes($atts), $atts)); //this is where we can implement our custom HTML $classes = array('btn'); $classes[] = $bigger == 'true' ? 'bigger' : 'standard'; //we check whether bigger option is used $classes[] = $align == 'left' ? 'left' : 'right'; return '<a title="' . esc_attr($title) . '" class="' . esc_attr(implode($classes)) . '" href="' . esc_attr($url) . '">' . $content . '</a>'; } /** * Returns config attributes * @return array */ public function getAttributes() { /** * for shortcode generator and handle - define what parameters our shortcode has * examples can be found in your theme directory ex. dish/theme/shortcodes/ * Key is the parameter name we will use and values are the definition **/ return array( 'title' => array('label' => __('Link title', 'ct_theme'), 'default' => __('Click Here', 'ct_theme'), 'type' => 'input', 'help' => __("Link title", 'ct_theme')), 'url' => array('label' => __('URL', 'ct_theme'), 'default' => '', 'type' => 'input', 'help' => __("URL where our button should point", 'ct_theme')), 'bigger' => array('label' => __('Bigger button?', 'ct_theme'), 'type' => "checkbox", 'default' => 'true'), 'align' => array('label' => __('Alignment', 'ct_theme'), 'default' => 'left', 'type' => 'select', 'choices' => array('left' => __('left', 'ct_theme'), 'right' => __('right', 'ct_theme'))), 'content' => array('label' => __('content', 'ct_theme'), 'default' => '', 'type' => "textarea"), //content name has a special meaning and is used when our shortcode supports content inside: [shortcode]CONTENT[/shortcode] ); } } |
Most of the above code should be self explanatory, but let’s break it down a bit:
- getGroupName – function should return name of the group this shortcode belongs to. It can be any name you want – here it will be displayed ad “Custom”
- getName – friendly name which will appear in Shortcode Generator
- enqueueScripts – here you can enqueue any javascript files you need. These files will be enqueued at the bottom of your HTML. Scripts will be only added if this shortcode is used on your page.
- enqueueHeadScripts – here you can enqueue any css/javascript files you need which will be added in head.Scripts and styles will be only added if this shortcode is used on your page.
- getShortcodeName – name of your shortcode. This name will be used in your code ex. [my_shortcode_name]. Notes about naming your shorcodes can be found here
- handle – this is the place where you implement your shortcode’s custom logic. It must return HTML which will then be displayed on your pages
- handle – this is the place where you implement your shortcode’s custom logic. It must return HTML which will then be displayed on your pages. Please note that only parameters which are defined in getAttributes are accessible.
- getAttributes – define your shortcodes parameters here so that Shortcode Generator can generate a form automatically. Please note that only parameters defined here will be accessible in handle function.
4. Once we have our shortcode ready, we need to register it. Create a file functions.php in root directory.
Once done, copy this content to your functions.php (if file already exists, just paste this code at the bottom):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php /** * Register custom shortocodes */ function my_shortcodes_register() { //include our new shortcode require_once dirname(__FILE__).'/shortcodes/MyCustomShortcode.class.php'; //tell Shortcode Generator we have a new shortcode ctShortcodeHandler::register(new MyCustomShortcode()); } add_action('ct_loader.init', 'my_shortcodes_register'); |
5. That’s it. Now you should be able to use it: [my_shortcode title=”My Title” url=”http://www.createit.pl” align=”left”]Label[/my_shortcode].
This example can be downloaded here. Please update style.css inside downloaded package PARENT_TEMPLATE_NAME with your main theme name in order to make it work.