WordPress adding shortcodes in functions.php

2 comments

1. if you do not want to alter your theme’s functions.php file (for obvious reasons) you have two options

   1. create a child theme and make a functions.php file with your shortcode in there. WordPress will recognize this file and automatically include it for you and as long as there is no naming conflicts with other functions in your parent theme’s functions.php

   2. create a new file, custom_shortcodes.php or something, with your custom shortcode in it and add it to your theme. then in your theme’s functions.php, at the very end, add the line

      include 'custom_shortcodes.php';

   this will allow you to edit your custom shortcodes without having to alter the themes functions.php. just know if you update your theme, you will have to add the above line back in to functions.php. Personally, i always use a child theme and then end up using the first method but either is acceptable.

   a last option, and what solved @xatenev problem, is to create a plugin and add all of your shortcodes to the plugin. This makes your custom code ‘portable’ and allows you to use it on any theme you have installed without going into the theme folder and adding/changing files.

   Log in to Reply

2. reference from your functions.php to your shortcodes.php

   So your functions.php could start like

   <?php
   
   // define the path   
   $shortcodes_path = get_template_directory() . '/shortcodes';
   
   // ** Get the shortcodes.php **
   require_once $shortcodes_path . '/shortcodes.php';
   

   This code will now on start load a file called “shortcodes.php” stored in a folder “shortcodes”.

   The line after define the path sets a shortcut the your themes folder and right there into a subfolder called “shortcodes”.
   The line direct after Get the shortcodes.php loads a file called “shortcodes.php” stored in that folder “shortcodes”. So you could put all your css, js and so on cleaned up in a folder, using the $shortcodes_path to load the ressource.

   Now you need to place the shortcodes file in this folder with the right name example could be

   <?php
   /* show content on mobilephones only */
       function showm( $atts, $content = null ) { 
           $content = wpautop(trim($content));
           return '<div class="visible-xs">'.do_shortcode($content).'</div>';  
       }  
       add_shortcode("show-m", "showm");  
   

   save and shoot. IF you’re using bootstrap this shortcode will wrap your content into a div which will only be displayed on mobile devices.

   two things:
   1. As this is php it doesn’t need a closing php tag, but if you’re a cleancode-lover you’ll do it anyway.
   2. allways use “do_shortcode($content)” as this will allow the user to use a shortcode wrapped in a shortcode. FE: If you have the above shortcode for mobile devices and a shortcode for icons the user could use the icon shortcode to be displayed on mobile only.

   SO MUCH WOW =) All the best
   Fab

   Log in to Reply