Category: PHP

I use inline code styling for a lot of my posts and I have been asked on several occasions how so. Well, I added some custom shortcode to my wordpress HTML editor. I’m a developer, and I very much dislike the visual editor, and so I use the HTML editor. So, custom shortcode is very convenient for me. Now, I’m going to explain how I achieved this, so y’all can get the same functionality too!

First of all, I created a child theme of the theme I am using. This means getting all up in your website files and making a new directory, so if you’re not comfortable with that. Abort now! I’m joking, follow along. Be Brave. You’ll never learn anything new if you don’t try.

Alright, child themes. These let you edit your current theme without losing the modifications when your theme is updated. WordPress have a brilliant tutorial on how to do this here, but I’ll explain it briefly anyway.

You’re going to need a new directory, the name being currentTheme-child. So if you’re using Chocolate Cookie then you will have a chocolate-cookie directory. To child this theme, create a chocolate-cookie-child directory.

The path is generally /wp-content/themes/

That’s step one, done!

Now, we gotta create a style.css file, this proclaims its love for the parent theme, so WordPress knows where to find the good stuff. The actual theme. The very first thing in this file should be a block comment to declare several attributes.

/* Theme Name: Chocolate Cookie Child Description: Chocolate Cookie Child Theme Author: Tim Talbot Author URL: http://timtalbot.co.uk Template: chocolate-cookie Version: 1.0.0 */

The only required attributes here are Theme Name and Template. These tell WordPress the name of your child theme and the template (parent theme) it should use within your child theme.

Alright, so far we have:

• A new directory called chocolate-cookie-child
• a style.css file within that directory
• a block comment at the top of style.css to define some required attributes, Theme Name and Template

All we need to do now is create a functions.php file to enqueue the style within WordPress. This ensures that WordPress loads and presents the style.css style, to implement any of our custom CSS, after it has loaded the parent theme styling.

<?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

This is the beginning of our functions.php script. We’re calling add_action() and passing it two parameters, the first is a string to denote which action the second parameter, a function, should be hooked to. The second param, the name of a function within our functions.php script. I left mine defined as-is, per the WordPress tutorial.

Next, we’re going to implement that function and so this code follows the add_action() call:

function my_theme_enqueue_styles() { $parent_style = 'chocolate-cookie-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } ?>

Here we provide a $parent_style handle, the easiest way to find this is look at the source of your blog with your parent theme activated. In my experience, it’s always been theme-name-style, though. So, scroll down your blog source code or CTRL+F to search for .css, you’re looking for a css include that looks like this:

<link rel='stylesheet' id='chocolate-cookie-style-css' href='http://timtalbot.co.uk/wp-content/themes/chocolate-cookie/style.css?ver=5.3.2' type='text/css' media='all' />

Here within the ID attribute, we can see chocolate-cookie-style-css, and so we remove the -style suffix to be left with the handle to our parent style, chocolate-cookie-style.

We then feed this $parent_style handle into wp_enqueue_style() to enqueue the parent style. We then call it again to enqueue our child style. Finally, we close up our PHP script with ?> and we’re good to go. Now we can equip our Chocolate Cookie Child theme within our WordPress dashboard, unless something wen’t wrong, somewhere.

Well, that’s our child theme created! Now we can move on to what we came here for, the shortcode implementation!

First of all, I added some custom CSS to the child style.css file, this dictates how my in-line code will be presented:

mycode { /*border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;*/ border: 1px dashed #969696; background: #f5f5f5; color: #BF4D28; padding-left: 5px; padding-right: 5px; font: Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace; white-space: nowrap; }

Using a custom tag, mycode, allows me to just wrap text in that tag to apply the style. I don’t want to type all of those tags all of the time though, so let’s add a shortcode button above the text editor. For that, back to functions.php.

First of all, we call add_action(‘admin_print_footer_scripts’, ‘add_my_code_tag’);. We put this right after the previous call to add_action(), the one that enqueued our style. It follows the same format, the first parameter is the hook to which the function identified by the second parameter should be hooked to. So we want to inject our custom code on admin pages, and so we use the admin_print_footer_scripts hook. Our function, add_my_code_tag is a function that comes after my_theme_enqueue_styles() function in the functions.php file.

Here is that function:

function add_my_code_tag() { if(wp_script_is("quicktags")) { ?> <script type="text/javascript"> //this function is used to retrieve the selected text from the text editor function getSel() { var txtarea = document.getElementById("content"); var start = txtarea.selectionStart; var finish = txtarea.selectionEnd; return txtarea.value.substring(start, finish); } QTags.addButton( "code_shortcode", "Inline Code", callback ); function callback() { var selected_text = getSel(); QTags.insertContent("<mycode>" + selected_text + "</mycode>"); } </script> <?php } }

Sidenote: There’s nothing worse than badly formatted code, and while writing this post I just noticed that the <code> tag didn’t retain code formatting, so I just added code {white-space: pre; line-height: 1em;} to my child theme style.css to fix that. I also spent half an hour adjusting the <mycode> CSS to tweak the style to match the theme of the blog, since it looked very cool for me until I reloaded the CSS and it picked up some styling that it hadn’t previously, oops!

Back to the matter at hand!

The very first thing we do is check if the quicktags wordpress script is being loaded, since we don’t want to try and access that if it hasn’t loaded yet. If the condition is true, we write a function, in JavaScript to grab the selected text. We use this in the next function we write, callback(), which is used when we create our new quick tags button.

To create a new Quick Tags button, we call QTags.addButton(), part of the WordPress Quicktags API, which requires at least 3 arguments. An Identifier, a display name for the button and a callback or opening tag. Here, I use a callback… called… callback, wow. RIP naming conventions.

Finally, the callback() function which executes when the new Quicktags button is clicked declares a variable which will contain the return value of the first function, getSel(), which is any currently selected text. It’ll then use QTags.insertContent() to insert content at the cursor location. In a typical use-case, this will be at the location of the selected text. The inserted data is the selected text surrounded by the <mycode> opening and closing tags. If no text is selected, it’ll just insert the tags. That’s it, we’re done! If you’ve followed along correctly, we should be good to go!

I suspect we can add some elegance to this, though, so if that no text is selected, it’ll just insert the opening or closing tag. So let’s modify the add_my_code_tag() function to do that. I’m going to add a boolean variable to keep track of whether we want an opening or closing tag, and I am going to add some conditional statements to determine which course of action we seek. The possibilities are:

• Insert an opening <mycode> tag
• Insert a closing </mycode> tag
• Wrap selected text in <mycode> tags

I may be over-complicating things here, but here’s where I’m at:

function add_my_code_tag() { if(wp_script_is("quicktags")) { ?> <script type="text/javascript"> var close = false; //this function is used to retrieve the selected text from the text editor function getSel() { var txtarea = document.getElementById("content"); var start = txtarea.selectionStart; var finish = txtarea.selectionEnd; return txtarea.value.substring(start, finish); } QTags.addButton( "code_shortcode", "Inline Code", callback ); function callback() { var selected_text = getSel(); if(selected_text == '') { if(!close) { QTags.insertContent("<mycode>"); close = true; } else { close = false; QTags.insertContent("</mycode>"); } } else { QTags.insertContent("<mycode>" + selected_text + "</mycode>"); } } </script> <?php } }

and now, all of that over-complicated, unnecessary, extra-work nonsense is out of the way – We can reduce the function to the following code for exactly the same functionality:

function add_my_code_tag() { if(wp_script_is("quicktags")) { ?> <script type="text/javascript"> QTags.addButton( "code_shortcode", "Inline Code", "<mycode>", "</mycode>" ); </script> <?php } }

Because that very same functionality is provided to us by WordPress’s Quicktips API. And there you have it, that’s how to add a quicktags, shortcode button to your WordPress HTML editor, to make life simpler!

Sidenote: just another side note, in case you’re wondering how I type all of these < and > opening and closing tags without them disappearing, I’m using HTML Special Entities. Without spaces: & lt; and & gt; for opening and closing, respectively.