WordPress Shortcodes add built-in style

This is the tenth and final blog post in a series of blogs for those who would like to know more about what is going on behind the scenes and try some basic HTML coding for themselves. Once you learn the basics of coding, you will find that it opens up many possible options for your content formatting.

If you have not read the first post in this topic, you can find it here: Basic HTML Coding Options for WordPress

We highly recommend that you start with the first post in the series if you are new to HTML coding.

In this post we will introduce you to WordPress theme shortcodes, and explain how to insert them into a page or post. Theme shortcodes are elements that you can add to a page with a pre-defined style. These elements include buttons, columns, stylized boxes, and more. In essence, theme shortcodes provide an easy and user-friendly way of adding a variety of elements to a page or post.

There are two things you will need to know in order to start using theme shortcodes. First, every WordPress theme offers a different set of shortcodes available. Because of this, if you manage multiple sites, you may find different shortcode options. Second, shortcodes will place an “HTML-like” tag into the document once you are done setting it up.

You will find that the tags use the [ and ] symbols in place of the < and > symbols. So the tags are set up something like this:

[column] Stuff within the column. [/column]

These tags will be automatically generated when you use the shortcode generator. You can tell the shortcodes by the [ and ] surrounding them.

To use shortcodes you will need to find the shortcodes option on your editor page. You might have a link like the one below that simply says “shortcodes”, or you may have an icon or button that brings up shortcode options. Again, that will vary based on the WordPress theme your site uses.

Mikes_blog_10a

 

When you click the shortcode link, it will bring up a list of shortcode options in a pop-up window.

Mikes_blog_10b

 

 

 

Mikes_blog_10c

When you select “Insert shortcode” it will set it all up for you in your page or post editor box. All of the attributes are automatically generated based on your selections.

The code for this button example would look like the code below:

[ button link=”http://www.artunlimitedusa.com” color=”default” target=”_blank” gradient_colors=”|” gradient_hover_colors=”|” border_width=”1px” icon=”fa-thumbs-o-up” icon_divider=”yes” icon_position=”left” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”left”]Click for Art Unlimited[/button ]

Click for Art Unlimited

It is a good idea to practice with these shortcodes on a test or sample page. With a little practice, you will be able to create a lot of great variety and options for your pages and posts.

Share this post:
Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInEmail this to someone