Create Custom CSS Short Codes in WordPress

Have you ever wanted to spruce up the content in your WordPress blog post or page with a few fancy buttons and needed to create a WordPress button shortcode? The built-in post editor allows you to customise the way your text looks by including inline CSS. But this practice is counter-productive especially when you need to reuse the same CSS effect regularly. The developers at WordPress realised this and have provided something called ‘shortcodes’.
Shortcodes are small pieces of code that you can insert into a post or a page that return a piece of content that they have been programmed to show, to the end user.

In this guide, we are going to create shortcodes that will convert any piece of text in a post or a page into a fancy looking call-to-action button without the hassle of including inline CSS.

Please backup all your files first before you start!

(WordPress = Files + Database)

Preparing the shortcode

The first step is to create the shortcode. To do this, either access your theme’s functions.php (wp-content -> themes) file and place the following code in it or create a custom plugin for WordPress.

Building a Custom Plugin

NOTE: If you are likely to change your theme in the future, it is recommended going through the following steps first to ensure your plugin will not be overwritten by creating a custom plugin for WordPress (e.g. when updating the theme):

  1. Navigate to *Wordpress Installation Directory* -> wp-content -> plugins
  2. Create a folder called “my-custom-plugins”
  3. Inside the new folder, create a file called “my-custom-shortcodes.php”. This file will contain the code of your custom plugin, which in this case will be the code for the
    shortcode
  4. Paste the following code in the file:
  5. The above code snippet contains the name of your custom plugin and other important information that needs to be provided for WordPress to recognise it as a plugin
  6. Navigate to Plugins from your WordPress dashboard and locate your custom plugin: custom wordpress plugin
  7. Click on ‘Activate’ to activate the plugin.
For this demonstration, we are going to create a shortcode which accepts text and a URL.

 

Edit functions.php

Paste the following code at the end of your WordPress installation’s functions.php file or custom plugins file.

(Click here for the complete WP Custom Plugin Code)

In the above code snippet, we have created a function called ‘call_to_action_shortcode’.

add_shortcode( ‘call-to-action-shortcode’, ‘call_to_action_shortcode’ );

This piece of code tells WordPress to create a

[call-to-action-shortcode]

shortcode (the first parameter passed in the add_shortcode function). The second parameter designates the function that will be called when this shortcode is called in any post or page.

Preparing the CSS

Now that WordPress knows what to return when our shortcode is called, we need to style the text that is being passed. The CSS used for this example is shown below:

Place this piece of code at the bottom of your theme’s style.css file and save it. You can access this file by navigating to Appearance -> Editor -> Style.css in your WordPress installation’s dashboard.

Using the shortcode

We are going to use the shortcode we just created to style a piece of text “Learn More” in a blog post. Place the following shortcode in your post:

Go ahead and preview the post and you should be able to see the following result with the help of the WordPress button shortcode you just created:

cta

That certainly looks better than a Spartan text link, and it catches the attention of every reader on your website! Have you tried to click it? The button below is the real deal.

Become a WordPress Hero!

That was easy. Wasn’t it?

WordPress runs on PHP too.

Still too much work? Then download a plugin.