Below, you’ll find a detailed guide on how to add the Ovic Addon Toolkit Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Ovic Addon Toolkit Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Ovic Addon Toolkit Plugin and the shortcodes it provides:
"Ovic Addon Toolkit is a powerful WordPress plugin, offering a suite of tools designed to enhance and optimize your website's functionality. It simplifies complex tasks, making site management easier."
- [ovic-addon-toolkit]
- [ovic_mailchimp]
- [ovic_photo_editor]
Ovic Addon Toolkit [ovic-addon-toolkit] Shortcode
The Ovic-Addon-Toolkit shortcode is a powerful tool for customization. It allows the creation of a new instance of the class for content manipulation. It checks if the ‘content’ method exists, parses arguments, and applies filters before returning the final content.
Shortcode: [ovic-addon-toolkit]
Examples and Usage
Basic example – A simple way to use the shortcode is by calling it without any parameters. This will output the default content of the plugin.
[ovic-addon-toolkit /]Advanced examples
Customize the output by passing parameters to the shortcode. Here’s an example where we pass a ‘style’ parameter to change the appearance of the output.
[ovic-addon-toolkit style="modern" /]We can also pass multiple parameters to further customize the output. In this example, we’re passing a ‘style’ parameter and a ‘color’ parameter.
[ovic-addon-toolkit style="modern" color="blue" /]Parameters can also be used to control the content of the output. In this example, we’re passing a ‘category’ parameter to display content from a specific category.
[ovic-addon-toolkit category="news" /]Remember that the parameters you can use depend on the functionality of the ovic-addon-toolkit plugin. Always refer to the plugin’s documentation for the most accurate information.
PHP Function Code
In case you have difficulties debugging what causing issues with [ovic-addon-toolkit] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( "{$shortcode}", "{$class_name}::output_html" );Shortcode PHP function:
function output_html( $atts, $content = null )
{
$classname = static::class;
$instance = new $classname();
if ( method_exists( $classname, 'content' ) ) {
if ( !empty( $instance->default ) ) {
$atts = wp_parse_args( $atts, $instance->default );
}
$content = $instance->content( $atts, $content );
}
unset( $instance );
return apply_filters( $classname, $content, $atts );
}
Code file location:
ovic-addon-toolkit/ovic-addon-toolkit/includes/classes/abstract-shortcode.phpOvic Addon Toolkit [ovic_mailchimp] Shortcode
The Ovic-Addon-Toolkit shortcode, ‘ovic_mailchimp’, is designed to create a Mailchimp subscription form. It allows users to subscribe to a mailing list by inputting their first name, last name, and email.
Shortcode: [ovic_mailchimp]
Parameters
Here is a list of all possible ovic_mailchimp shortcode parameters and attributes:
field_name– Determines if the form will include fields for first and last names.list_id– The ID of the Mailchimp list where the form data will be sent.fname_text– The placeholder text for the first name field.lname_text– The placeholder text for the last name field.placeholder– The placeholder text for the email field.button_text– The text displayed on the submit button.
Examples and Usage
Basic example – The shortcode can be used to create a simple subscription form with just the email field. The ‘list_id’ parameter should be provided to link the form with a specific Mailchimp list.
[ovic_mailchimp list_id="your_list_id" /]Advanced examples
Displaying a subscription form with both first name and last name fields. The ‘field_name’ parameter is set to ‘yes’ to enable these fields, and ‘fname_text’ and ‘lname_text’ parameters are used to customize the placeholder text for these fields.
[ovic_mailchimp list_id="your_list_id" field_name="yes" fname_text="Enter First Name" lname_text="Enter Last Name" /]Customizing the email field placeholder text and the button text. The ‘placeholder’ and ‘button_text’ parameters are used to customize these texts.
[ovic_mailchimp list_id="your_list_id" placeholder="Enter Your Email" button_text="Join Now" /]Combining all the above options to create a fully customized subscription form.
[ovic_mailchimp list_id="your_list_id" field_name="yes" fname_text="Enter First Name" lname_text="Enter Last Name" placeholder="Enter Your Email" button_text="Join Now" /]PHP Function Code
In case you have difficulties debugging what causing issues with [ovic_mailchimp] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'ovic_mailchimp', array( self::$instance, 'mailchimp_shortcode' ) );Shortcode PHP function:
function mailchimp_shortcode( $atts, $content = '' )
{
$default = array(
'field_name' => 'no',
'list_id' => '',
'fname_text' => 'First Name',
'lname_text' => 'Last Name',
'placeholder' => 'Your email letter',
'button_text' => 'Subscribe',
);
$atts = shortcode_atts( $default, $atts );
extract( $atts );
$class = array( 'newsletter-form-wrap' );
if ( $atts['field_name'] == 'yes' ) {
$class[] = 'has-name-field';
}
ob_start();
?>
<form class="<?php echo esc_attr( implode( ' ', $class ) ); ?>">
<?php if ( isset( $atts['list_id'] ) && $atts['list_id'] !== '' ): ?>
<input type="hidden" name="list_id"
value="<?php echo esc_attr( $atts['list_id'] ); ?>">
<?php endif; ?>
<?php if ( $atts['field_name'] == 'yes' ): ?>
<label class="text-field field-fname">
<input class="input-text fname" type="text" name="FNAME"
placeholder="<?php echo esc_html( $atts['fname_text'] ); ?>">
</label>
<label class="text-field field-lname">
<input class="input-text lname" type="text" name="LNAME"
placeholder="<?php echo esc_html( $atts['lname_text'] ); ?>">
</label>
<?php endif; ?>
<label class="text-field field-email">
<input class="input-text email email-newsletter" type="email" name="email"
placeholder="<?php echo esc_attr( $atts['placeholder'] ); ?>">
</label>
<a href="#" class="button btn-submit submit-newsletter">
<?php echo esc_html( $atts['button_text'] ); ?>
</a>
</form>
<?php
$html = ob_get_clean();
return apply_filters( 'ovic_output_mailchimp_form', $html, $atts );
}
Code file location:
ovic-addon-toolkit/ovic-addon-toolkit/includes/extends/mailchimp/mailchimp.phpOvic Addon Toolkit [ovic_photo_editor] Shortcode
The Ovic Addon Toolkit shortcode ‘ovic_photo_editor’ is a powerful tool for editing photos directly on your WordPress site. It loads necessary styles and scripts, sets up a unique identifier, and default dimensions for the editor. It also prepares a list of fonts and image alignments. The shortcode then creates an interactive photo editor with alignment, text edit, and color controls. Additionally, it allows for adding text, deleting, and saving changes.
Shortcode: [ovic_photo_editor]
Parameters
Here is a list of all possible ovic_photo_editor shortcode parameters and attributes:
id– Unique identifier for each photo editor instance.width– Defines the width of the photo editor.height– Sets the height of the photo editor.images– Specifies images to be preloaded into the gallery.filename– Names the file for the edited photo download.
Examples and Usage
Basic example – Display a photo editor with default settings
[ovic_photo_editor /]Advanced examples
Display a photo editor with specific width and height
[ovic_photo_editor width=800 height=800 /]Display a photo editor with specific images. The images parameter accepts a comma-separated list of image IDs.
[ovic_photo_editor images="1,2,3,4" /]Display a photo editor with a specific filename for the saved image
[ovic_photo_editor filename="my-custom-photo.png" /]Display a photo editor with specific width, height, images, and filename
[ovic_photo_editor width=800 height=800 images="1,2,3,4" filename="my-custom-photo.png" /]PHP Function Code
In case you have difficulties debugging what causing issues with [ovic_photo_editor] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('ovic_photo_editor', array($this, 'content'));Shortcode PHP function:
function content($atts, $content = null)
{
wp_enqueue_style('ovic-google-fonts');
wp_enqueue_style('ovic-photo-editor');
wp_enqueue_script('ovic-photo-editor');
$atts = wp_parse_args($atts, [
'id' => uniqid('photo-editor-'),
'width' => 600,
'height' => 600,
'images' => '',
'filename' => 'photo-editor.png',
]);
$fonts = array(
'Arial',
'Arial Black',
'Helvetica',
'Times New Roman',
'Courier New',
'Tahoma',
'Verdana',
'Impact',
'Trebuchet MS',
'Comic Sans MS',
'Lucida Console',
'Lucida Sans Unicode',
'Georgia, serif',
'Oswald, serif',
'Palatino Linotype'
);
$galleries = array();
if (!empty($atts['images'])) {
$galleries = is_array($atts['images']) ? $atts['images'] : explode(',', $atts['images']);
}
$left = file_get_contents($this->path.'images/left.svg');
$center = file_get_contents($this->path.'images/center.svg');
$right = file_get_contents($this->path.'images/right.svg');
$top = file_get_contents($this->path.'images/top.svg');
$middle = file_get_contents($this->path.'images/middle.svg');
$bottom = file_get_contents($this->path.'images/bottom.svg');
ob_start();
?>
<div class="ovic-photo-editor">
<div class="top-controls">
<div class="alignment-control">
<span>Alignment</span>
<div class="btn-horizontal">
<a href="#" data-value="left">
<?php echo wp_specialchars_decode($left); ?>
</a>
<a href="#" class="active" data-value="center">
<?php echo wp_specialchars_decode($center); ?>
</a>
<a href="#" data-value="right">
<?php echo wp_specialchars_decode($right); ?>
</a>
</div>
<div class="btn-vertical">
<a href="#" data-value="top">
<?php echo wp_specialchars_decode($top); ?>
</a>
<a href="#" class="active" data-value="middle">
<?php echo wp_specialchars_decode($middle); ?>
</a>
<a href="#" data-value="bottom">
<?php echo wp_specialchars_decode($bottom); ?>
</a>
</div>
</div>
<div class="text-control" hidden>
<span>Text Edit</span>
<label>
<select class="font-family">
<?php foreach ($fonts as $font) {
echo '<option value="'.esc_attr($font).'">'.esc_html($font).'</option>';
} ?>
</select>
</label>
<label>
Text Color: <input type="color" class="text-color" size="10">
</label>
<label>
Background Color: <input type="color" class="background-color" size="10">
</label>
<div class="group-text">
<input type='checkbox' name='font_type' class="bold"> <b>Bold</b>
<input type='checkbox' name='font_type' class="italic"> <em>Italic</em>
<input type='checkbox' name='font_type' class="underline"> Underline
<input type='checkbox' name='font_type' class="linethrough"> Linethrough
<input type='checkbox' name='font_type' class="overline"> Overline
</div>
</div>
</div>
<div class="photo-container">
<?php if (!empty($galleries)): ?>
<div class="photo-galleries" style="max-height:<?php echo esc_attr($atts['height']) ?>px">
<?php foreach ($galleries as $gallery): ?>
<?php echo wp_get_attachment_image($gallery, array($atts['width'], $atts['height'])); ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<canvas class="editor"
width="<?php echo esc_attr($atts['width']) ?>"
height="<?php echo esc_attr($atts['height']) ?>"></canvas>
</div>
<div class="bottom-controls">
<label title="Add an image" class="add-file button">
<span class="mdi mdi-image">Add Photo</span>
<input type="file" class="image"/>
</label>
<label title="Add a background" class="add-file button hidden">
<span class="mdi mdi-image">Add Background</span>
<input type="file" class="background"/>
</label>
<a class="add-text button" title="Add text">
<span class="mdi mdi-format-text">Add Text</span>
</a>
<a class="delete button" title="Delete Anything Selected">
<span class="mdi mdi-delete">Delete</span>
</a>
<a class="button" onclick="refresh()" title="Start fresh">
<span class="mdi mdi-shredder">Clear All</span>
</a>
<a class="download button" title="Save"
data-filename="<?php echo esc_attr($atts['filename']) ?>">
<span class="mdi mdi-download">Save</span>
</a>
</div>
</div>
<?php
return ob_get_clean();
}
Code file location:
ovic-addon-toolkit/ovic-addon-toolkit/includes/extends/photo-editor/photo-editor.phpConclusion
Now that you’ve learned how to embed the Ovic Addon Toolkit Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply