Description
A plugins bundle
First of all, thank you for your purchase! ...and excuse me for my poor English.
Shortcodelic actually is a plugins bundle, because puts in the same plugin lots of features that serve to create a cutting edge theme, with slideshows, tabs, accordions, comparative tables, advanced Google maps, progress bars, font icons etc.
How it works
Shortcodelic provides two kinds of shortcodes: one kind is a "simple" shortcode, where all the values that the plugin needs to print something on the frontend are passed as values of the shortcode itself:
[shortcodelic-progress unit="%" percent="25" barcolor="#34b96c" trackcolor="#eeeeee" style="pie" linewidth="20" size="130" animate="2000"]Design[/shortcodelic-progress]
The other kind is different, because all the values the plugin needs to print the result on the frontend are stored in the custom fields of the post/page where you generate the shortcode itself:
[shortcodelic-slideshow slideshow="2"]
In this case the only value that the shortcode passes is the ID of the slideshow ("2"). The only things that the plugin needs to print the result are the ID of the shortcode and the ID of the post (if not specified the ID of the post will be taken from the post itself).
If you want to take a particular shortcode generated on a post or page and display it on a different page, you only need to copy and paste the shortcode from the shortcode generator box, where is also specified the ID of the post:
[shortcodelic-slideshow postid="42" slideshow="2"]
In this case you can display a particular shortcode on all the pages, despite of the page or post you used to generate it. Just remember that, if you delete the post/page where you taken your shortcode from, you will delete the values of the shortcode too.
Installation
How to install the plugin
The file you downloaded from CodeCanyon contains three folders and one file:
- Assets
- Documentation (that contains this page too)
- shortcodelic folder
- shortcodelic.zip
You have two options to install the plugin:
- by using an FTP client (FileZilla, Dreamweaver, FireFTP or similar) upload the "shortcodelic" folder to
your_root / wp-content / plugins - directly from the Wordpress administration, go to "Plugins" → "Add new" and click the "Upload" tab (the second one on the top of the screen). With the browse button find the aforementioned "shortcodelic.zip" file, then click "Install now". After intalling the plugin activate it. That's all!
Admin panel
Very general
On this section you can decide to enable AJAX to save the data. This option is already enabled by default, since using AJAX to save data allows to not reload the page each time you click the "Save options" button and, for this reason, it makes you save time.
But if you encounter any problem (maybe a conflict with another plugin or with a setting of your server) just switch this checkbox off.
The other checkbox available on this page allows you to remove any trace of the plugin after unistalling it. With "uninstall" I mean deactivate it and deleting it by using the red link "Delete" that appears below the disabled plugin.
This feature, if enabled, will remove all the options created by Shortcodelic and saved in the database and also all the shortcodes you put into your posts/pages (from the published posts and pages only, not from the revisions or the auto-saved ones).
N.B.: since this option manages your database, I recommend to run it only if strictly necessary and after making a backup of your database itself, if possible. It haven't had any problem during the beta testing, but as more backups as you can are always recommended in these cases.
Default settings
Below the tab "Very General" you can find other tabs with the names of the available shortcodes. By entering these tabs you'll be able to set the default options for each kind of shortcode:
- Slideshows
- Tabs and accordions
- Tables
- Carousels
- Tooltips
- Progress bars
But the tabs Buttons and Text Boxes are a little different, since you have to create some custom styles by naming them: the name you use will be the CSS class of a particular button or a particular text box. Each class will define different text colors, effects, background, borders etc. and you'll be able to apply those classes from the page/post backend when you insert the shortcode into the text editor.
Compile CSS file
On this section you can type your custom CSS style and upload it online at the same time you saved it into the database.
The plugin generates a file called shortcodelic_compiled.css and, by using native Wordpress functions, it attempts to upload it to:
wp-content/plugins/shortcodelic/css/shortcodelic_compiled.css
Do not edit the CSS file manually, because it is overridden each time you click the "Save" button on the admin panel.
Shortcodes
Helpers
On the page/post list, in the backend, is visible a green check sign or a grey error sign. They are helper: the first one indicates that some shortcodes are available on that page/page so pay attention before delete it. The second one indicates that no shortcode are stored on that page/post.
Slideshows
Slideshows belong to the kind of shortcodes saved as custom boxes (more info above). To achieve the slideshow generator you have to click the "gear" icon on the visual editor and select the option "Slideshow" from the box you open.
Many of the explanations are available on the label of each field, in the slideshow generator. You can create a slideshow from scratch or select among ones you've created on that post (after selecting them you will also able to delete them or clone them).
You can select the layout:
- "fluid" the height and width you set for the slideshow will be used just to get the ratio of the slideshow, that will fit its container width
- "fitting" the height and width values will be used just for the preview and for calculating the position of the elements that stays on the slide background, but the slideshow will fit its container width and height
- "fixed width and height" the height and the width of the slides will have exactly the values you set on the shortcode generator
- "fixed width and auto height" the height of the slides will be calculated from the original ratio of the background images
For the effects are available multiple selections and you can decide to select a different effect for touchscreen devices only.
You can set many other options, colors etc. (I think the labels above each field are quite explanatory).
After adding some slides you can enter and edit each slide by clicking the "pencil" icon on it. You can change the background image by selecting it from the media library (or by uploading it into the media library). External URL are not allowed to avoid issue during the export/import process.
You can add some options different from the default ones: such as a different timeout, or the effects. You can add a link to make your slideshow clickable and also add a video from Vimeo, YouTube etc. (only external resources).
You can also add some elements to make appear during the timeout period. By clicking the button "Preview" a preview of the slide will be visible and you can drag and drop the element you added on the slide. By clicking the "pencil" icon on each element you can decide the moment when a particular element appears on the slide and disappears, the effect, the durations and, of course, the content of the element itself (images, text, html, videos). You can also decide at what size you want to display or hide the element itself: for instance you can dedice to display an element only if your slideshow is wider that 768 pixels (an old iPad portrai view) and make something else visible on small screen only.
Tabs & accordions
Tabs and accordions belong to the kind of shortcodes saved as custom boxes (more info above). To achieve the tabs generator you have to click the "gear" icon on the visual editor and select the option "Tabs & accordions" from the box you open.
You can create a group of tabs or accordions from scratch or select among ones you've created on that post (after selecting them you will also able to delete them or clone them).
The basis are the same for tabs and accordions, same elements: you can add some tabs in the right area, enter them by clicking the "pencil" icon over them (add here a title and some content for your tabs and, if you want, icons for the open and closed states), sort them etc. You can also decide which panel will active on loading by clicking the rounded square over the tabs (a check sign will appear).
On the left area you can decide if display this tabs as normal tabs, accordions, tabs with a leftside navigation or a rightside navigation.
You can also decide a breakpoint, an amount of pixels under which display tabs as accordion, useful for responsive layouts.
Transition effects are available (you can also select more than one effect, in this case they will be applied randomly) and you can also set the "easing" and the "duration" of them.
Data tables
Data tables belong to the kind of shortcodes saved as custom boxes (more info above). To achieve the tables generator you have to click the "gear" icon on the visual editor and select the option "Data tables" from the box you open.
You can create a table from scratch or select among ones you've created on that post (after selecting them you will also able to delete them or clone them).
You can select the style of the table: a classic basic data table or a pricing table.
You can also decide a breakpoint, an amount of pixels under which display the table columns one below each other.
By clicking "Add column" button you can add as many columns as you want. Enter them by clicking the "pencil" icon over them and add cells to each column. You can also delete, delete or clone the columns, and, by clicking the square icon, determine if the column will have the class "highlighted" (available for pricing tables only).
After adding cells to a column you'll be able to edit the cells themselves, drag them, clone and delete them. In the edit area of each cell is available a text editor, a select box to set the class of the cell (even if styles for these classes are available for pricing table only) and an input text to add custom CSS classes.
Advanced Google Maps
Adcanced Google maps belong to the kind of shortcodes saved as custom boxes (more info above). To achieve the maps generator you have to click the "gear" icon on the visual editor and select the option "Maps" from the box you open.
You can create a map from scratch or select among ones you've created on that post (after selecting them you will also able to delete them or clone them).
The default values include the latitude and longitude of the Colosseum (the Flavian Amphitheatre in Rome). To get latitude and longitute of a place on Google Maps just right click on a point on the map and select "What's here" from the context menu. Please take a look to this link: http://www.wikihow.com/Get-Longitude-and-Latitude-from-Google-Maps.
You can decide the ratio of the maps by setting its width and height, decide the type (roadmap, terrain, hybrid, satellite and also streetview), other parameters like zoom (for normal maps), pitch and heading (for street views), you can customize the style of maps by pasting your JSON code (here you can find a useful generator: http://www.evoluted.net/thinktank/web-design/custom-google-maps-style-tool).
You can move the controls over the map, add a route and of course add multiple markes. Custom markers are allowed and drop effect is available.
Carousels
Carousels belong to the kind of shortcodes saved as custom boxes (more info above). To achieve the carousel generator you have to click the "gear" icon on the visual editor and select the option "Carousels" from the box you open.
You can create a carousel from scratch or select among ones you've created on that post (after selecting them you will also able to delete them or clone them).
Carousels use a custom version of BXSlider on the frontend. On the backend you can decide the maximum and minimum of slides to display when you resize the page. You can set the width of slides, the space between them, timeout, speed, autoplay, pause on hover and to show or not the commands.
After adding some slides (you can also add many images at once) you can enter and edit each slide by clicking the "pencil" icon on it. Here you can decide to open the full-width image on click or make it open a different URL and change the background image by selecting it from the media library (or by uploading it into the media library). External URL are not allowed to avoid issue during the export/import process.
Carousels from posts
Carousels from posts belong to the kind of shortcodes saved as custom boxes (more info above). To achieve the carousel generator you have to click the "gear" icon on the visual editor and select the option "Carousels from posts" from the box you open.
You can create a carousel from scratch or select among ones you've created on that post (after selecting them you will also able to delete them or clone them).
Carousels use a custom version of BXSlider on the frontend. On the backend you can decide (together with the maximum and minimum of slides to display when you resize the page, the width of slides, the space between them, timeout, speed, autoplay, pause on hover and to show or not the commands) the blog categories to include in the loop, the posts to include or exclude, the order. Then you can decide to display the title of the posts, the excerpt and the featured image and also the size of the featured image (it means the real size, but the plugin will resize it to reflect the width you set on the field above).
Other shortcodes
With "other shortcodes" I mean the shortcodes that don't belong to the kind of shortcodes saved as custom boxes (more info above). To generate these shortcodes simply click the icon on the visual editor:
- Font icons (the "flag" icon): you can select among the sets available on Fontello.com. An search bar will help you to find the icons among the about 2.000 available. You can also set the color, the background, the size and the style
- Tooltips (the "baloon" icon, available only if you select some text or if you focus inside a link or a span): it uses Tooltipster on the frontend. On the backend you can type some text to display on the tooltip, the effect to apply to the tooltip, the position relative to the target of the tooltip, the maximum width of the tooltip or if you want that is is interactive (in this case you'll be able to stay with the mouse over the tooltip and click links inside it, select text etc.)
- Progress bars and pies (the "chart pie" icon): on the frontend has been use Chratjs plugin for pies only. On the backend you can type a label, the measure unit, the percentage (maximum is 100, of course), colors, styles, custom CSS classes and animations
- Buttons (the "button" icon, available only if you select some text or if you focus inside a link or a span): you can type a URL, if you aren't edit a link that already has got a URL, decide the style among the ones you created on the custom admin panel, decide the font-size, add custom CSS classes and a featured icon
- Text boxes (the "box" icon): besides the ability to add text, of course, you can add a featured icon, decide the position of the icon itself, select a style among the ones you created on the custom admin panel, display a "dismiss" button (in this case an ID will be added to the shortcode and all the users that will hide the text box by clicking the dismiss button won't be able to see the box anymore until the ID will be changed or their cookies will be deleted).
N.B.: there is a last button on the editor, it serves to remove spans that tinyMCE auto-generated on some browsers when you copy, paste and, in particular, delete text (the forum of Wordpress is full of people who report this issue, for instance http://wordpress.org/support/topic/strange-behaviour-making-lists-in-the-visual-editor). When one of this span is added by tinyMCE, Shortcodelic displays the text inside "less than" (<) and "greater than" (>) signs, a dotted border and a light-yellow background.