Review: How To Add 100+ Shortcodes – Styles with Shortcodes for WordPress

July 11, 2013 · 1 comment

by Lars

It is a known fact that a great content and a professional design help separate a website from the competition. Taking your website to the next level and realizing all the good ideas you have, however, often requires serious effort and web development experience. Since many webmasters are not experienced web developers, adding new web page elements that fit well into the existing website template can quite be hard or costly.

The need for codeless flexibility and functional extensions is probably one of the reason why many webmasters choose WordPress as their publishing platform. Many modern themes, known as multi-purpose themes, already have page builders and shortcode libraries build and this typically empowers webmasters to realize their idea and plans themselves.

If you are using a theme on your WordPress website that lack key page elements there are options as well to get you fully up to speed. The solution is using a shortcode plugin such as Styles with Shortcodes for WordPress that enables you to implement all kinds of styles and page elements. Please note that this is a premium option and that you can find free plugins that add shortcodes into your WordPress website. I belevive, however, that this plugin is one of the best and most feature rich currently available.

The WordPress shortcode system is very powerful and most plugins today use shortcodes for integrating their output into pages and posts. WordPress user love them because they can add the plugin output wherever they like by simply pasting a shortcode into the editor or by using a shortcode wizard.

Styles with Shortcodes plugin is an extensive shortcode plugin that gives you tons of options to choose from when it comes to improving your content. The plugin includes over 100 shortcodes covering enhancements for text, images, posts, pages or even social media. It has many categories organized neatly to help you search the right shortcode for your content.

Another great thing about his plugin is that it enables you to create your own shortcode and categories to reuse often used code snippets the smart way. It also allows you to import and export existing shortcodes to the plugin itself. Let us take a closer look at this plugin’s capabilities.


ElegantThemes
ThemeForest

Advertisement Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

The settings settings page of Styles with Shortcodes is integrated within the WP Dashboard.

Styles-with-Shortcodes-Plugin-in-Dashboard-

You can find its settings in Options page.

Shortcodes-Options-Page[1]

Shortcodes Options Page (Menus collapsed)

I think it is too much to go through all the settings. However, note how it is organized with instructions on the right.

General-Settings-Page

General Settings Tab

To search and view available shortcodes, you can browse them in Shortcodes page.

search-shortcodes

Shortcodes List Page

The plugin has already sorted shortcodes into categories, however, you can rearrange them or add a new Category for an existing or custom shortcode in categories page. Plus, you can add a description about the category and a subcategory for further classification of your shortcodes.

Looking into the definition of a specific shortcode we can see the way it is implemented and we can also change it if needed. Here we see one parameter for the box size. It is easy to add more parameters as needed.

bloe-colored-box-details

Shortcode parameters

On the same page we find definition for the shortcode and the implementation. This is a simple shortcode that only consist of a small snippet of HTML and CSS. There are many other options available and you can also insert JavaScript and PHP code.

shortcode-details1

Shortcode implementation in HTML

shortcode-css

Shortcode CSS implamentation.

To insert shortcode into a post or page, look for the Add Shortcode button within the Editor Menu area.

insert-shortcode

Add Shortcode Button in Post or Page Editor

After pressing the Add Shortcode button, another window will appear prompting you to choose a category for the shortcode you’re going to use as well as the shortcode itself and some settings for the shortcode like size and color. in this case, we used Colored Boxes with Blue Box shortcode.

Adding Shortcode to Post

Adding Shortcode to Post

This is the result of the inserted shortcode in the post.

result-testing-shortcode

Colored Box with Close shortcode (blue) with text in Post

There are tons of other shortcodes to choose from such as  Accordion, Blockquotes, Buttons, Maps, Social integration, Tabs, Tooltips, Toggles, visual columns and many more.

Other-Sample-Shortcodes

Other Sample Shortcodes: Tabs with Columns and Accordion

Styles with Shortcodes for WordPress plugin is a very useful plugin for novice WordPress users who want to style their site with no knowledge of CSS and HTML. It gives you many options for adding visual elements. For expert WordPress users, this plugin saves time and energy and helps organize common tasks. There are useful shortode generators out there but what makes this plugin stand out is that the simple button integrated within the Editor menu and the great wizard that helps insert the code immediately into the content. You can view more shortcode samples and information about the plugin here.

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

{ 1 comment… read it below or add one }

kidney disease symptoms July 14, 2013 at 5:52 pm

Hi, I’ve been a lurker around your blog for a few months. I love this article and your entire site! Looking forward to read more!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics