Better Call Slack

Better Call Slack is a plugin that will monitor everything aspect of your WordPress site and notify you in the well known Slack application. Slack is a communication platform for teams and companies. You can Learn more about Slack and how you can use it here

Installation

To install the plugin simply navigate to Plugins > Add New in your WordPress dashboard and search for better call slack!

Next click the Install Now button and wait for the plugin to be installed. Once the plugin is installed you can click the Activate button.

That’s it. The plugin is installed and activated.

 

Setting Up Slack Incoming Webhooks

This section assumes you have already a Workspace in Slack. If you dont have please do, its free here.

Incoming Webhooks are a simple way to post messages from external sources including your WordPress installation into Slack.  We will send a normal HTTP request with a JSON protocol with some simple notification message. You can also use Incoming Webhooks to display rich format messages that include a link or even an emoji.

We will first set up an incoming webhook integration in your Slack workspace and then connect it with Better Call Slack plugin. In general we will be

  1. Sending messages
  2. Adding links
  3. Use advanced formatting

First navigate here https://my.slack.com/services/new/incoming-webhook/

Select the channel the messages will be post to and click on the Add Incoming WebHooks integration.  In the next screen you can see your WebHook URL that you will use in the Plugin.

You can also change in the same page the Integration Settings of the WebHook to your preference.

 

  1. You can select in Slack channel that you want your notifications to appear.
  2. You can get the WebHook URL or regenerate it.
  3. You can use a Description label for your web hook.
  4. You can customize the bot (user) the the messages will attach to.
  5. Upload a custom image of emoji for your notification bot.

 

Setting Up General Plugin Settings

If you want to add/edit your Global Plugin Settings navigate to SettingsBetter Call Slack. There you will get the following screen

Here you can

  1. Add your default Webhook URL.
  2. Add your bot name.
  3. Add an Emoji for your bot. This must be wrapped in colons ( : ) to work.

 

Creating a new Notification.

First navigate to Slack NotificationsAdd New Notification.

Then you will get a screen like this

Here you can

  1. Add a title for your Notification
  2. Change the Notification Settings  / Triggers
  3.  Publish your notification

Notification Settings

Configuration

Here you will need to add the basic settings for your Slack notifications

  1. Add your Web Hook URL
  2. Add the Channel you wish to notify
  3. Add your bot name
  4. Add your bot emoji (always in between colons : to work)
  5. Change the priority of your notification . This will change the color and style of your message. For example

 

Notification Triggers

When creating a new Notification you will need to setup the triggers as well. We have provided a variety of trigger sets and we will update them regularly to cover all possible scenarios in a WordPress installation.

Here you can:

  1. Send a notification when a new WordPress update is available. When checked you will get this Screen

    Here you can customize the message and use the :core_version: tag to specify the version of the update
  2. Triggers when a User is registered / removed / or changed its role.

    Again you can change the default message and include the :username: tag to include the new username. Some extra tags can be used like :old_role: and :new_role: when a user roles is changed.
  3. Triggers when a new theme is installed or when the theme has an update available. When an option is checked you will get this Screen

    Here you can change the custom description and include the :theme_name:  tag that was updated or installed. You can use global tags also like :current_user:
  4. Sends a notification when a status of a post  / custom post type has changed. When an option is checked you will get this Screen

    Here you can change the message when a new post is altered / published. You can use the :post_type:  tag to specify the post type (product, menu item etc), the :title: of your post and the status tags :old_status: and :new_status: to send the status changed. You can include the :current_user: tag to actually send the name of the user that made this change.
  5. Triggers when a new comment is submitted or when a comment is approved or not. Checking this option will allow you to change the notification to your preference.

    You can change the message using :post_type: and :title: tags to send information on which post the comment was added.

Exclude Posts and Custom Post types

In this section you can exclude a post type you dont want to trigger any of the notification settings.

Global Placeholders and Emoji

Using placeholders in several occasions will help you send with data that are valuable for your team to actually understand the notification. We provided some generic / global placeholder you can use in any text notification. These are

  • :site_url:  – Your site URL
  • :site_name: – Your site Name
  • :current_user: – The current user that triggered the notification

You can send also emojis with your message notifications! These emojis must be be wrapped like Global Placeholders in colons like this :unicorn_face:

Elements Plus

Installation

To install the plugin simply navigate to Plugins > Add New in your WordPress dashboard and search for Elements Plus!

Next click the Install Now button and wait for the plugin to be installed. Once the plugin is installed you can click the Activate button.

That’s it. The plugin is installed and activated.

Make sure you have Already installed and activated Elementor plugin.

Enabling your Elements

Navigate to ElementorElements Plus! and enable  or disable your new custom elements.

Make sure if you are using Google Maps Plus! to generate a Google Maps API key like described here and paste it in your Google Maps API key field.

Elements

While editing a post /page or custom post type with Elementor you will notice a new section called Elements Plus in which you can find your new toolset.

Label Plus!

With Label Plus you can create a simple label tag with custom alignment and an icon.

  1. Add your custom text.
  2. Select an alignment.
  3. Change the icon to your preference.

Under the Style tab you can control the appearance of your label like you would do in any Elementor’s element.

Button Plus!

With Button Plus you can create a simple button with multiple lines and control its style and behaviour.

  1. You can select the type of your button.
  2. Select the first and second text line.
  3. Add a link
  4. Control whether you want to open in a new window and all a nofollow rel.
  5. Change the alignment.
  6. Control the button size.

Under the Style tab you can control the appearance of the button itself and your button text.

With Gallery Plus you can easily add a beautiful gallery with your images and customize it.

  1. Select your images by clicking on ADD IMAGES button.
  2. Select the image size for your images.
  3. Control whether you want to link to a media file, an attachment page or nowhere.
  4. Change the row height between the images.
  5. Change image margins.
  6. Control the looks of the last row
  7. Randomize the order of your images.

In your Style tab you can control your image and image caption appearance.

Call to Action Plus!

With Call to Action Plus you can create awesome hero and call to action section with your content.

  1. Select your button type.
  2. Select your text for the first and second line.
  3. Add your button text.
  4. Change the button link.
  5. Control whether you want to open in a new window and all a nofollow rel.
  6. Change the Alignment.
  7. Change the button Size.

In your Style Tab

You can control your Button, CTA Text Line 1 and CTA Text Line 2 appearance.

Google Maps Plus!

With Google Maps Plus you can add a Google Map anywhere you wish and style it according to your preference.

 

  1. Add coordinates.
  2. Change the Zoom Level.
  3. Change the Height of the map.
  4. Upload a custom marker icon.
  5. Add custom text to the map’s infobox.
  6. Select one of the preloaded custom map styles.
  7. Paste a style of your choosing from SnazzyMaps.
  8. Prevent scrolling on the map.

Youtube Slideshow Plus!

With Youtube Slideshow Plus! you can add a cool video slider everywhere.

 
  1. Add a new Video Item.
  2. Select a Video URL.
  3. Add some text for your item.
  4. Change the link options.

  5. Change navigation slider position.

AudioIgniter Plus!

Now you can use our Free AudioIgniter Player as an Elementor Module. AudioIgniter lets you create music playlists and embed them in your WordPress posts, pages or custom post types. By using the standard WordPress media upload functionality, you can create new audio playlists in minutes. You can use AudioIgniter to stream your radio show too!

  1. Select your playlist.
  2. Change the Colors of your AudioIgniter player.

Preloader Plus!

Adding a preloader in your pages will never be easier. First add the preloaded element inside your page.

Select from the Content tab your favorite animated icon and toggle the preview for  your preloader element.

You can easily change the Icon color and page background from the Style Tab.

Instagram Plus!

Display the most recent images from an Instagram feed. You will need to have WP Instagram Widget Plugin installed and activated first.

  1. Add your Instagram username.
  2. Choose the number of Instagram Photos.
  3. Select image size.
  4. Change the Column Layout.
  5. Select the link behavior.

You can also change the Style of your Instagram Module, by selecting the Widget Background Color and the padding between images.

Elements Plus! Tooltip

When enabling this module, in you selected element under the Content Tab you will get a new tooltip section. Here you can enable the custom tooltip and change its settings!

  1. You can enable or disable tooltip for the selected element.
  2. You can change the Tooltip text
  3. You can change various tooltip settings like colors, typography etc.

Scheduled Visibility

Enabling this setting will add a new section for all your Elementor’s Modules under the Advanced Tab. This will allow you to render or not an element based on a date trigger!

Add any element you wish, let’s say a simple heading element in your Elementor canvas. Then select it and navigate to the Advanced tab

There you will find this Scheduled visibility options

We can then select the date that our Heading Element (or any element)  will show, and the date it will hide! You can use these triggers one by one or both.

Icon Plus

An icon element similar to the one bundled with Elementor, with custom icon sets. After enabling Icons Plus module you can add our custom icon in your content.

You can select the icon and change various settings on the icon behaviour from the widget’s content tab.

  1. Change the default style of the icon.
  2. Select the icon you want.
  3. Select the URL you want the icon to point to.
  4. Select the Icon Alignment

You can also change the default color, size and rotation, as well as the hover animation and color of your icon, from the Style tab

  1. Change the primary color of the icon.
  2. Select its Size.
  3. Select its Rotation
  4. Change the hover primary color
  5. Select an animation when hovered.

EventIgniter

Installing your plugin

To install the plugin simply navigate to Plugins Add New in your WordPress dashboard and click on “Upload Plugin” then select the plugin archive and upload your Plugin.

Next click the Install Now button and wait for the plugin to be installed. Once the plugin is installed you can click the Activate button.

That’s it. The plugin is installed and activated.

Creating a venue

After installing Event Igniter you will notice two new menu items in your WordPress Admin Area.
Before creating an actual event we will need to add the place that will host it. So navigate to VenuesAdd New in order to add your new place.

  1. Add your venue name.
  2. Add the Address of your Venue.
  3. Add a postcode.
  4. Select a Location. We have included several countries, but if you wish you can add your own location from VenuesLocations, just like you would add a post category.
  5. Save your Venue.

Creating an Event

When you are finished setting your Venues, it’s time to create your first Event. Head over to EventsAdd New.

Event Options

  1. Add your Event Name
  2. Add the Event Date (yyyy-mm-dd)
  3. Select the Starting Time
  4. Select the Ending Time
  5. Select the Venue that your Event will take place (You can add a new venue from VenuesAdd New)
  6. Add a simple text that will appear before the starting time. For instance: Doors open: 16:00
  7. Add a Price for your event
  8. Select a frequency if you need to Repeat your Event ( More on Recurring Options)
  9. Create buttons with a text and a URL that will appear when your event is rendered.
  10. Add an Event Category. You can Add Categories for your Events under EventsCategories
  11. After Saving for the first time you can check your Event Status there.
  12. Publish your Event

 

Sold Out / Cancelled Events

After saving your Event you will notice a new Event Dates section displaying one date or a list of dates.

In this section you can mark your Event as Sold Out or Cancelled in a certain date or dates if you have a recurring Event.

Recurring Options

You can select from a variety of scenarios if your event is recurrent. For this we are going to examine them one by one. First select the frequency of your event.

Weekends

  1. This event will repeat only in Weekends.
  2. You can choose the dates you want to exclude separated by comma.
  3. Choose the End date that the event will stop recurring.

WeekDays

  1. This event will repeat in all week days.
  2. You can choose the dates you want to exclude separated by comma.
  3. Choose the End date that the event will stop recurring.

Daily

  1. This event will repeat Daily
  2. Choose the days you want to repeat the event.
  3. You can choose the dates you want to exclude separated by comma.
  4. Choose the End date that the event will stop recurring.

Weekly

  1. This event will repeat Weekly.
  2. Choose the weeks you want to repeat the event.
  3. Select the Days of the Week you want to repeat the event.
  4. You can choose the dates you want to exclude separated by comma.
  5. Choose the End date that the event will stop recurring.

Monthly

  1. This event will repeat Monthly.
  2. Choose the Months you want to repeat the event.
  3. Choose the First, Second, Third, Fourth or Last occurrence of the day you want to repeat the event.
  4. You can choose the dates you want to exclude separated by comma.
  5. Choose the End date that the event will stop recurring.

Yearly

  1. This event will repeat Yearly.
  2. Choose the Years you want to repeat the event.
  3. You can choose the dates you want to exclude separated by comma.
  4. Choose the End Date that the event will stop recurring

Displaying Your Events

Shortcodes

Paste the plugins shortcodes in any post or page and save, that’s it, you can now see your events in action.
TIP: You can use your shortcodes in in a standard text widget. If you don’t see your events after saving the widget you will need to enable shortcodes in text widgets. Have a look at this article on how to do this.

  • Show Events by ID : Only show events with certain Comma-separated IDs. If you have troubles finding the ID’s have a look here.
    [events ids="1,3,5"]
  • Show Events by Categories: Only show events that belong to these categories. Comma-separated event category IDs.
    [events categories="1,3,5"]
  • Exclude Events: Show all events except these. Use Comma-separated event IDs. Ignored when combined with the ids=”” parameter
    [events exclude="1,3,5"]
  • Order Events by  by date venue or title.
    [events orderby="date"] or [events orderby="venue"] or [events orderby="title "]
    
  • Sorting Events : Affects the orderby parameter. You can sort your events using ASC  ( ascending  and default) or DESC (descending).
    [events order="ASC"]


    Expected behaviour when sorting:

    1. When orderby=”date”, events are ordered by the event date ASC/DESC depending on order=””, and then by the event title ASC.
    2. When orderby=”title”, events are ordered by the event title ASC/DESC depending on order=””, and then by the event date ASC.
    3. When orderby=”venue”, events are ordered by the venue id ASC/DESC depending on order=””, and then by the event date ASC, and then by the event title ASC/DESC depending on order=””
  • Show Events from certain Venues: Only show events that have assigned the following venue IDs.
    [events venues="1,3,5"]
  • Show Events from certain Locations: Only show events that have assigned venues that belong to the following locations. Use Comma-separated location taxonomy slugs.
    [events location="gr, uk, us"]
  • Limit Events: List up to that many events. Use positive integer numbers, or -1 for unlimited (default)
    [events limit="15"]

Disabling Event Features

  • Don’t show the event titles.
    [events disableEventTitle]
    
  • Don’t show the venue titles.
    [events disableVenueTitle]
    
  • Don’t show the venue address.
    [events disableAddress]
    
  • Don’t show the event year.
    [events disableYear]
    
  • Don’t show the event buttons.
    [events disableButtons]
    
  • Don’t show past events.
    [events disablePastEvents]
    
  • Don’t show upcoming events.
    [events disableFutureEvents]
    
  • Don’t show the “Add to calendar” link on each event
    [events disableEventExport]
    

EventIgniter Widget

If you need a more powerful option for your Widget Areas you can use the EventIgniter-Events Widget. Navigate in AppearanceWidgets or from your Customizer under AppearanceCustomizeWidgets and place the widget in any Sidebar you want.

  1. Add your Widget Title
  2. Add your events IDs separated by a comma
  3. Or Add your event categories IDs separated by a comma
  4. Add the ID’s or events you want to exclude
  5. Add a Venue ID that you want its events to display
  6. Select a Location that you want its events to display
  7. Select the Ordering of your events
  8. Set the number of Events you want to display.
  9. Disable features that your don’t want to appear in your Event Listing

Customizing EventIgniter

You can customize EventIgniter Color Palette and typography from AppearanceCustomizeEventIgniter

General

Here you can select if you want the Event listing to have the default EventIgniter typography or use your theme’s default one.

Calendar

Here you can change the colors of the mini calendar next to your event’s information.

Event

Here you can change the colors of your event.

Next Steps

Still have questions or problems setting up your CSSIgniter Plugin? We will be happy to help you out in our support forums

MaxSlider

Plugin Installation

To install MaxSlider navigate to Plugins > Add New and search for maxslider in the search box. Once the results come back click the Install Now button.

maxslider_install

When the installation finishes click the Activate button to activate the plugin.

maxslider_activate

That’s it! MaxSlider is installed and activated.

Creating a new slider

In your WordPress dashboard navigate to MaxSlider > Add New

ms_add_new

You will be presented with the slider creation screen. Start by giving your slider a title.

ms_title

Adding slides

Now let’s create our first slide.

ms_new_slide

 

  1. Start by clicking the Upload Image box to add the slider image,
  2. next add the slider’s title,
  3. fill in the slider’s subtitle,
  4. use the input box to set the slider title’s size in px,
  5. do the same for the slider’s subtitle,
  6. modify the title’s color using the color-picker,
  7. same thing for the slider’s subtitle,
  8. fill in the text for your slider’s button,
  9. set the URL where the slider button will lead to when clicked,
  10. set the button’s background color,
  11. set the button’s text color,
  12. use the drop-down to select one of the four available button sizes,
  13. select the horizontal alignment for the slider text & button
  14. select the vertical alignment for the slider content.
  15. and finally set the background color for the slider’s content.

That’s it, you have now created your first slide. To create another one click the Add Slide button and repeat the process.

ms_add_slide

Removing slides

If you want to remove a slide just click the Remove Slide button which appears at the bottom right corner of each slide.

ms_remove_slide

Note: The remove slide button will not appear if you only have one slide in your slider.

Batch uploads

ms_batch_upload

To upload multiple images at once just click the Batch Upload button. Upload the images or select ones that are already in your media gallery and insert them. Each image will create a slide and you can then just fill in the rest of the information.

Slider Settings

Let’s take a look at the slider’s settings ( Note: these options are per-slider).

ms_slider_settings

 

  1. Here you can toggle the slider’s auto slider functionality. If you want it to only slide manually just uncheck the box.
  2. Use the drop down to switch between the available fade and slide effects,
  3. here you can set the pause between slides in milliseconds (this only applies if auto slide is enabled),
  4. The default slider height is 600px, if you want a taller or shorter slider you can configure it here, just add the number and save,
  5. Choose between dots, arrows and nothing for your slider navigation
  6. Select the desired position for the slider navigation. There are five options, the default centered and one for each corner of the slider.
  7. Set the color of the navigation arrows.
  8. Set the background color for the navigation buttons.
  9. Finally select an image size for the slider. The drop-down will list the plugin’s default image size, the image sizes for WordPress preset thumbnails and any image sizes added by themes and plugins. If you want to create custom image sizes please continue reading.

Placing the slider in a page or post

Once you are finished creating the slider you can Publish it. Next scroll down to the Shortcode metabox.

ms_shortcode

Copy the shortcode and paste it in the content on any post or page, update and you are done. Check out your new slider!

Creating custom image sizes for the slider

If you want to create a custom image size for your MaxSlider you can do that by using the Simple Image Sizes plugin.

Activate the plugin and go to Settings > Media. There you can click to add a new image size.

ms_new_thumb

Give it a name, fill in the sizes and select if you want the image to be cropped or not, then validate it.

ms_my_thumb

That’s it. Every image you upload from now on will have a thumbnail with these new dimensions. If you want your existing images to be cropped to that, scroll down and regenerate your thumbnails.

Now if you check the image size drop-down on each slider’s settings metabox you will find the new size available for selection.

ms_thumb_applied

AudioIgniter

Installation

To install the plugin simply navigate to Plugins > Add New in your WordPress dashboard and search for audioigniter

ai_install

Next click the Install Now button and wait for the plugin to be installed. Once the plugin is installed you can click the Activate button.

ai_activate

That’s it. The plugin is installed and activated.

Creating a playlist

To create a playlist navigate to Playlists > Add New Playlist and start by giving your playlist a name

ai_list_name

Adding tracks

A playlist needs some tracks, let’s see how we can add some.

In the image above you can see the Tracks metabox. Below we take a step by step approach on adding a track.

  1. We start by adding a cover. Click the placeholder image and WordPress’ media manager will pop-up to allow you to upload a new cover or select a preexisting image.
  2. Fill in the track’s title
  3. Fill in the artist’s name
  4. You can also fill in a URL where your listeners can download your track, this will display a download button next to the track in the track listing. Please note that while AudioIgniter will try its best to make the link you provide downloadable it might not work everywhere or in all browsers (due to security reasons mostly). In case this happens you can host your downloadable files in a third party service that robustly supports downloads, e.g. Dropbox (with the ?dl=1 flag in the url).
  5. Click the Upload button to get a media manager pop-up which allows you either to upload a new mp3 file or select a preexisting one from your media library. Alternatively if you have a radio stream URL you can paste it in the box. 
  6. If the track is available for purchase you can paste the URL of the marketplace where your visitors can purchase it. This will display a cart button next to the track in the playlist.
  7. Click the Add Track button, rinse and repeat to add the rest tracks of your playlist.

Removing tracks

To remove a track simply click the Remove Track button.

Notice: You need to have at least two tracks for the remove track button to appear.

Playlist settings

There are a lot of settings available to help you get the most out of your playlists, let’s have a closer look at them.

  • Show track listing: this option allows you to toggle the appearance of the track listing. Leaving the box un-checked will start the playlist hidden. See players 1 & 2 here
  • Show track numbers in tracklist: this option toggles the appearance of tracklist numbering.
  • Show numbers in reverse order: reverses the number order to allow you to create a “countdown” playlist.
  • Show track covers in tracklist: select whether you want to display track covers in the tracklist.
  • Show active track’s cover: this option allows you to hide the current track’s cover from the player. See players 1 & 4 here
  • Show artist names: toggles the appearance of artist names on the player.
  • Show buy link: toggles the appearance of the buy link on the player.
  • Show “Powered by AudioIgniter” link: This allows you to display a powered by link below the playlist. Please consider enabling it if you like the plugin, it will help us a lot :)
  • Starting volume: If you want to initialize the player with a lower volume than 100% percent you can declare it in this box. Simply choose from 0 to 100 (in increments of 10)
  • Limit track listing height: Larger playlists will take up a lot of height on the page, to prevent that from happening you can set a fixed height for the list which will enable a scrollbar when the list goes beyond it. See players 2 & 3 here
  • Maximum player width: By default the player will take up all the available width, this allows you to set a maximum width for your player if you want to create a specific layout.

Once you figure out all the settings you are done with the list creation. Click the Publish button to finalize it.

Displaying the list

To display the list you need to grab its shortcode.

Scroll to the shortcode metabox and copy the shortcode text

ai_shortcode

Paste the shortcode in any post or page and save, that’s it, you can now see your playlist in action.

TIP: if you want to use the player in a sidebar you can paste the shortcode in a standard textwidget. If you don’t see the player after saving the widget you will need to enable shortcodes in textwidgets. Have a look at this article on how to do this.

AudioIgniter Pro

Installation

To get the plugin’s installable zip file navigate to our downloads section here and search for audioigniter

ai_pro_dl

Click the green download button and save the zip file when prompted.

Next navigate to Plugins > Add New in your WordPress dashboard and click the Upload Plugin button.

ai_pro_ul

Next click the Choose File button, search for the zip file you downloaded a moment ago, select it and then click the Install Now button.

ai_pro_install

Finally click the Activate Plugin link and you are done.

ai_pro_activate

Pro Features

Once you install and activate AudioIgniter Pro you get all its additional features, let’s have a closer look at them.

Custom widget

No need to hack your way through with text widgets. You now have a custom widget available to use on any sidebar. Navigate to Appearance > Widgets or Customize > Widgets place the AudioIgniter – Playlist widget in any sidebar, give it a title, select a playlist from the drop-down and save. Done!

ai_pro_widget

SoundCloud Integration

Allow users to listen to songs from your SoundCloud, directly on your site with the awesome look of AudioIgniter’s playlists. Just paste the SoundCloud URL in the box. But wait, there is more. Not only you can play tracks from SoundCloud, but you can also pull the track’s info, like name and cover, from SoundCloud so you don’t have to add them manually.

To do that you will need a SoundCloud Client ID. This is a process which unfortunately could take a couple of weeks to be approved. Follow the steps below to get one.

  • Login to SoundCloud’s developer portal here using your SoundCloud credentials.
  • Click on Register new app
    sc_new_app
  • Once you click the Register new app link you will see this
    sc_reg_1
    Go through the form filling process step by step.
  • The first page is just general info.
    sc_reg_2
  • Then we have app info. Business usage and monetization are per-case and you should decide what to fill in.sc_reg_3
  • If you have another app on SoundCloud provide the app’s info here.
    sc_reg_4
  • Finally submit the request and wait to hear from SoundCloud. Once the app is approved they will provide you with the necessary Client ID you need for AudioIgniter integration with SoundCloud.
    sc_reg5

 

Now that you have the Client ID you need to navigate to Customize > AudioIgniter > SoundCloud in your WordPress dashboard and paste the client ID in the box. Click the Save & Publish button and you are set.

sc_id_customizer

Once this is set up you can go back to your playlist. Clicking the Sync SoundCloud button next to the SoundCloud track’s URL will pull the info automatically.

Batch Uploads

In the pro version you can upload all your mp3 files at once and have them set up to be a track each on your playlist. Click the Batch Upload button and in the media manager pop-up upload and select all your tracks. Once done click the Select buttonThat’s it.

ai_pro_batch

If the ID tags on your mp3 files are properly set, track info like artist and title will be automatically set!

Rearrange-able tracks

Need to change the order of your playlist? No problem! Just click on the track’s title bar and drag, easy.

ai_pro_rearrange

Once you are done rearranging your tracks don’t forget to click the Update button to save the change.

Player Types

AudioIgniter Pro allows you to select between two types of players

in order to help you organize your playlists and use certain features each time depending on your case scenario.

Simple Player

Single Player provides less options and a different output without track images and controls.

  1. Select the Simple Player type.
  2. Enable or Disable your player features.
  3. Set the starting volume and the width and height of your player.

 

Full Player

Full player on the other hand, can display all controls and track images also.

  1. Select the Full Player type.
  2. Enable or Disable your player features.
  3. Set the starting volume and the width and height of your player.

Styling options

The pro version allows you to apply custom styling to your playlists via the WordPress customizer. Visit Customize > AudioIgniter > Appearance to do so.

ai_pro_appearance

Here you can change the background of the playlists with a solid color or image of your choice. Additionally you can modify the text color of various playlist items.

Internal taxonomy

With AudioIgniter Pro you can separate your playlist in categories which can help with organization and later retrieval. Please notice this is an internal taxonomy, which means that you can’t use it to display all playlists of a certain category in a listing page on your site, like you would do for example with a post category. The taxonomy is here mainly for archiving purposes.

Premium Support

Along these great extra features, AudioIgniter PRO comes with premium support via our dedicated support forum. Have any questions? Click here and ask away!

Shortcodes

Button shortcode:

[button][/button]

 

Available attributes

 

Examples

A button to CSSIgniter A button to CSSIgniter A button to CSSIgniter

[button url="https://www.cssigniter.com" size="large"]A button to CSSIgniter[/button]

New window to Google New window to Google New window to Google

[button url="http://www.google.com" target="_blank" scheme="red"]New window to Google[/button]

Download now Download now Download now

[button size="small" scheme="pink" border_color="#c9054f" border_width="2px" icon="fa-download"]Download now[/button]

Refresh Refresh Refresh

[button scheme="green" fg_color="rgb(10, 20, 30)" icon="fa-refresh" spin]Refresh[/button]

Rounded Rounded Rounded

[button icon="fa-spinner" corners="5px" spin]Rounded[/button]

Compatibility with pre-v2.0 versions

The button shortcode used to accept a type and color attributes that are now deprecated. Valid values for those attributes were:

  • type – Any one of: download, check, envelope, cancel, cart. Use of the type attributes is discouraged and unsupported. Existing shortcodes will get mapped to a similar icon.
  • color – Any one of: grey, white, blue, yellow, green, red, black, purple. Use of the color attributes is discouraged and unsupported. Existing shortcodes will get mapped to a similar scheme.

Box shortcode:

[box][/box]

 

Available attributes

 

Examples

Just a box with some content in it.
[box]Just a box with some content in it.[/box]

A red box
[box scheme="red"]A red box[/box]

With a black border and icon
[box scheme="red" border_color="#000000" border_width="thick" icon="fa-download"]With a black border and icon[/box]

Custom foreground color
[box scheme="green" fg_color="rgb(255, 255, 255)" icon="fa-refresh" spin]Custom foreground color[/box]

Rounded corners on a spinning icon.
[box icon="fa-spinner" corners="20px" spin]Rounded corners on a spinning icon.[/box]

 

Compatibility with pre-v2.0 versions

The box shortcode used to accept a type attribute that is now deprecated. Valid values for this attribute were:

  • type – Any one of: normal, info, warning, download, error, success. Use of the type attribute is discouraged and unsupported. Existing shortcodes will get mapped to a similar icon.

Grid shortcodes:

[row][/row], [column][/column], [col][/col]

With these shortcodes you can create a grid system within your posts or pages which will allow you to display your content in columns. The shortcode uses a twelve grid layout so the maximum sum of columns in a single row can’t be more than twelve. Start by creating the [row][/row] shortcode which is the container for your columns, much like a row in a spreadsheet contains the cells from each column. Then proceed by adding the [col][/col] or [column][/column], each [col][/col] shortcode will have a number which will represent how much of the available width the particular column will take up, for example if you have [col desktop="6"][/col] this column will take up 6 columns from the total 12, so half the available width. You are now left with 6 more columns which you can either use up in one or more [col][/col] shortcodes.

 

row – Available attributes

  • none

column, col – Available attributes

  • desktop – Number of columns for the medium breakpoint ‘md‘.
  • tablet – Number of columns for the small breakpoint ‘sm‘.
  • mobile – Number of columns for the extra small breakpoint ‘xs‘. Default ‘12
  • class – Additional classes for the generated wrapper. Useful for applying styles and/or targeting in custom styles.
  • id – An optional HTML id value for the generated wrapper. Useful for targeting in custom styles.

 

Examples

Two equal columns

Col #1 Content
Col #2 Content

[row][col desktop="6" tablet="6"]Col #1 Content[/col][col desktop="6" tablet="6"]Col #2 Content[/col][/row]

Three equal columns

Col #1 Content
Col #2 Content
Col #3 Content

[row][col desktop="4"]Col #1 Content[/col][col desktop="4"]Col #2 Content[/col][col desktop="4"]Col #3 Content[/col][/row]

Two unequal columns on desktop, equal on tablets.

Col #1 Content
Col #2 Content

[row][column desktop="4"]Col #1 Content[/column][column desktop="8"]Col #2 Content[/column][/row]

 

Nested columns

WordPress can’t handle nested shortcodes of the same name. So, you can’t really do:

[row][column] Blah blah [row][column] Blah [/column][column] Blah [/column][/row][/column][column] Blah [/column][/row]

We have made available, however, the same row and column shortcodes prefixed with one and two undescores, so for each nesting level (up to two) you just ads an underscore. E.g.:

[row][column] Blah blah [_row][_column] Blah [/_column][_column] Blah [/_column][/_row][/column][column] Blah [/column][/row]

The additionally available shortcodes are: _row, __row, _column, __column, _col, __col

 

Compatibility with pre-v2.0 versions

The older shortcodes one_half, one_half_last, one_third, one_third_last, two_thirds, two_thirds_last are now deprecated. Although they are mapped to the new column shortcode for compatibility, it’s not possible to automatically wrap them in a row. So, results will vary from installation to installation, and even from post to post. If you are having troubles with the layout of these old shortcodes, try wrapping them in a [row][/row] shortcode.


Headings shortcodes:

[h][/h], [h1][/h1], [h2][/h2], [h3][/h3], [h4][/h4], [h5][/h5], [h6][/h6]

 

With the h shortcode, you can create styled headings for you content. The shortcodes h1-h6 are just shorthand aliases to h with the level attribute already set.

 

Available attributes

 

Examples

This is set from the options to be H2

[h scheme="green"]This is set from the options to be H2[/h]

A maroon H3 with globe

[h level="3" icon="fa-globe" fg_color="maroon" spin]A maroon H3 with globe[/h]

An H4 with a lemon

[h4 icon="fa-lemon-o" scheme="yellow"]An H4 with a lemon[/h4]

With a bottom border

[h3 icon="fa-globe" border_width="0 0 4px 0" border_color="#444444"]With a bottom border[/h3]



List shortcode:

[list][/list]

&nbsp
You can replace those boring default HTML bullets by any icon you like. Just create a normal unordered (ul) list from within the WordPress editor, and wrap it in a [list][/list] shortcode.

 

Available attributes

 

Examples

  • Item 1
  • Item 2
    • Item 2-1
  • Item 3

  • Item 1
  • Item 2
    • Item 2-1
  • Item 3

  • Item 1
  • Item 2
    • Item 2-1
  • Item 3

[list color="red" icon="fa-close"]

  • Item 1
  • Item 2
    • Item 2-1
  • Item 3

[/list]


 

Compatibility with pre-v2.0 versions

The list shortcode used to accept a type attribute that is now deprecated. Valid values for this attribute were:

  • type – Any one of: check, cross. Use of the type attribute is discouraged and unsupported. Existing shortcodes will get mapped to a similar icon.

Blockquote shortcode:

[quote][/quote]

 

Available attributes

 

Examples

Try not to become a man of success, but rather try to become a man of value.

Albert Einstein

[quote title="Albert Einstein"]Try not to become a man of success, but rather try to become a man of value.[/quote]

Try not to become a man of success, but rather try to become a man of value.

Albert Einstein

[quote title="Albert Einstein" scheme="green" fg_color="#ffffff"]Try not to become a man of success, but rather try to become a man of value.[/quote]

 

Compatibility with pre-v2.0 versions

The quote shortcode used to accept a float attribute that is now removed. Valid values for this attribute were:

  • float – Any one of: left, right. Use of the float attribute is not supported. Existing shortcodes will behave as if the attribute was omitted.

Separator shortcodes:

[separator /], [hr /]

Both shortcodes separator and hr, are just aliases of each other and behave exactly the same.

Available attributes

  • type – The type / styling of the separator. Any one value of: solid, dotted, dashed, double, groove, ridge, inset, outset. Default ‘solid‘.
  • scheme – Color scheme. Any predefined color scheme name.
  • color – The color of the separator. Any valid CSS color.
  • height – The height of the separator (bottom border). Any valid CSS border-width: value.
  • width – The width of the separator. Any valid CSS unit of length.
  • center – Centered separator. Any one value of: true, on. Furthermore, a ‘center‘ value can be placed by itself as a shorthand, without the need for the attribute name.

 

Examples


[separator /]


[hr type="dotted" scheme="red" width="50%" center /]


[hr type="dashed" scheme="green" height="10px" /]


[hr type="groove" scheme="blue" height="thick" width="80%" /]


[hr type="ridge" /]

 

Compatibility with pre-v2.0 versions

The separator shortcode used to accept a type attribute that is now removed. Valid values for this attribute were:

  • type – Any one of: normal, lightning. Use of the type attribute is not supported. Existing shortcodes will behave as if the attribute was omitted.

Tooltip shortcode:

[tooltip][/tooltip]

 

Available attributes

  • tip – The content that appears as the tootip. Required.
  • position – The position of the tooltip relative to the hover-able text. Any one value of: top, bottom, left, right. If empty, the tooltip appears over the hover-able text.
  • always – Always show the tooltip. Any one value of: on. Furthermore, a ‘alwayson‘ value can be placed by itself as a shorthand, without the need for the attribute name.
  • color – The color scheme of the tooltip. Any one value of: dark, light. Default ‘dark‘. Furthermore, a ‘light‘ value can be placed by itself as a shorthand, without the need for the attribute name.

 

Examples

Do you know what a CPU is?

[tooltip tip="Central Processing Unit"]CPU[/tooltip]

Just a tooltip on the top.

[tooltip tip="I'm on top!" position="top"]on the top.[/tooltip]

How about an always on, right, tooltip?

[tooltip tip="Cool!" position="right" light alwayson]always on, right, tooltip?[/tooltip]

 

Compatibility with pre-v2.0 versions

The tooltip shortcode used to accept a contents and color attributes that are now deprecated. Valid values for these attributes were:

  • contents – The content that appears as the tooltip. Use of the contents attribute is not supported. Existing shortcodes will map this attribute to the tip attribute.
  • color – The color attribute is still in use, however the older ‘grey‘ value is no longer support. Existing shortcodes using ‘grey‘ will get mapped to ‘light‘ instead.

Map shortcodes:

[map /] , [googlemap /]

 

Available attributes

  • lat – The latitude of a place in the map. Any decimal value between -90 to 90. Required.
  • lon – The longitude of a place in the map. Any decimal value between -180 to 180. Required.
  • zoom – Zoom level of the map. Any integer value between 0-21. Default ‘8‘.
  • title – The text appearing when hovering over the map marker.
  • text – The text appearing when the map marker gets clicked.

 

Examples

[map lat="40.7828649" lon="-73.9653549" zoom="16" /]

[map lat="40.7828649" lon="-73.9653549" title="New York" text="Central Park" /]

Compatibility with pre-v2.0 versions

The googlemap shortcode used to accept a src attribute that is now deprecated. Valid values for this attribute were:

  • src – A google maps URL. Use of the src attribute is no longer supported. Existing shortcodes will extract and map this attribute to the appropriate lat, lon and zoom attributes.

Important information regarding map shortcode usage

The maps API is off by default on new installations, to enable it go to Settings > CSSIgniter Shortcodes and check the Load Google Maps API box. Additionally you will need maps API key as it is mandatory for the map embed to work. More info about this here.

maps_api


Slider shortcodes:

[slider][/slider] , [slide][/slide]

To create a slider wrap one or more [slide][/slide] shortcodes into a [slider][/slider] shortcode. The slide’s content will be placed in the slide shortcode, like this [slide] Slider content here [/slide].

 

slider – Available attributes

  • scheme – Color scheme. Any predefined color scheme name.
  • bg_color – The background color of the slider’s content. Any valid CSS color.
  • fg_color – The foreground (text) color of the slider’s content. Any valid CSS color.
  • border_color – The border color of the slider. Any valid CSS color.
  • border_width – The width of the slider’s border. Any valid CSS border-width: value.
  • corners – The radius of the slider’s border corners. Any valid CSS border-radius: value. Note: If you provide a single CSS unit value, it will only be applied to the to top-left and top-right corners of each tab. This is on purpose, to get the best result with minimal typing. If you need to affect all corners of the tabs, you’ll need to provide four values, e.g. corners=”10px 10px 10px 10px”

 

Examples

[slider][slide]Content 1[/slide][slide]Content 2[/slide][slide]Content 3[/slide][/slider]


Tabs shortcodes:

[tabs][/tabs] , [tab][/tab]

In order to create a set of tabs, you need to wrap one or more [tab][/tab] shortcodes into a [tabs][/tabs] shortcode.

 

tabs – Available attributes

 

tab – Available attributes

  • title – The text that appears on the tab. Required.

 

Examples

Content 1
Content 2
[tabs][tab title="Tab 1"]Content 1[/tab][tab title="Tab 2"]Content 2[/tab][/tabs]



Accordions shortcodes:

[accordion][/accordion], [accordion_tab][/accordion_tab]

Accordions’ syntax and attributes are exactly the same like the tabs shortcode. Only the actual names of the shortcode change. That way, you can easily swap from tabs to accordions and back, without touching any of the attributes.

 

accordion – Available attributes

  • scheme – Color scheme. Any predefined color scheme name.
  • bg_color – The background color of the accordion tabs’ content. Any valid CSS color.
  • fg_color – The foreground (text) color of the accordion tabs’ content. Any valid CSS color.
  • tab_bg_color – The background color of the inactive accordion tabs. Any valid CSS color.
  • tab_fg_color – The foreground (text) color of the inactive accordion tabs. Any valid CSS color.
  • active_bg_color – The background color of the active accordion tab. Any valid CSS color.
  • active_fg_color – The foreground (text) color of the accordion active tab. Any valid CSS color.
  • border_color – The border color of the accordion. Any valid CSS color.
  • border_width – The width of the accordion’s border. Any valid CSS border-width: value.
  • corners – The radius of the accordion tabs’ border corners. Any valid CSS border-radius: value. Note: If you provide a single CSS unit value, it will only be applied to the to top-left and top-right corners of each accordion tab. This is on purpose, to get the best result with minimal typing. If you need to affect all corners of the accordion tabs, you’ll need to provide four values, e.g. corners=”10px 10px 10px 10px”

 

accordion_tab – Available attributes

  • title – The text that appears on the accordion tab. Required.

 

Examples

Content 1
Content 2
[accordion][accordion_tab title="Tab 1"]Content 1[/accordion_tab][accordion_tab title="Tab 2"]Content 2[/accordion_tab][/accordion]



Common attributes.

 

Predefined color schemes.

Any shortcode that accepts an attribute named ‘scheme‘ can accept any one of the following values: blue, red, yellow, orange, purple, pink, brown, green, grey, white, black.

 

color

All attributes in every shortcode that accept a CSS color value, usually named ‘something_color’ can accept any of these color formats:

  • Hexadecimal: #000000 to #ffffff upper-case or lower-case. Shorthand notation is not allowed, i.e. #000 to #fff
  • rgb(): rgb($r, $g, $b) – Where $r $g and $b is a number 0-255 or a percentage 0%-100%
  • rgba(): rgba($r, $g, $b, $a) – As above, and $a between 0-1.
  • hsl(): hsl($h, $s, $l) – Where $h 0-360, $s and $l 0%-100%.
  • hsla(): hsla($h, $s, $l, $a) – As above, and $a between 0-1 (decimal values allowed).
  • Any one of the following keywords: transparent, initial, inherit, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua

Please note that common names between the predefined colors above and the color schemes, doesn’t necessarily translate to the same color values.

 

spin_icon

Where a spin_icon attribute is available, valid values are: ‘true‘, ‘spin‘.
Furthermore, a ‘spin‘ value can be placed by itself as a shorthand, without the need for the attribute name.

 

Examples

The following shortcodes are all identical:

[button icon="fa-download" spin_icon="spin"]Some text[/button]

[button icon="fa-download" spin_icon="true"]Some text[/button]

[button icon="fa-download" spin]Some text[/button]

They all produce:

Some text

 

border_width

Shortcodes that have a border_width property, can accept any valid CSS shorthand border-width value:

  • One to four CSS units of length.
  • Any one of the following keywords: thin, medium, thick, initial, inherit

 

Examples

Just box.
[box border_width="2px"]Just box.[/box]

Just a weird box.
[box border_width="1px 2em 8px 4rem"]Just weird box.[/box]

corners

Shortcodes that have a corners property, can accept any valid CSS shorthand border-radius value:

  • One to four CSS units of length, optionally followed by a forward slash ‘/‘ and one to four CSS units of length.
  • Any one of the following keywords: initial, inherit

 

Examples

A box with rounded corners.
[box corners="10px"]A box with rounded corners.[/box]

A box with strange rounded corners.
[box corners="20px 2em / 10px"]A box with strange rounded corners.[/box]

padding

Shortcodes that have a padding property, can accept any valid CSS shorthand padding value:

Length Units

Any property that requires a CSS unit of length accepts a number immediately followed by one of the following units: px, %, em, rem, ex, ch, vh, vw, vmin, vmax, mm, cm, in, pt, pc

Decimal numbers expressed in pixels (px) may or may not work depending on each browser’s handling, they are however accepted by the plugin.

 

Examples

  • 1px
  • 0.5em
  • 1.2rem

Compatibility Mode

It’s quite common for users to have installed more than one shortcodes plugins, or for themes to provide their own shortcodes. When this happens, chances are that some shortcodes overlap, and more often than not, you end up having shortcodes that you can’t be sure where are they getting their styles and markup from.

Just go into the plugin’s settings panel, check the Compatibility Mode checkbox and Save Changes. You’ve just future-proofed your posts! All shortcodes now require a prefix of ‘ci-‘ minimizing the risk of collision with other shortcode providers. For example, instead of [button]Hello[/button] you should now write [ci-button]Hello[/ci-button]