When building WordPress sites, I’ve often been in need of adding a call to action with a striking appearance into the site. Working by myself, that’s really no problem – but when it needs to be added into client-created posts and Pages, it can get to be a hassle — and cause long-term problems.
It’s not really effective or efficient to teach all the intricacies of HTML to every client. If you’ve created a cool CTA format which requires specific HTML you also want to make sure that this is as easy as possible for your client to enter into their post.
The easiest way to do this, in my experience, is by adding a simple shortcode, accessible using the quicktags bar in the WordPress HTML editor. (Since I care about HTML quality, I prefer to either disable the Visual editor or at least strongly discourage it’s use.)
The WordPress API makes it shockingly easy to set all this up.
First, we’ll define our Call to action shortcode:
1
| add_shortcode('cta','my_cta'); |
Short and sweet – the first argument is your shortcode itself — with ‘cta’ defined, you’ll used [cta] as your shortcode. Next, we’ll define the function which will handle the shortcode.
2
3
4
5
6
7
8
9
10
11
| function my_cta($atts, $content='') {
extract(shortcode_atts(array(
'class'=>'my-cta'
), $atts));
$output = '';
if ( $content != '' ) {
$output = "<div class='cta $class'><p>$content</p></div>";
}
return $output;
} |
The arguments accepted by the ‘my_cta’ function are the attributes of the shortcode, as assigned in the extracted array and the content enclosed by the shortcode. This particular function is designed to accept one shortcode parameter; and not to output anything if there’s no enclosed body. The usage of the shortcode is like this:
[cta class="buy-now"]Buy my awesome widgets today![/cta]
The output would be:
<div class='cta buy-now'><p>Buy my awesome widgets today!</p></div> |
Want to add another parameter to the shortcode? It’s easy — just add another value into the array of parameters.
Finally, we want to add the quicktag — so here it is:
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| add_action('admin_footer','add_quicktags');
function add_quicktags() { ?>
<script type="text/javascript" charset="utf-8">
/* Adding Quicktag buttons (WP ver. 3.3+)
* - Button HTML ID (required)
* - Button display, value="" attribute (required)
* - Opening Tag (required)
* - Closing Tag (required)
* - Access key, accesskey="" attribute for the button (optional)
* - Title, title="" attribute (optional)
*/
QTags.addButton( 'aq_cta', 'CTA', '[cta class=""]', '[/cta]', '', 'CTA' );
</script>
<?php } |
Only two pieces to this code, as well: an action added to the footer of your admin pages, and a function which inserts a new quicktag. Need to add multiple quicktags? Just add each one on a new line – there’s no need to add additional actions or additional scripts.
And here’s the whole thing — you can just drop the entire block of code into your theme’s functions.php file and everything here will be available immediately.
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
| add_shortcode('cta','my_cta');
function my_cta($atts, $content='') {
extract(shortcode_atts(array(
'class'=>'my-cta'
), $atts));
$output = '';
if ( $content != '' ) {
$output = "<div class='$class'><p>$content</p></div>";
}
return $output;
}
// Add buttons to html editor
add_action('admin_footer','add_quicktags');
function add_quicktags() { ?>
<script type="text/javascript" charset="utf-8">
/* Adding Quicktag buttons (WP ver. 3.3+)
* - Button HTML ID (required)
* - Button display, value="" attribute (required)
* - Opening Tag (required)
* - Closing Tag (required)
* - Access key, accesskey="" attribute for the button (optional)
* - Title, title="" attribute (optional)
*/
QTags.addButton( 'aq_cta', 'CTA', '[cta class=""]', '[/cta]', '', 'CTA' );
</script>
<?php
} |
The whole thing is only 30 lines of code – including 9 lines of comments.
