Shortcodes are basically WordPress specific code that enables you to activate or place custom plugins code. For example if you wish to place a ‘Contact Us’ form on your website you would have to design it yourself in a ‘page’ in WordPress since there is no other option in the default installation of WordPress.
Alternatively you can install a plugin to make a contact form on your website. A plugin by the name of Contact Form 7 is very popular for the job. This allows you to create a form with all the bells and whistles and produces a short code which links to the form you have created. Then all you need to do is place that short code on your page and you will have yourself a very good contact form.
To start with you will need to install the Cherry plugin for the sake of this article and so that you understand the workings of a short code with the Cherry Framework in WordPress. It can be downloaded from the link:
Now follow the steps mentioned below to understand the shortcodes.
- You need to go to the admin panel of your WordPress installation and login.
- Then from the admin menu select either post or page section.
- Focus on the text editor and set the editing mode to ‘Visual’ from the right side if it is not already so.
- Now click on the shortcode button located in the visual editor as show in the image below.
- The short codes are divided into a few groups.
- Dynamic – mainly for content output
- Grid Columns – for grid forming.
- Elements – content forming elements.
- Other – these are the additional advanced elements for content forming.
- Details about the major shortcode options.
Post Grid: This option displays the standard and custom posts in table view with an adjustable number of columns and rows. Once you actually select this option it will open up a light box with a few options. To make things easier, each of the options listed has a short description as well. Once you have entered all the options as per your requirements you can simply press the button insert shortcode. This will place a shortcode in the content space of your page which may look like this:
[posts_grid columns=”5″ rows=”2″ order_by=”date” order=”DESC” meta=”yes” link=”yes”]
It must be evident from looking at the shortcode above that I have not entered many options, but if you do they will be listed in the shortcode above.
Post List: This option displays standard and custom posts options as well but on the blog page.
Mini Post Grid: This is a compact version of the ‘Post Grid’ shortcode. Again it is possible to configure the columns and rows. However the usage is more for thumbnails than anything else.
Mini Post List: This is a compact version of the ‘Post List’ shortcode. This too is used for thumbnails.
Recent Posts: This option displays the recent posts which you can configure with several options like post type, post amount, button title to name a few.
Recent Testimonials: This option displays the specific number of Testimonials custom post type posts. It also includes the ability to show and hide post images and manage the word count.
Banner: This is used to display a block with static text or an image or both.
Comments: This simply displays the latest comments.
PostCycle: A slider view of the posts is enabled with this option. (more of a mini slider).
Carousel: If you prefer your posts in the carousel view, use this option. This does have several additional options as well.
Roundabout: This converts a static HTML elements into highly customizable turntable type of interactive elements.
Service Box: This one is used to display information blocks that include title, icon, text and button. You first upload your images to the images directory in the theme folder and then used this shortcode to display the information.
Hero Unit: This one is used to display major website information, promotions and more. This needs to be located on the main website page right under the header.
Categories: These are used to display the category list both from blog posts as well as the custom posts.
Tags: The tags can be displayed using this shortcode.
Grid Columns: This one is used to form a structural grid element using the shortcode [span#] [/span#],where # is the number between 1 to 12. You will need to wrap the span shortcode with the row shortcode as shown below:
[row] [span6] <the content> [/span6] [span6] ..<more content> [/span6] [/row] You also need to select Full width Page for the template on the right side under Page Attributes.
Fluid Columns: This one is used to form a structural grid element and the width is delineated with %. While forming the fluid grid it is essential to wrap the grid elements with [row_fluid] shortcode.
Multiple Columns: This makes content forming easier by using grid variants.
Label: This is used to display a label with pre defined styling like mentioned here [label style=”default”]label[/label]
Highlight: This is used to highlight a chosen text fragment.
Button: This is used to insert a button with various display settings like style, size, icon etc.
DropCap: This one is used to display a dropped capital letter
Blockquote: This is used to display a quotation.
The Lists: This short code set is used to display various lists stylizations.
Video Preview: The video preview is used to insert a video preview as the name suggests. The video can be loaded from off-site services like youtube and vimeo or from your website itself by hosting it.
The Alert Boxes: This is a very handy shortcode used to display service messages.
Tabs Shortcode: This one is used to display the content arranged into tabs where the tabs may contain either static or dynamic content.
Accordion: As the name suggests this is used to display accordion fold up panels with tiles.
Table: This is simply used to display tables.
Google map: Google maps can be displayed using this shortcode and a link can be generated to the desired location.
WordPress is a very versatile open source software, capable of many different implementations, like blog, content management, e commerce to name a few. Although it may be tough to initially setup the website with your desired layout and functionality it is not easy to maintain. For the initial setup it is easy to hire WordPress Web Developers to do the job. Alakmalak is one such company that is involved in WordPress Web Development which could help you out. Once you do have your website developed it is possible to keep adding new pages and posts using the tools provided by WordPress as explained in this article.
Why Choose Alakmalak As a Your Growth Partner?
Alakmalak is a Web Development Company In India that offers services for several technologies. There have been around for a very long time and have developed over 2500 projects for clients all around the world. They have highly skilled web developers with a great deal of experience.
- How to use shortcodes in wordpress of cherry framework?