Using shortcodes in WordPress
Shortcodes are an easy way to add dynamic information to a post or page without the need to type any HTML. In this example, I’m going to show you how to add a button to a page.
Normally, you’d type something like the following:
<a href="/contact/" class="btn">Get in touch</a>
Code language: HTML, XML (xml)
And, with a bit of CSS, we get this:
With shortcodes, we could achieve the same result by typing something like this:
[button]Get in touch[/button]Code language: CSS (css)
Creating a shortcode requires a little bit of PHP knowledge. Place the following code in your functions.php
file in your theme:
The code above is relatively simple. We create a function (I’ve called it shortcodeButton
) and pass the variables $atts
and $content
. In the function, we return the HTML for our link. I’ve hard-coded the link to go to a contact page. Notice how we use $content
– this pulls the text from our shortcode above, in this example ‘Get in touch’. We finally use add_shortcode
to link our function to the shortcode tag. We can extend this further. Lets say that we want to change where the link goes and what colour it will be. You can pass parameters, so to do this we can amend the function like so:
We’re now making use of the $atts
variable using the extract
function. I’ve defined two: link and colour and set the defaults (so, on line 4, I’ve set the default colour to green). We then use {$link}
and {$colour}
to return these values.
That means we can now add a custom link, like so:
[button link="/contact/" colour="blue"]Get in touch[/button]
Code language: CSS (css)
And this would output the following HTML:
<a href="/contact/" class="btn btn-blue">Get in touch</a>
Code language: HTML, XML (xml)
This is a basic example of how to use shortcodes. It’s a powerful feature with lots of potential and it has the added benefit that clients find it easier than writing HTML.
- ← Previous
Podcasts - Next →
My GeekTool F1 desktop