How To Write A WordPress Plugin Tutorial - Step 3 - Shortcode Plugin
The overview article provides some background and guidelines. If you haven't read that yet now might be a good time.
As a first step for Shortcode plugins, let's put the server's date onto the screen. This comes in two parts: the plugin and the shortcode to place into an article. First the plugin:
<?php /* Plugin Name: The Date Description: Display the system date on a page / post. Version: 0.1 Author: Chris Crane Author URI: https://brolgaswan.com License: GPL2 */ function td_cghc_the_date() { echo date("d-M-Y"); return; } add_shortcode('the-date', 'td_cghc_the_date'); ?>
Now the shortcode. To display this we add the shortcode to a post. From the above code take the first parameter in add_shortcode(), without the apostrophes, and enclose it in square brackets. Let's place it at the end of an article, the shortcode is:
[the-date]
Try It Yourself - put the plugin PHP code into a file of any name with the extension .php and put that into the plugins directory of your WordPress installation. My suggestion is to follow the naming convention, i.e. the-date.php. In the admin plugins page there will now be a plugin The Date which you can activate and deactivate. Then put the above shortcode (including brackets) at the end of a post.
The date is displayed with the format d-mmm-yyyy; notice the position of the date in relation to the text. Is it where you expected? In order for it to be exactly where you expected the_content() would have to stop processing when it reached the shortcode, the plugin would run returning its output to the_content() which would include it inline and then resume processing. This is not what happens; the plugin runs within the_content() step, but writes its output to the screen before the_content() does. To position the output we need to provide the necessary HTML and/or CSS to do that.
<?php /* Plugin Name: The Date Description: Display today's date on a page / post. Version: 0.2 Author: Chris Crane Author URI: https://brolgaswan.com License: GPL2 */ function td_cghc_the_date() { echo "<div class='td_cghc_the_date'>" . date("d-M-Y") . "</div>"; return; } add_shortcode('the-date', 'td_cghc_the_date'); function td_cghc_css() { echo "<style type='text/css'> .td_cghc_the_date { float: right; padding: 0 15px 0 5px; margin: 0; bottom: -50px; } </style>"; } add_action('wp_head', 'td_cghc_css'); ?>
We now have some control over where the output is located albeit in a clunky manner. However, if we want the output to be seemlessly inserted into the content as a direct replacement of the shortcode we need a different approach. This could involve something like an action (not shortcode) plugin that scans the_content for a particular string (a pseudo-shortcode), replacing it with the desired result. This would, however, mean the plugin runs on every page rather than only where it is needed.
- wp_head() is not guaranteed to be called in which case the plugin would not run. It is up to the theme to include a call to wp_head - this is beyond the plugin's control.
- Whilst this <style> segment is relatively short it is still not as clean as having the CSS in a separate file and including a reference to that in the header.
The good news is that tidying up the second of these allows us to solve the first. We'll cover this in the next step of this tutorial which deals with files.