More than 800+ satisfied clients and counting, since 2010

Blog

How to Create WordPress Short Codes?

Short Codes are of great use because when you want to insert the same codes all over the day to insert special functions to your content, the short codes reduce a number of mistakes and you need not keep writing the codes over the day. When the same code is kept repeated every day, there are higher chances of the code becoming error. So, if you would like to save time and work in a better and different way, then you can go for the short codes.  These codes are perfect for the thesis theme and you would really enjoy working with them. Read through to know how to create WordPress short codes.

WordPress Short Codes- An introduction:

The codes that are short bits and bring down the use of HTML strings are short codes, and these can be placed across the site. The short codes can be created for inserting a call to action button, display Google ad sense ad and even you can create content on multiple columns without the need of any HTML mark up. The codes are wrapped in square brackets.

Creating WordPress Short Code:

When you want to create short codes for your site, you need to spend some time in preparing for the same.  This is essential as this saves time in the long run. You need to begin with opening the customs_fucntions.php file and then open the custom.css file.

function<Button($atts, $content = null) {

extract(shortcode_atts(array(‘link’ => ‘#’), $atts));

return ‘<a class = “button” hreg =”’.$link. ‘”><span>’ .do_shortcode($content).

}

Add_shortcode(‘buttin’, ‘<Button’);

Paste this code on the files.

Using this code what can be achieved is, WordPress creates a new, empty function known as sButton. Then the short code is wrapped in HTML. Now, you can add your own URL to the button, in the $link position. A new short code is created as the last step. If you want to make the button stylish and impressive, use this code:

a.button{
display: inine-block;
font-size: 13 px;
font-weight: bold;
height: 31 px;
padding-right: 10 px;
color : #183f4c;
background: transparent url(images/sm_a.png) no-repeat top right;
text-decoration: none;
}

a.button:hover
color: #fff;
background-position: bottom right;
text-decoration: none;
}
a.button span {
display: block;
line-height: 14 px;
padding: 8 px 0 9 px 10 px;
background: transparent url(images/sm_span.png) no – repeat top left;
}

a.button:hover span {
color: #fff;
background-position: bottom left;
}

There are images in the custom thesis folder, choose any 2 of them and upload the images.

WordPress codes for Widgets:

If you are not a techie person or if you are not keen on seeing too much of codes, then the codes are going to create a heartache for you. Non-technical people are stunned by the sight of codes. For such people, widget support should be a blessing, but WordPress does not offer one.  However, you can get it done with some workaround. All you need to do is to add some codes to the customs_fucntions.php file:

Add_filter(‘widget text’, ‘do_shortcode’);

Now, with this simple line of code, you can make your widget accept the short codes. This takes very less space and very less time. When you have used these codes, you can see that the functionalities that make the site easy to use are loaded to your site now.

Written by

The author didnt add any Information to his profile yet