As I built this site, I found myself wanting to have more and more control over the content of these posts. As someone who started out building websites with notepad.exe, I’m used to having complete, and more importantly, up front control over content. When I learned that I couldn’t simply add php or js to the body of a post, it made some sense from a security standpoint, but I wanted to be able to add my own dynamic content without reverting to other people’s products by default.
I started with the desire to be able to insert today’s date. The end product is currently utilized in the site’s canary at the bottom of our privacy page. It will probably need to be replaced with a month by month update or something similar to appropriately, and legally function, but it was a good exercise for now.
I used two guides to figure out how to do this, located here and here
The first step was to create a child theme. I currently use WordPress’ Twenty Seventeen theme, but if I wanted to create my own functions without worrying about them being deleted on an update, a child is necessary. First we create a folder for the child theme, containing style.css and functions.php files.
touch /var/www/html/wp-content/themes/twentyseventeen-child/style.css
touch /var/www/html/wp-content/themes/twentyseventeen-child/functions.php
chown -R www-data:www-data /var/www/html/wp-content/themes/twentyseventeen-child/
Note that the best practice is to name child themes with their parent’s name and -child appended to it. Next we edit style.css to add the requisite theme header to it:
Theme Name: Twenty Seventeen Child
Theme URI: http://example.com/twenty-seventeen-child/
Description: Twenty Seventeen Child Theme
Author: CairnSec
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: test
Text Domain: twenty-seventeen-child
*/
Best practice for importing the parent’s style is now to do so in functions.php:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
If we look at themes on our wordpress site, we should now be able to see our child theme available. Activate it (and unfortunately fix several of the customization settings, not sure if there’s a way to carry those over…). We are now ready to write our shortcode. In functions.php, within our tags, create a function:
This function will return today’s date by pulling ‘date_format’ from $atts, that is, it will use the site’s date format. Kind of neat. Last thing is to define the shortcode itself. We have the function that the shortcode will execute now. To define the shortcode:
...
function getToday( $atts ) {
return date(get_option('date_format'));
}
add_shortcode( 'today', 'getToday');
...
?>
In add_shortcode(), the first parameter is the shortcode itself. It is what we will type in our post in order to execute getToday(). The second parameter is just the name of the function, we’re tying the function to that name.
Now, we should be able to type [[today]] and get today’s date: [today]